Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #755 from h3poteto/iss-750 

refs #750 Switch focus between Timeline and Toot Detail using shortcut keys
This commit is contained in:
AkiraFukushima 2018-11-28 23:22:59 +09:00 committed by GitHub
parent 1568ba7a4d 8a5b4acaf6
commit 0a039f18c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 235 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.circleci/config.yml
View File

@ -2,7 +2,7 @@ version: 2
jobs:
build:
docker:
- image: node:10-slim
- image: node:10.13.0-slim
working_directory: /var/opt/app
steps:
- checkout

15
src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
View File

@ -13,6 +13,7 @@
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
v-for="message in timeline"
:key="message.uri + message.id"
@ -33,6 +34,7 @@ import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/molecules/Toot'
import scrollTop from '../../utils/scroll'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'directmessages',
@ -83,6 +85,15 @@ export default {
})
}
this.$store.commit('TimelineSpace/changeLoading', false)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = previousFocusedId
})
})
},
beforeUpdate () {
if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
@ -94,6 +105,7 @@ export default {
this.$store.dispatch('TimelineSpace/stopDirectMessagesStreaming')
this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
}
Event.$off('focus-timeline')
},
destroyed () {
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
@ -196,6 +208,9 @@ export default {
focusToot (message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
Event.$emit('focus-sidebar')
},
handleKey (event) {
switch (event.srcKey) {
case 'next':

16
src/renderer/components/TimelineSpace/Contents/Favourites.vue
View File

@ -12,6 +12,7 @@
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
@ -30,6 +31,7 @@ import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/molecules/Toot'
import scrollTop from '../../utils/scroll'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'favourites',
@ -73,6 +75,17 @@ export default {
},
mounted () {
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = previousFocusedId
})
})
},
beforeDestroy () {
Event.$off('focus-timeline')
},
destroyed () {
this.$store.commit('TimelineSpace/Contents/Favourites/updateFavourites', [])
@ -163,6 +176,9 @@ export default {
focusToot (message) {
this.focusedId = message.id
},
focusSidebar () {
Event.$emit('focus-sidebar')
},
handleKey (event) {
switch (event.srcKey) {
case 'next':

15
src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
View File

@ -14,6 +14,7 @@
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
@ -32,6 +33,7 @@ import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/molecules/Toot'
import scrollTop from '../../../utils/scroll'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'tag',
@ -76,6 +78,15 @@ export default {
this.$store.commit('TimelineSpace/changeLoading', false)
})
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = previousFocusedId
})
})
},
watch: {
tag: function (newTag, oldTag) {
@ -106,6 +117,7 @@ export default {
beforeDestroy () {
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
this.reset()
Event.$off('focus-timeline')
},
methods: {
async load (tag) {
@ -206,6 +218,9 @@ export default {
focusToot (message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
Event.$emit('focus-sidebar')
},
handleKey (event) {
switch (event.srcKey) {
case 'next':

16
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -14,6 +14,7 @@
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
@ -33,6 +34,7 @@ import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/molecules/Toot'
import scrollTop from '../../utils/scroll'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'home',
@ -85,12 +87,23 @@ export default {
mounted () {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = previousFocusedId
})
})
},
beforeUpdate () {
if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
}
},
beforeDestroy () {
Event.$off('focus-timeline')
},
destroyed () {
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
@ -178,6 +191,9 @@ export default {
focusToot (message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
Event.$emit('focus-sidebar')
},
handleKey (event) {
switch (event.srcKey) {
case 'next':

15
src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
View File

@ -14,6 +14,7 @@
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
@ -32,6 +33,7 @@ import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/molecules/Toot'
import scrollTop from '../../../utils/scroll'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'list',
@ -77,6 +79,16 @@ export default {
})
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
},
mounted () {
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = previousFocusedId
})
})
},
watch: {
list_id: function () {
this.$store.commit('TimelineSpace/changeLoading', true)
@ -205,6 +217,9 @@ export default {
focusToot (message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
Event.$emit('focus-sidebar')
},
handleKey (event) {
switch (event.srcKey) {
case 'next':

15
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -14,6 +14,7 @@
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
@ -33,6 +34,7 @@ import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/molecules/Toot'
import scrollTop from '../../utils/scroll'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'local',
@ -83,6 +85,15 @@ export default {
})
}
this.$store.commit('TimelineSpace/changeLoading', false)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = previousFocusedId
})
})
},
beforeUpdate () {
if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
@ -94,6 +105,7 @@ export default {
this.$store.dispatch('TimelineSpace/stopLocalStreaming')
this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
}
Event.$off('focus-timeline')
},
destroyed () {
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
@ -195,6 +207,9 @@ export default {
focusToot (message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
Event.$emit('focus-sidebar')
},
handleKey (event) {
switch (event.srcKey) {
case 'next':

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

@ -12,6 +12,7 @@
:overlaid="modalOpened"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectNotification="focusNotification(message)"
>
</notification>
@ -31,6 +32,7 @@ import { mapState, mapGetters } from 'vuex'
import Notification from '~/src/renderer/components/molecules/Notification'
import scrollTop from '../../utils/scroll'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'notifications',
@ -71,12 +73,24 @@ export default {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = previousFocusedId
})
})
},
beforeUpdate () {
if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
}
},
beforeDestroy () {
Event.$off('focus-timeline')
},
destroyed () {
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
@ -160,6 +174,9 @@ export default {
focusNotification (notification) {
this.focusedId = notification.id
},
focusSidebar () {
Event.$emit('focus-sidebar')
},
handleKey (event) {
switch (event.srcKey) {
case 'next':

15
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -14,6 +14,7 @@
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
@ -33,6 +34,7 @@ import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/molecules/Toot'
import scrollTop from '../../utils/scroll'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'public',
@ -83,6 +85,15 @@ export default {
})
}
this.$store.commit('TimelineSpace/changeLoading', false)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = previousFocusedId
})
})
},
beforeUpdate () {
if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
@ -94,6 +105,7 @@ export default {
this.$store.dispatch('TimelineSpace/stopPublicStreaming')
this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
}
Event.$off('focus-timeline')
},
destroyed () {
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
@ -195,6 +207,9 @@ export default {
focusToot (message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
Event.$emit('focus-sidebar')
},
handleKey (event) {
switch (event.srcKey) {
case 'next':

91
src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue
View File

@ -1,39 +1,91 @@
<template>
<div class="toot-detail" ref="detail">
<div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="'ancestors-' + index">
<toot :message="message" v-on:update="updateAncestorsToot" v-on:delete="deleteAncestorsToot"></toot>
<toot
:message="message"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateAncestorsToot"
v-on:delete="deleteAncestorsToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusLeft="focusTimeline"
@selectToot="focusToot(message)"
>
</toot>
</div>
<div class="original-toot" ref="original">
<toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
<toot
:message="message"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusLeft="focusTimeline"
@selectToot="focusToot(message)"
>
</toot>
</div>
<div class="toot-descendants" v-for="(message, index) in descendants" v-bind:key="'descendants' + index">
<toot :message="message" v-on:update="updateDescendantsToot" v-on:delete="deleteDescendantsToot"></toot>
<toot
:message="message"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateDescendantsToot"
v-on:delete="deleteDescendantsToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusLeft="focusTimeline"
@selectToot="focusToot(message)"
>
</toot>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/molecules/Toot'
import { Event } from '~/src/renderer/components/event'
export default {
name: 'toot-detail',
components: { Toot },
data () {
return {
focusedId: null
}
},
computed: {
...mapState({
message: state => state.TimelineSpace.Contents.SideBar.TootDetail.message,
ancestors: state => state.TimelineSpace.Contents.SideBar.TootDetail.ancestors,
descendants: state => state.TimelineSpace.Contents.SideBar.TootDetail.descendants
})
...mapState('TimelineSpace/Contents/SideBar/TootDetail', {
message: state => state.message,
ancestors: state => state.ancestors,
descendants: state => state.descendants,
timeline: state => state.ancestors.concat([state.message]).concat(state.descendants)
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
])
},
created () {
this.load()
Event.$on('focus-sidebar', () => {
this.focusedId = 0
this.$nextTick(function () {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
})
})
},
watch: {
message: function () {
this.load()
}
},
beforeDestroy () {
Event.$off('focus-sidebar')
},
methods: {
load () {
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/fetchToot', this.message)
@ -65,6 +117,27 @@ export default {
},
deleteDescendantsToot (message) {
this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/deleteDescendantsToot', message)
},
focusNext () {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
} else if (currentIndex < this.timeline.length - 1) {
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
}
},
focusPrev () {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex > 0) {
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
}
},
focusToot (message) {
this.focusedId = message.uri + message.id
},
focusTimeline () {
this.focusedId = 0
Event.$emit('focus-timeline')
}
}
}

3
src/renderer/components/event.js Normal file
View File

@ -0,0 +1,3 @@
import Vue from 'vue'
export const Event = new Vue()

3
src/renderer/components/molecules/Notification.vue
View File

@ -7,6 +7,7 @@
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
</favourite>
@ -26,6 +27,7 @@
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
</mention>
@ -36,6 +38,7 @@
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
</reblog>

8
src/renderer/components/molecules/Notification/Favourite.vue
View File

@ -2,7 +2,7 @@
<div
class="status"
tabIndex="0"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], open: ['o'], profile: ['p']} : {}"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], left: ['h'], open: ['o'], profile: ['p']} : {}"
@shortkey="handleStatusControl"
ref="status"
@click="$emit('select')"
@ -230,6 +230,12 @@ export default {
case 'prev':
this.$emit('focusPrev')
break
case 'right':
this.$emit('focusRight')
break
case 'left':
this.$emit('focusLeft')
break
case 'open':
this.openDetail(this.message.status)
break

1
src/renderer/components/molecules/Notification/Mention.vue
View File

@ -8,6 +8,7 @@
v-on:update="updateToot"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@selectToot="$emit('select')"
>
</toot>

8
src/renderer/components/molecules/Notification/Reblog.vue
View File

@ -2,7 +2,7 @@
<div
class="status"
tabIndex="0"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], open: ['o'], profile: ['p']} : {}"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], left: ['h'], open: ['o'], profile: ['p']} : {}"
@shortkey="handleStatusControl"
ref="status"
@click="$emit('select')"
@ -228,6 +228,12 @@ export default {
case 'prev':
this.$emit('focusPrev')
break
case 'right':
this.$emit('focusRight')
break
case 'left':
this.$emit('focusLeft')
break
case 'open':
this.openDetail(this.message.status)
break

8
src/renderer/components/molecules/Toot.vue
View File

@ -2,7 +2,7 @@
<div
class="status"
tabIndex="0"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p'], image: ['i'], cw: ['x']} : {}"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], left: ['h'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p'], image: ['i'], cw: ['x']} : {}"
@shortkey="handleTootControl"
ref="status"
@click="$emit('selectToot')"
@ -452,6 +452,12 @@ export default {
case 'prev':
this.$emit('focusPrev')
break
case 'right':
this.$emit('focusRight')
break
case 'left':
this.$emit('focusLeft')
break
case 'reply':
this.openReply(this.message)
break