refs #543 Set shortcut key to move toot in home

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -1,5 +1,12 @@
 <template>
-<div class="status" tabIndex="0">
+<div
+  class="status"
+  tabIndex="0"
+  v-shortkey="{next: ['ctrl', 'n'], prev: ['ctrl', 'p']}"
+  @shortkey="handleTootControl"
+  ref="status"
+  @click="$emit('selectToot')"
+  >
   <div v-show="filtered(message)" class="filtered">
     Filtered
   </div>
@@ -131,6 +138,10 @@ export default {
     filter: {
       type: String,
       default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -138,6 +149,24 @@ export default {
       displayNameStyle: state => state.App.displayNameStyle
     })
   },
+  mounted () {
+    if (this.focused) {
+      this.$refs.status.focus()
+    }
+  },
+  watch: {
+    focused: function (newState, oldState) {
+      if (newState) {
+        this.$nextTick(function () {
+          this.$refs.status.focus()
+        })
+      } else if (oldState && !newState) {
+        this.$nextTick(function () {
+          this.$refs.status.blur()
+        })
+      }
+    }
+  },
   methods: {
     originalMessage (message) {
       if (message.reblog !== null) {
@@ -354,6 +383,16 @@ export default {
     spoilerText (message) {
       const original = this.originalMessage(message)
       return emojify(original.spoiler_text, original.emojis)
+    },
+    handleTootControl (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+      }
     }
   }
 }

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

@@ -4,8 +4,18 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="home-timeline" v-for="message in timeline" :key="message.id">
-      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    <div class="home-timeline" v-for="(message, index) in timeline" :key="message.id">
+      <toot
+        :message="message"
+        :filter="filter"
+        :focused="index === focusedIndex"
+        v-on:update="updateToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectToot="focusToot(index)"
+        >
+      </toot>
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@@ -25,6 +35,11 @@ import scrollTop from '../../utils/scroll'
 export default {
   name: 'home',
   components: { Toot },
+  data () {
+    return {
+      focusedIndex: null
+    }
+  },
   computed: {
     ...mapState({
       backgroundColor: state => state.App.theme.background_color,
@@ -62,6 +77,14 @@ export default {
             this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
           })
       }
+    },
+    focusedIndex: function (newState, oldState) {
+      if (newState > 0 && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
+      }
     }
   },
   methods: {
@@ -82,6 +105,7 @@ export default {
       } else if ((event.target.scrollTop <= 10) && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
         this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
+        this.focusedIndex = null
       }
     },
     updateToot (message) {
@@ -129,6 +153,24 @@ export default {
         document.getElementById('scrollable'),
         0
       )
+      this.focusedIndex = null
+    },
+    focusNext () {
+      if (this.focusedIndex === null) {
+        this.focusedIndex = 0
+      } else if (this.focusedIndex < this.timeline.length) {
+        this.focusedIndex++
+      }
+    },
+    focusPrev () {
+      if (this.focusedIndex === 0) {
+        this.focusedIndex = null
+      } else if (this.focusedIndex > 0) {
+        this.focusedIndex--
+      }
+    },
+    focusToot (index) {
+      this.focusedIndex = index
     }
   }
 }

src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue

@@ -80,7 +80,6 @@ export default {
     opened: function (newState, oldState) {
       if (!oldState && newState) {
         this.$nextTick(function () {
-          console.log('focus')
           this.$refs.status.focus()
         })
       } else if (oldState && !newState) {