diff options
| -rw-r--r-- | src/components/notification/notification.js | 24 | ||||
| -rw-r--r-- | src/components/notification/notification.vue | 35 | ||||
| -rw-r--r-- | src/components/notifications/notifications.js | 12 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 12 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 29 |
5 files changed, 73 insertions, 39 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js new file mode 100644 index 00000000..3a274374 --- /dev/null +++ b/src/components/notification/notification.js @@ -0,0 +1,24 @@ +import Status from '../status/status.vue' +import StillImage from '../still-image/still-image.vue' +import UserCardContent from '../user_card_content/user_card_content.vue' + +const Notification = { + data () { + return { + userExpanded: false + } + }, + props: [ + 'notification' + ], + components: { + Status, StillImage, UserCardContent + }, + methods: { + toggleUserExpanded () { + this.userExpanded = !this.userExpanded + } + } +} + +export default Notification diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue new file mode 100644 index 00000000..74563ff9 --- /dev/null +++ b/src/components/notification/notification.vue @@ -0,0 +1,35 @@ +<template> + <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status> + <div class="non-mention" v-else> + <a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> + <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/> + </a> + <div class='notification-right'> + <div class="base03-border usercard" v-if="userExpanded"> + <user-card-content :user="notification.action.user" :switcher="false"></user-card-content> + </div> + <span class="notification-details"> + <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span> + <span v-if="notification.type === 'favorite'"> + <i class="fa icon-star lit"></i> + <small>{{$t('notifications.favorited_you')}}</small> + </span> + <span v-if="notification.type === 'repeat'"> + <i class="fa icon-retweet lit"></i> + <small>{{$t('notifications.repeated_you')}}</small> + </span> + <span v-if="notification.type === 'follow'"> + <i class="fa icon-user-plus lit"></i> + <small>{{$t('notifications.followed_you')}}</small> + </span> + <small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> + </span> + <div class="follow-text" v-if="notification.type === 'follow'"> + <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link> + </div> + <status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status> + </div> + </div> +</template> + +<script src="./notification.js"></script> diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 19f767ab..f8314bfc 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -1,14 +1,11 @@ -import Status from '../status/status.vue' -import StillImage from '../still-image/still-image.vue' -import UserCardContent from '../user_card_content/user_card_content.vue' +import Notification from '../notification/notification.vue' import { sortBy, take, filter } from 'lodash' const Notifications = { data () { return { - visibleNotificationCount: 10, - userExpanded: false + visibleNotificationCount: 20 } }, computed: { @@ -29,7 +26,7 @@ const Notifications = { } }, components: { - Status, StillImage, UserCardContent + Notification }, watch: { unseenCount (count) { @@ -43,9 +40,6 @@ const Notifications = { methods: { markAsSeen () { this.$store.commit('markNotificationsAsSeen', this.visibleNotifications) - }, - toggleUserExpanded () { - this.userExpanded = !this.userExpanded } } } diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 73a70a14..b0136426 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -41,7 +41,11 @@ flex: 1; flex-wrap: nowrap; padding: 0.6em; + min-width: 0; .status-el { + .status { + padding: 0.25em 0; + } padding: 0; .status-content.media-body { margin: 0; @@ -49,13 +53,18 @@ } } + .follow-text { + padding: 0.5em 0; + } + .status-el { flex: 1; } .notification-right { flex: 1; - margin-left: 0.8em; + padding-left: 0.8em; + min-width: 0; } .notification-details { @@ -65,7 +74,6 @@ position: relative; overflow: hidden; width: 100%; - padding: 0.5em; flex: 1; flex-wrap: nowrap; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 99f00032..71fd2604 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -8,34 +8,7 @@ </div> <div class="panel-body base03-border"> <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'> - <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status> - <div class="non-mention" v-else> - <a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> - <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/> - </a> - <div class='notification-right'> - <div class="base03-border usercard" v-if="userExpanded"> - <user-card-content :user="notification.action.user" :switcher="false"></user-card-content> - </div> - <span class="notification-details"> - <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span> - <span v-if="notification.type === 'favorite'"> - <i class="fa icon-star lit"></i> - <small>{{$t('notifications.favorited_you')}}</small> - </span> - <span v-if="notification.type === 'repeat'"> - <i class="fa icon-retweet lit"></i> - <small>{{$t('notifications.repeated_you')}}</small> - </span> - <span v-if="notification.type === 'follow'"> - <i class="fa icon-user-plus lit"></i> - <small>{{$t('notifications.followed_you')}}</small> - </span> - <small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> - </span> - <status class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status> - </div> - </div> + <notification :notification="notification"></notification> </div> </div> </div> |