Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refs #601 Fix losting focused notification in notifications

Browse Source
This commit is contained in:
AkiraFukushima 2018-09-13 23:21:54 +09:00
parent 2d2aa38416
commit 2e822d9c1f
1 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/renderer/components/TimelineSpace/Contents/Notifications.vue
View File

@ -4,15 +4,15 @@
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()"> <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div> </div>
<transition-group name="timeline" tag="div"> <transition-group name="timeline" tag="div">
<div class="notifications" v-for="(message, index) in notifications" v-bind:key="message.id"> <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
<notification <notification
:message="message" :message="message"
:filter="filter" :filter="filter"
:focused="index === focusedIndex" :focused="message.id === focusedId"
:overlaid="modalOpened" :overlaid="modalOpened"
@focusNext="focusNext" @focusNext="focusNext"
@focusPrev="focusPrev" @focusPrev="focusPrev"
@selectNotification="focusNotification(index)" @selectNotification="focusNotification(message)"
> >
</notification> </notification>
</div> </div>
@ -36,7 +36,7 @@ export default {
components: { Notification }, components: { Notification },
data () { data () {
return { return {
focusedIndex: null focusedId: null
} }
}, },
computed: { computed: {
@ -53,7 +53,15 @@ export default {
'modalOpened' 'modalOpened'
]), ]),
shortcutEnabled: function () { shortcutEnabled: function () {
return !this.focusedIndex && !this.modalOpened if (this.modalOpened) {
return false
}
if (!this.focusedId) {
return true
}
// Sometimes notifications are deleted, so perhaps focused notification don't exist.
const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
return currentIndex === -1
} }
}, },
mounted () { mounted () {
@ -84,7 +92,7 @@ export default {
}) })
} }
}, },
focusedIndex: function (newState, oldState) { focusedId: function (newState, oldState) {
if (newState >= 0 && this.heading) { if (newState >= 0 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false) this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
} else if (newState === null && !this.heading) { } else if (newState === null && !this.heading) {
@ -146,29 +154,31 @@ export default {
document.getElementById('scrollable'), document.getElementById('scrollable'),
0 0
) )
this.focusedIndex = null this.focusedId = null
}, },
focusNext () { focusNext () {
if (this.focusedIndex === null) { const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
this.focusedIndex = 0 if (currentIndex === -1) {
} else if (this.focusedIndex < this.notifications.length) { this.focusedId = this.notifications[0].id
this.focusedIndex++ } else if (currentIndex < this.notifications.length) {
this.focusedId = this.notifications[currentIndex + 1].id
} }
}, },
focusPrev () { focusPrev () {
if (this.focusedIndex === 0) { const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
this.focusedIndex = null if (currentIndex === 0) {
} else if (this.focusedIndex > 0) { this.focusedId = null
this.focusedIndex-- } else if (currentIndex > 0) {
this.focusedId = this.notifications[currentIndex - 1].id
} }
}, },
focusNotification (index) { focusNotification (notification) {
this.focusedIndex = index this.focusedId = notification.id
}, },
handleKey (event) { handleKey (event) {
switch (event.srcKey) { switch (event.srcKey) {
case 'next': case 'next':
this.focusedIndex = 0 this.focusedId = this.notifications[0].id
break break
} }
} }