diff options
| -rw-r--r-- | src/components/notifications/notifications.js | 5 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 8 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 27 | ||||
| -rw-r--r-- | src/components/status/status.js | 3 | ||||
| -rw-r--r-- | src/components/status/status.vue | 17 | ||||
| -rw-r--r-- | src/main.js | 2 | ||||
| -rw-r--r-- | static/timeago.json | 10 |
7 files changed, 59 insertions, 13 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index c8d5e212..c0c86c68 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -1,3 +1,5 @@ +import Status from '../status/status.vue' + import { sortBy, take, filter } from 'lodash' const Notifications = { @@ -23,6 +25,9 @@ const Notifications = { return this.unseenNotifications.length } }, + components: { + Status + }, watch: { unseenCount (count) { if (count > 0) { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index c7c650a9..f02ced8d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -45,19 +45,23 @@ word-wrap: break-word; line-height:18px; - .icon-retweet { + .icon-retweet.lit { color: $green; } - .icon-reply { + .icon-reply.lit { color: $blue; } h1 { + word-break: break-all; margin: 0 0 0.3em; padding: 0; font-size: 1em; line-height:20px; + small { + font-weight: lighter; + } } padding: 0.3em 0.8em 0.5em; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index a326e9cd..256d6f7a 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -11,19 +11,30 @@ <a :href="notification.action.user.statusnet_profile_url"> <img class='avatar' :src="notification.action.user.profile_image_url_original"> </a> - <div class='text'> - <timeago :since="notification.action.created_at" :auto-update="240"></timeago> + <div class='text' style="width: 100%;"> <div v-if="notification.type === 'favorite'"> - <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</router-link></h1> - <p>{{ notification.status.text }}</p> + <h1> + {{ notification.action.user.name }} + <i class="fa icon-star"></i> + <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> + </h1> + <div v-html="notification.status.statusnet_html"></div> </div> <div v-if="notification.type === 'repeat'"> - <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</router-link></h1> - <p>{{ notification.status.text }}</p> + <h1> + {{ notification.action.user.name }} + <i class="fa icon-retweet lit"></i> + <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> + </h1> + <div v-html="notification.status.statusnet_html"></div> </div> <div v-if="notification.type === 'mention'"> - <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1> - <p>{{ notification.status.text }}</p> + <h1> + {{ notification.action.user.name }} + <i class="fa icon-reply lit"></i> + <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> + </h1> + <status :compact="true" :statusoid="notification.status"></status> </div> </div> </div> diff --git a/src/components/status/status.js b/src/components/status/status.js index 5e7bde53..183838a8 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -12,7 +12,8 @@ const Status = { 'expandable', 'inConversation', 'focused', - 'highlight' + 'highlight', + 'compact' ], data: () => ({ replying: false, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8886b551..6fd53420 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,5 +1,20 @@ <template> - <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" > + <div class="status-el base00-background" v-if="compact"> + <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div> + <div v-if="loggedIn"> + <div class='status-actions'> + <div> + <a href="#" v-on:click.prevent="toggleReplying"> + <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i> + </a> + </div> + <retweet-button :status=status></retweet-button> + <favorite-button :status=status></favorite-button> + </div> + </div> + <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/> + </div> + <div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" > <template v-if="muted"> <div class="media status container muted"> <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> diff --git a/src/main.js b/src/main.js index 969ca8dc..35261578 100644 --- a/src/main.js +++ b/src/main.js @@ -24,7 +24,7 @@ Vue.use(VueRouter) Vue.use(VueTimeago, { locale: 'en-US', locales: { - 'en-US': require('vue-timeago/locales/en-US.json') + 'en-US': require('../static/timeago.json') } }) diff --git a/static/timeago.json b/static/timeago.json new file mode 100644 index 00000000..b6f669c2 --- /dev/null +++ b/static/timeago.json @@ -0,0 +1,10 @@ +[ + "now", + ["%ss", "%ss"], + ["%smin", "%smin"], + ["%sh", "%sh"], + ["%sd", "%sd"], + ["%sw", "%sw"], + ["%sm", "%sm"], + ["%sy", "%sy"] +] |