refs #543 Set shortcut key to move toot in notification

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

@@ -1,9 +1,40 @@
 <template>
-<div id="notification">
-  <favourite v-if="message.type === 'favourite'" :message="message" :filter="filter"></favourite>
-  <follow v-else-if="message.type === 'follow'" :message="message"></follow>
-  <mention v-else-if="message.type === 'mention'" :message="message" :filter="filter"></mention>
-  <reblog v-else-if="message.type == 'reblog'" :message="message" :filter="filter"></reblog>
+<div class="notification">
+  <favourite v-if="message.type === 'favourite'"
+             :message="message"
+             :filter="filter"
+             :focused="focused"
+             @focusNext="$emit('focusNext')"
+             @focusPrev="$emit('focusPrev')"
+             @select="$emit('selectNotification')"
+             >
+  </favourite>
+  <follow v-else-if="message.type === 'follow'"
+          :message="message"
+          :focused="focused"
+          @focusNext="$emit('focusNext')"
+          @focusPrev="$emit('focusPrev')"
+          @select="$emit('selectNotification')"
+          >
+  </follow>
+   <mention v-else-if="message.type === 'mention'"
+            :message="message"
+            :filter="filter"
+            :focused="focused"
+            @focusNext="$emit('focusNext')"
+            @focusPrev="$emit('focusPrev')"
+            @select="$emit('selectNotification')"
+            >
+   </mention>
+   <reblog v-else-if="message.type == 'reblog'"
+           :message="message"
+           :filter="filter"
+           :focused="focused"
+           @focusNext="$emit('focusNext')"
+           @focusPrev="$emit('focusPrev')"
+           @select="$emit('selectNotification')"
+           >
+   </reblog>
 </div>
 </template>
 
@@ -23,6 +54,10 @@ export default {
     filter: {
       type: String,
       default: ''
+    },
+    focused: {
+      type: Boolean,
+      defalt: false
     }
   },
   components: { Favourite, Follow, Mention, Reblog }

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue

@@ -1,5 +1,12 @@
 <template>
-<div class="status" tabIndex="0">
+<div
+  class="status"
+  tabIndex="0"
+  v-shortkey="{next: ['j'], prev: ['k']}"
+  @shortkey="handleStatusControl"
+  ref="status"
+  @click="$emit('select')"
+  >
   <div v-show="filtered(message)" class="filtered">
     Filtered
   </div>
@@ -80,6 +87,10 @@ export default {
     filter: {
       type: String,
       default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -88,6 +99,24 @@ export default {
       showAttachments: false
     }
   },
+  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: {
     username (account) {
       if (account.display_name !== '') {
@@ -155,6 +184,16 @@ export default {
     },
     spoilerText (message) {
       return emojify(message.spoiler_text, message.emojis)
+    },
+    handleStatusControl (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+      }
     }
   }
 }

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue

@@ -1,25 +1,59 @@
 <template>
-  <div class="follow" tabIndex="0">
-    <div class="action">
-      <div class="action-mark">
-        <icon name="user-plus" scale="0.7"></icon>
-      </div>
-      <div class="action-detail">
-        <span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> is now following you
-      </div>
-      <div class="action-icon">
-        <img :src="message.account.avatar" />
-      </div>
+<div
+  class="follow"
+  tabIndex="0"
+  v-shortkey="{next: ['j'], prev: ['k']}"
+  @shortkey="handleStatusControl"
+  ref="status"
+  @click="$emit('select')"
+  >
+  <div class="action">
+    <div class="action-mark">
+      <icon name="user-plus" scale="0.7"></icon>
+    </div>
+    <div class="action-detail">
+      <span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> is now following you
+    </div>
+    <div class="action-icon">
+      <img :src="message.account.avatar" />
     </div>
-    <div class="clearfix"></div>
-    <div class="fill-line"></div>
   </div>
+  <div class="clearfix"></div>
+  <div class="fill-line"></div>
+</div>
 </template>
 
 <script>
 export default {
   name: 'follow',
-  props: ['message'],
+  props: {
+    message: {
+      type: Object,
+      default: {}
+    },
+    focused: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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: {
     username (account) {
       if (account.display_name !== '') {
@@ -32,6 +66,16 @@ export default {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
       this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
       this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+    },
+    handleStatusControl (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+      }
     }
   }
 }

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Mention.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="mention">
-    <toot :message="message.status" :filter="filter" v-on:update="updateToot"></toot>
+    <toot
+      :message="message.status"
+      :filter="filter"
+      :focused="focused"
+      v-on:update="updateToot"
+      @focusNext="$emit('focusNext')"
+      @focusPrev="$emit('focusPrev')"
+      @selectToot="$emit('select')"
+      >
+    </toot>
   </div>
 </template>
 
@@ -17,6 +26,10 @@ export default {
     filter: {
       type: String,
       default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
     }
   },
   components: { Toot },

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue

@@ -1,5 +1,12 @@
 <template>
-<div class="status" tabIndex="0">
+<div
+  class="status"
+  tabIndex="0"
+  v-shortkey="{next: ['j'], prev: ['k']}"
+  @shortkey="handleStatusControl"
+  ref="status"
+  @click="$emit('select')"
+  >
   <div v-show="filtered(message)" class="filtered">
     Filtered
   </div>
@@ -80,6 +87,10 @@ export default {
     filter: {
       type: String,
       default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -88,6 +99,24 @@ export default {
       showAttachments: false
     }
   },
+  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: {
     username (account) {
       if (account.display_name !== '') {
@@ -155,6 +184,16 @@ export default {
     },
     spoilerText (message) {
       return emojify(message.spoiler_text, message.emojis)
+    },
+    handleStatusControl (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+      }
     }
   }
 }

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

@@ -2,7 +2,7 @@
 <div
   class="status"
   tabIndex="0"
-  v-shortkey="{next: ['ctrl', 'n'], prev: ['ctrl', 'p']}"
+  v-shortkey="{next: ['j'], prev: ['k']}"
   @shortkey="handleTootControl"
   ref="status"
   @click="$emit('selectToot')"

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

@@ -4,8 +4,16 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
-      <notification :message="message" :filter="filter"></notification>
+    <div class="notifications" v-for="(message, index) in notifications" v-bind:key="message.id">
+      <notification
+        :message="message"
+        :filter="filter"
+        :focused="index === focusedIndex"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectNotification="focusNotification(index)"
+        >
+      </notification>
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@@ -25,6 +33,11 @@ import scrollTop from '../../utils/scroll'
 export default {
   name: 'notifications',
   components: { Notification },
+  data () {
+    return {
+      focusedIndex: null
+    }
+  },
   computed: {
     ...mapState({
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
@@ -63,6 +76,14 @@ export default {
             this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
           })
       }
+    },
+    focusedIndex: function (newState, oldState) {
+      if (newState >= 0 && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
+      }
     }
   },
   methods: {
@@ -118,6 +139,24 @@ export default {
         document.getElementById('scrollable'),
         0
       )
+      this.focusedIndex = null
+    },
+    focusNext () {
+      if (this.focusedIndex === null) {
+        this.focusedIndex = 0
+      } else if (this.focusedIndex < this.notifications.length) {
+        this.focusedIndex++
+      }
+    },
+    focusPrev () {
+      if (this.focusedIndex === 0) {
+        this.focusedIndex = null
+      } else if (this.focusedIndex > 0) {
+        this.focusedIndex--
+      }
+    },
+    focusNotification (index) {
+      this.focusedIndex = index
     }
   }
 }