diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/notification/notification.js | 3 | ||||
| -rw-r--r-- | src/components/notification/notification.vue | 83 | ||||
| -rw-r--r-- | src/components/notifications/notifications.js | 5 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 3 |
4 files changed, 57 insertions, 37 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index fe5b7018..c86f22bb 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -21,6 +21,9 @@ const Notification = { }, userProfileLink (user) { return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) + }, + dismiss () { + this.$store.dispatch('dismissNotifications', { id: this.notification.id }) } }, computed: { diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 5e9cef97..b281c7cf 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -1,44 +1,57 @@ <template> - <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status> - <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else> - <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> - <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/> - </a> - <div class='notification-right'> - <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/> - <span class="notification-details"> - <div class="name-and-action"> - <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span> - <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span> - <span v-if="notification.type === 'like'"> - <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" :title="$t('tool_tip.repeat')"></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> - </div> - <div class="timeago"> - <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link"> - <timeago :since="notification.action.created_at" :auto-update="240"></timeago> + <div class="notification-item"> + <button @click.prevent="dismiss" class="btn-dismiss">{{$t("notifications.dismiss")}}</button> + <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status> + <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else> + <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> + <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/> + </a> + <div class='notification-right'> + <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/> + <span class="notification-details"> + <div class="name-and-action"> + <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span> + <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span> + <span v-if="notification.type === 'like'"> + <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" :title="$t('tool_tip.repeat')"></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> + </div> + <div class="timeago"> + <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link"> + <timeago :since="notification.action.created_at" :auto-update="240"></timeago> + </router-link> + </div> + </span> + <div class="follow-text" v-if="notification.type === 'follow'"> + <router-link :to="userProfileLink(notification.action.user)"> + @{{notification.action.user.screen_name}} </router-link> </div> - </span> - <div class="follow-text" v-if="notification.type === 'follow'"> - <router-link :to="userProfileLink(notification.action.user)"> - @{{notification.action.user.screen_name}} - </router-link> + <template v-else> + <status class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status> + </template> </div> - <template v-else> - <status class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status> - </template> </div> </div> </template> <script src="./notification.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.notification-item { + display: flex; + flex: 1; + flex-direction: column; +} +</style>
\ No newline at end of file diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 9fc5e38a..68004d54 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -53,7 +53,10 @@ const Notifications = { }, methods: { markAsSeen () { - this.$store.dispatch('markNotificationsAsSeen', this.visibleNotifications) + this.$store.dispatch('markNotificationsAsSeen') + }, + clear () { + this.$store.dispatch('clearNotifications') }, fetchOlderNotifications () { const store = this.$store diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 6f162b62..6438361d 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -9,7 +9,8 @@ <div @click.prevent class="loadmore-error alert error" v-if="error"> {{$t('timeline.error_fetching')}} </div> - <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button> + <!-- <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button> --> + <button v-if="notifications.length" @click.prevent="clear" class="read-button">{{$t('notifications.clear')}}</button> </div> <div class="panel-body"> <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'> |