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 @@ -
- +
-

{{ notification.action.user.name }}
favorited your status

-

{{ notification.status.text }}

+

+ {{ notification.action.user.name }} + + +

+
-

{{ notification.action.user.name }}
repeated your status

-

{{ notification.status.text }}

+

+ {{ notification.action.user.name }} + + +

+
-

{{ notification.action.user.name }}
mentioned you

-

{{ notification.status.text }}

+

+ {{ notification.action.user.name }} + + +

+
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 @@