Merge pull request #755 from h3poteto/iss-750

refs #750 Switch focus between Timeline and Toot Detail using shortcut keys

.circleci/config.yml

@@ -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

src/renderer/components/TimelineSpace/Contents/DirectMessages.vue

@@ -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':

src/renderer/components/TimelineSpace/Contents/Favourites.vue

@@ -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':

src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue

@@ -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':

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -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':

src/renderer/components/TimelineSpace/Contents/Lists/Show.vue

@@ -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':

src/renderer/components/TimelineSpace/Contents/Local.vue

@@ -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':

src/renderer/components/TimelineSpace/Contents/Notifications.vue

@@ -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':

src/renderer/components/TimelineSpace/Contents/Public.vue

@@ -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':

src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue

@@ -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({
+    ...mapState('TimelineSpace/Contents/SideBar/TootDetail', {
-      message: state => state.TimelineSpace.Contents.SideBar.TootDetail.message,
+      message: state => state.message,
-      ancestors: state => state.TimelineSpace.Contents.SideBar.TootDetail.ancestors,
+      ancestors: state => state.ancestors,
-      descendants: state => state.TimelineSpace.Contents.SideBar.TootDetail.descendants
+      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')
     }
   }
 }

src/renderer/components/event.js

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

src/renderer/components/molecules/Notification.vue

@@ -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>

src/renderer/components/molecules/Notification/Favourite.vue

@@ -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

src/renderer/components/molecules/Notification/Mention.vue

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

src/renderer/components/molecules/Notification/Reblog.vue

@@ -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

src/renderer/components/molecules/Toot.vue

@@ -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