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

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