commit: 963a0035e5e3f35ee790aeb3db64cb8dd32a84a4
parent: d0281f5341a6fa97983beca158c051ddca66d6a1
Author: Roger Braun <roger@rogerbraun.net>
Date: Sat, 18 Feb 2017 20:42:00 +0100
Make page title dynamic, better notification handling.
Diffstat:
4 files changed, 38 insertions(+), 7 deletions(-)
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
@@ -1,4 +1,4 @@
-import { sortBy, take } from 'lodash'
+import { sortBy, take, filter } from 'lodash'
const Notifications = {
data () {
@@ -7,8 +7,30 @@ const Notifications = {
}
},
computed: {
+ notifications () {
+ return this.$store.state.statuses.notifications
+ },
+ unseenNotifications () {
+ return filter(this.notifications, ({seen}) => !seen)
+ },
visibleNotifications () {
- return take(sortBy(this.$store.state.statuses.notifications, ({action}) => -action.id), this.visibleNotificationCount)
+ // Don't know why, but sortBy([seen, -action.id]) doesn't work.
+ let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id)
+ sortedNotifications = sortBy(sortedNotifications, 'seen')
+ return take(sortedNotifications, this.visibleNotificationCount)
+ },
+ unseenCount () {
+ return this.unseenNotifications.length
+ }
+ },
+ watch: {
+ unseenCount (count) {
+ this.$store.dispatch('setPageTitle', `(${count})`)
+ }
+ },
+ methods: {
+ markAsSeen () {
+ this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
}
}
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
@@ -1,13 +1,14 @@
<template>
<div class="notifications">
<div class="panel panel-default base00-background">
- <div class="panel-heading base01-background base04">Notifications ({{visibleNotifications.length}})</div>
+ <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
<div class="panel-body">
- <div v-for="notification in visibleNotifications" class="notification">
+ <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
<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 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</h1>
<p>{{ notification.status.text }}</p>
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -13,11 +13,14 @@ const config = {
}
},
actions: {
- setOption ({ commit }, { name, value }) {
+ setPageTitle ({state}, option = '') {
+ document.title = `${state.name} ${option}`
+ },
+ setOption ({ commit, dispatch }, { name, value }) {
commit('setOption', {name, value})
switch (name) {
case 'name':
- document.title = value
+ dispatch('setPageTitle')
break
case 'theme':
const fullPath = `/static/css/${value}`
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
@@ -173,7 +173,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
}
const addNotification = ({type, status, action}) => {
- state.notifications.push({type, status, action})
+ state.notifications.push({type, status, action, seen: false})
}
const favoriteStatus = (favorite) => {
@@ -276,6 +276,11 @@ export const mutations = {
setNsfw (state, { id, nsfw }) {
const newStatus = find(state.allStatuses, { id })
newStatus.nsfw = nsfw
+ },
+ markNotificationsAsSeen (state, notifications) {
+ each(notifications, (notification) => {
+ notification.seen = true
+ })
}
}