Merge pull request #756 from h3poteto/iss-750

closes #750 Switch focus between Timelines and Account Profile using shortcut keys

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue

@@ -1,10 +1,35 @@
 <template>
 <div id="account_timeline">
   <template v-for="message in pinnedToots">
-    <toot :message="message" :key="message.id" v-on:update="updateToot" v-on:delete="deleteToot" :pinned="true"></toot>
+    <toot
+      :message="message"
+      :key="message.id"
+      :focused="message.uri + message.id === focusedId"
+      :pinned="true"
+      :overlaid="modalOpened"
+      v-on:update="updateToot"
+      v-on:delete="deleteToot"
+      @focusNext="focusNext"
+      @focusPrev="focusPrev"
+      @focusLeft="focusTimeline"
+      @selectToot="focusToot(message)"
+      >
+    </toot>
   </template>
   <template v-for="message in timeline">
-    <toot :message="message" :key="message.id" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    <toot
+      :message="message"
+      :key="message.id"
+      :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>
   </template>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
   </div>
@@ -12,20 +37,31 @@
 </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: 'timeline',
   props: [ 'account' ],
   components: { Toot },
+  data () {
+    return {
+      focusedId: null
+    }
+  },
   computed: {
-    ...mapState({
-      timeline: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.timeline,
-      pinnedToots: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.pinnedToots,
-      lazyLoading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.lazyLoading,
-      backgroundColor: state => state.App.theme.background_color
-    })
+    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', {
+      timeline: state => state.timeline,
+      pinnedToots: state => state.pinnedToots,
+      lazyLoading: state => state.lazyLoading
+    }),
+    ...mapState('App', {
+      backgroundColor: state => state.theme.background_color
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ])
   },
   created () {
     this.load()
@@ -33,6 +69,16 @@ export default {
   mounted () {
     this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/clearTimeline')
     document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
+    Event.$on('focus-sidebar', () => {
+      this.focusedId = 0
+      this.$nextTick(function () {
+        this.focusedId = this.timeline[0].uri + this.timeline[0].id
+      })
+    })
+  },
+  beforeDestroy () {
+    Event.$emit('focus-timeline')
+    Event.$off('focus-sidebar')
   },
   destroyed () {
     if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
@@ -77,6 +123,27 @@ export default {
     },
     deleteToot (message) {
       this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/deleteToot', 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/TimelineSpace/Contents/SideBar/TootDetail.vue

@@ -71,6 +71,8 @@ export default {
   },
   created () {
     this.load()
+  },
+  mounted () {
     Event.$on('focus-sidebar', () => {
       this.focusedId = 0
       this.$nextTick(function () {
@@ -84,6 +86,7 @@ export default {
     }
   },
   beforeDestroy () {
+    Event.$emit('focus-timeline')
     Event.$off('focus-sidebar')
   },
   methods: {

src/renderer/components/molecules/Notification.vue

@@ -17,6 +17,7 @@
           :overlaid="overlaid"
           @focusNext="$emit('focusNext')"
           @focusPrev="$emit('focusPrev')"
+          @focusRight="$emit('focusRight')"
           @select="$emit('selectNotification')"
           >
   </follow>

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

@@ -2,7 +2,7 @@
 <div
   class="follow"
   tabIndex="0"
-  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], profile: ['p']} : {}"
+  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], profile: ['p']} : {}"
   @shortkey="handleStatusControl"
   ref="status"
   @click="$emit('select')"
@@ -91,6 +91,9 @@ export default {
         case 'prev':
           this.$emit('focusPrev')
           break
+        case 'right':
+          this.$emit('focusRight')
+          break
         case 'profile':
           this.openUser(this.message.account)
           break