refs #2014 Display only predefined notification type in notifications

This commit is contained in:
AkiraFukushima 2020-12-26 01:26:20 +09:00
parent f37deb8212
commit 9deac64c24
2 changed files with 35 additions and 13 deletions

View File

@ -2,7 +2,7 @@
<div id="notifications" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
<DynamicScroller :items="notifications" :min-item-size="20" class="scroller" page-mode>
<DynamicScroller :items="handledNotifications" :min-item-size="20" class="scroller" page-mode>
<template v-slot="{ item, index, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.url]" :data-index="index" :watchData="true">
<notification
@ -48,12 +48,12 @@ export default {
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
startReload: state => state.TimelineSpace.HeaderMenu.reload,
backgroundColor: state => state.App.theme.background_color,
notifications: state => state.TimelineSpace.Contents.Notifications.notifications,
lazyLoading: state => state.TimelineSpace.Contents.Notifications.lazyLoading,
heading: state => state.TimelineSpace.Contents.Notifications.heading,
unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications,
filter: state => state.TimelineSpace.Contents.Notifications.filter
}),
...mapGetters('TimelineSpace/Contents/Notifications', ['handledNotifications']),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function () {
if (this.modalOpened) {
@ -63,7 +63,7 @@ export default {
return true
}
// Sometimes notifications are deleted, so perhaps focused notification don't exist.
const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
const currentIndex = this.handledNotifications.findIndex(notification => this.focusedId === notification.id)
return currentIndex === -1
}
},
@ -123,7 +123,10 @@ export default {
!this.lazyloading
) {
this.$store
.dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
.dispatch(
'TimelineSpace/Contents/Notifications/lazyFetchNotifications',
this.handledNotifications[this.handledNotifications.length - 1]
)
.catch(() => {
this.$message({
message: this.$t('message.notification_fetch_error'),
@ -157,19 +160,19 @@ export default {
this.focusedId = null
},
focusNext() {
const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
const currentIndex = this.handledNotifications.findIndex(notification => this.focusedId === notification.id)
if (currentIndex === -1) {
this.focusedId = this.notifications[0].id
} else if (currentIndex < this.notifications.length) {
this.focusedId = this.notifications[currentIndex + 1].id
this.focusedId = this.handledNotifications[0].id
} else if (currentIndex < this.handledNotifications.length) {
this.focusedId = this.handledNotifications[currentIndex + 1].id
}
},
focusPrev() {
const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
const currentIndex = this.handledNotifications.findIndex(notification => this.focusedId === notification.id)
if (currentIndex === 0) {
this.focusedId = null
} else if (currentIndex > 0) {
this.focusedId = this.notifications[currentIndex - 1].id
this.focusedId = this.handledNotifications[currentIndex - 1].id
}
},
focusNotification(notification) {
@ -181,7 +184,7 @@ export default {
handleKey(event) {
switch (event.srcKey) {
case 'next':
this.focusedId = this.notifications[0].id
this.focusedId = this.handledNotifications[0].id
break
}
}

View File

@ -1,5 +1,5 @@
import generator, { Entity } from 'megalodon'
import { Module, MutationTree, ActionTree } from 'vuex'
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
import { RootState } from '@/store'
import { MyWindow } from '~/src/types/global'
@ -144,11 +144,30 @@ const actions: ActionTree<NotificationsState, RootState> = {
}
}
const getters: GetterTree<NotificationsState, RootState> = {
handledNotifications: state => {
return state.notifications.filter(n => {
switch (n.type) {
case 'favourite':
case 'follow':
case 'follow_request':
case 'mention':
case 'reblog':
case 'emoji_reaction':
return true
default:
return false
}
})
}
}
const Notifications: Module<NotificationsState, RootState> = {
namespaced: true,
state: state,
mutations: mutations,
actions: actions
actions: actions,
getters: getters
}
export default Notifications