fixes: Stop toot shortcut when modal is opened

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

@@ -4,6 +4,7 @@
              :message="message"
              :filter="filter"
              :focused="focused"
+             :overlaid="overlaid"
              @focusNext="$emit('focusNext')"
              @focusPrev="$emit('focusPrev')"
              @select="$emit('selectNotification')"
@@ -12,6 +13,7 @@
   <follow v-else-if="message.type === 'follow'"
           :message="message"
           :focused="focused"
+          :overlaid="overlaid"
           @focusNext="$emit('focusNext')"
           @focusPrev="$emit('focusPrev')"
           @select="$emit('selectNotification')"
@@ -21,6 +23,7 @@
             :message="message"
             :filter="filter"
             :focused="focused"
+            :overlaid="overlaid"
             @focusNext="$emit('focusNext')"
             @focusPrev="$emit('focusPrev')"
             @select="$emit('selectNotification')"
@@ -30,6 +33,7 @@
            :message="message"
            :filter="filter"
            :focused="focused"
+           :overlaid="overlaid"
            @focusNext="$emit('focusNext')"
            @focusPrev="$emit('focusPrev')"
            @select="$emit('selectNotification')"
@@ -58,6 +62,10 @@ export default {
     focused: {
       type: Boolean,
       defalt: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
     }
   },
   components: { Favourite, Follow, Mention, Reblog }

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

@@ -2,7 +2,7 @@
 <div
   class="status"
   tabIndex="0"
-  v-shortkey="focused ? {next: ['j'], prev: ['k']} : {}"
+  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k']} : {}"
   @shortkey="handleStatusControl"
   ref="status"
   @click="$emit('select')"
@@ -91,6 +91,10 @@ export default {
     focused: {
       type: Boolean,
       default: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -99,6 +103,11 @@ export default {
       showAttachments: false
     }
   },
+  computed: {
+    shortcutEnabled: function () {
+      return this.focused && !this.overlaid
+    }
+  },
   mounted () {
     if (this.focused) {
       this.$refs.status.focus()

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

@@ -2,7 +2,7 @@
 <div
   class="follow"
   tabIndex="0"
-  v-shortkey="focused ? {next: ['j'], prev: ['k']} : {}"
+  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k']} : {}"
   @shortkey="handleStatusControl"
   ref="status"
   @click="$emit('select')"
@@ -34,6 +34,15 @@ export default {
     focused: {
       type: Boolean,
       default: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    shortcutEnabled: function () {
+      return this.focused && !this.overlaid
     }
   },
   mounted () {

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

@@ -4,6 +4,7 @@
       :message="message.status"
       :filter="filter"
       :focused="focused"
+      :overlaid="overlaid"
       v-on:update="updateToot"
       @focusNext="$emit('focusNext')"
       @focusPrev="$emit('focusPrev')"
@@ -30,6 +31,10 @@ export default {
     focused: {
       type: Boolean,
       default: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
     }
   },
   components: { Toot },

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

@@ -2,7 +2,7 @@
 <div
   class="status"
   tabIndex="0"
-  v-shortkey="focused ? {next: ['j'], prev: ['k']} : {}"
+  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k']} : {}"
   @shortkey="handleStatusControl"
   ref="status"
   @click="$emit('select')"
@@ -91,6 +91,10 @@ export default {
     focused: {
       type: Boolean,
       default: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -99,6 +103,11 @@ export default {
       showAttachments: false
     }
   },
+  computed: {
+    shortcutEnabled: function () {
+      return this.focused && !this.overlaid
+    }
+  },
   mounted () {
     if (this.focused) {
       this.$refs.status.focus()

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

@@ -2,7 +2,7 @@
 <div
   class="status"
   tabIndex="0"
-  v-shortkey="focused ? {next: ['j'], prev: ['k'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p']} : {}"
+  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p']} : {}"
   @shortkey="handleTootControl"
   ref="status"
   @click="$emit('selectToot')"
@@ -142,12 +142,19 @@ export default {
     focused: {
       type: Boolean,
       default: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
     ...mapState({
       displayNameStyle: state => state.App.displayNameStyle
-    })
+    }),
+    shortcutEnabled: function () {
+      return this.focused && !this.overlaid
+    }
   },
   mounted () {
     if (this.focused) {
@@ -387,6 +394,7 @@ export default {
     handleTootControl (event) {
       switch (event.srcKey) {
         case 'next':
+          console.log(this.shortcutEnabled)
           this.$emit('focusNext')
           break
         case 'prev':

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

@@ -1,5 +1,5 @@
 <template>
-<div id="favourites" v-shortkey="{next: ['j']}" @shortkey="handleKey">
+<div id="favourites" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <div class="fav" v-for="message in favourites" v-bind:key="message.id">
@@ -7,6 +7,7 @@
       :message="message"
       :filter="filter"
       :focused="message.uri === focusedId"
+      :overlaid="modalOpened"
       v-on:update="updateToot"
       v-on:delete="deleteToot"
       @focusNext="focusNext"
@@ -25,7 +26,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Toot from './Cards/Toot'
 import scrollTop from '../../utils/scroll'
 
@@ -46,7 +47,13 @@ export default {
       favourites: state => state.TimelineSpace.Contents.Favourites.favourites,
       lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading,
       filter: state => state.TimelineSpace.Contents.Favourites.filter
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      return !this.focusedId && !this.modalOpened
+    }
   },
   created () {
     this.$store.commit('TimelineSpace/changeLoading', true)
@@ -171,9 +178,7 @@ export default {
     handleKey (event) {
       switch (event.srcKey) {
         case 'next':
-          if (!this.focusedId) {
+          this.focusedId = this.favourites[0].uri
-            this.focusedId = this.favourites[0].uri
-          }
           break
       }
     }

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

@@ -1,5 +1,5 @@
 <template>
-<div name="tag" v-shortkey="{next:['j']}" @shortkey="handleKey">
+<div name="tag" v-shortkey="shortcutEnabled ? {next:['j']} : {}" @shortkey="handleKey">
   <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
@@ -9,6 +9,7 @@
         :message="message"
         :filter="filter"
         :focused="message.uri === focusedId"
+        :overlaid="modalOpened"
         v-on:update="updateToot"
         v-on:delete="deleteToot"
         @focusNext="focusNext"
@@ -27,7 +28,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Toot from '../Cards/Toot'
 import scrollTop from '../../../utils/scroll'
 
@@ -49,7 +50,13 @@ export default {
       heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
       unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline,
       filter: state => state.TimelineSpace.Contents.Hashtag.Tag.filter
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      return !this.focusedId && !this.modalOpened
+    }
   },
   mounted () {
     this.$store.commit('TimelineSpace/changeLoading', true)
@@ -209,9 +216,7 @@ export default {
     handleKey (event) {
       switch (event.srcKey) {
         case 'next':
-          if (!this.focusedId) {
+          this.focusedId = this.timeline[0].uri
-            this.focusedId = this.timeline[0].uri
-          }
           break
       }
     }

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

@@ -1,5 +1,5 @@
 <template>
-<div id="home" v-shortkey="{next: ['j']}" @shortkey="handleKey">
+<div id="home" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
   <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
@@ -9,6 +9,7 @@
         :message="message"
         :filter="filter"
         :focused="message.uri === focusedId"
+        :overlaid="modalOpened"
         v-on:update="updateToot"
         v-on:delete="deleteToot"
         @focusNext="focusNext"
@@ -28,7 +29,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Toot from './Cards/Toot'
 import scrollTop from '../../utils/scroll'
 
@@ -49,7 +50,13 @@ export default {
       heading: state => state.TimelineSpace.Contents.Home.heading,
       unread: state => state.TimelineSpace.Contents.Home.unreadTimeline,
       filter: state => state.TimelineSpace.Contents.Home.filter
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      return !this.focusedId && !this.modalOpened
+    }
   },
   mounted () {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
@@ -176,9 +183,7 @@ export default {
     handleKey (event) {
       switch (event.srcKey) {
         case 'next':
-          if (!this.focusedId) {
+          this.focusedId = this.timeline[0].uri
-            this.focusedId = this.timeline[0].uri
-          }
           break
       }
     }

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

@@ -1,5 +1,5 @@
 <template>
-<div name="list">
+<div name="list" v-shortkey="shortcutEnabled ? {next:['j']} : {}" @shortkey="handleKey">
   <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
@@ -9,6 +9,7 @@
         :message="message"
         :filter="filter"
         :focused="message.uri === focusedId"
+        :overlaid="modalOpened"
         v-on:update="updateToot"
         v-on:delete="deleteToot"
         @focusNext="focusNext"
@@ -27,7 +28,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Toot from '../Cards/Toot'
 import scrollTop from '../../../utils/scroll'
 
@@ -49,7 +50,13 @@ export default {
       heading: state => state.TimelineSpace.Contents.Lists.Show.heading,
       unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline,
       filter: state => state.TimelineSpace.Contents.Lists.Show.filter
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      return !this.focusedId && !this.modalOpened
+    }
   },
   created () {
     this.$store.commit('TimelineSpace/changeLoading', true)
@@ -201,6 +208,13 @@ export default {
     },
     focusToot (message) {
       this.focusedId = message.uri
+    },
+    handleKey (event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.focusedId = this.timeline[0].uri
+          break
+      }
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-<div id="local" v-shortkey="{next: ['j']}" @shortkey="handleKey">
+<div id="local" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
   <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
@@ -9,6 +9,7 @@
         :message="message"
         :filter="filter"
         :focused="message.uri === focusedId"
+        :overlaid="modalOpened"
         v-on:update="updateToot"
         v-on:delete="deleteToot"
         @focusNext="focusNext"
@@ -28,7 +29,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Toot from './Cards/Toot'
 import scrollTop from '../../utils/scroll'
 
@@ -49,7 +50,13 @@ export default {
       heading: state => state.TimelineSpace.Contents.Local.heading,
       unread: state => state.TimelineSpace.Contents.Local.unreadTimeline,
       filter: state => state.TimelineSpace.Contents.Local.filter
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      return !this.focusedId && !this.modalOpened
+    }
   },
   mounted () {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
@@ -79,6 +86,7 @@ export default {
       }
     },
     focusedId: function (newState, oldState) {
+      console.log(newState)
       if (newState && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
       } else if (newState === null && !this.heading) {
@@ -155,6 +163,7 @@ export default {
     },
     focusNext () {
       const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
+      console.log(currentIndex)
       if (currentIndex === -1) {
         this.focusedId = this.timeline[0].uri
       } else if (currentIndex < this.timeline.length) {
@@ -171,13 +180,12 @@ export default {
     },
     focusToot (message) {
       this.focusedId = message.uri
+      console.log(this.focusedId)
     },
     handleKey (event) {
       switch (event.srcKey) {
         case 'next':
-          if (!this.focusedId) {
+          this.focusedId = this.timeline[0].uri
-            this.focusedId = this.timeline[0].uri
-          }
           break
       }
     }

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

@@ -1,5 +1,5 @@
 <template>
-<div id="notifications" v-shortkey="{next: ['j']}" @shortkey="handleKey">
+<div id="notifications" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
   <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
@@ -9,6 +9,7 @@
         :message="message"
         :filter="filter"
         :focused="index === focusedIndex"
+        :overlaid="modalOpened"
         @focusNext="focusNext"
         @focusPrev="focusPrev"
         @selectNotification="focusNotification(index)"
@@ -26,7 +27,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Notification from './Cards/Notification'
 import scrollTop from '../../utils/scroll'
 
@@ -47,7 +48,13 @@ export default {
       heading: state => state.TimelineSpace.Contents.Notifications.heading,
       unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications,
       filter: state => state.TimelineSpace.Contents.Notifications.filter
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      return !this.focusedIndex && !this.modalOpened
+    }
   },
   mounted () {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
@@ -161,9 +168,7 @@ export default {
     handleKey (event) {
       switch (event.srcKey) {
         case 'next':
-          if (!this.focusedIndex) {
+          this.focusedIndex = 0
-            this.focusedIndex = 0
-          }
           break
       }
     }

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

@@ -1,5 +1,5 @@
 <template>
-<div id="public" v-shortkey="{next: ['j']}" @shortkey="handleKey">
+<div id="public" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
   <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
@@ -9,6 +9,7 @@
         :message="message"
         :filter="filter"
         :focused="message.uri === focusedId"
+        :overlaid="modalOpened"
         v-on:update="updateToot"
         v-on:delete="deleteToot"
         @focusNext="focusNext"
@@ -28,7 +29,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Toot from './Cards/Toot'
 import scrollTop from '../../utils/scroll'
 
@@ -49,7 +50,13 @@ export default {
       heading: state => state.TimelineSpace.Contents.Public.heading,
       unread: state => state.TimelineSpace.Contents.Public.unreadTimeline,
       filter: state => state.TimelineSpace.Contents.Public.filter
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      return !this.focusedId && !this.modalOpened
+    }
   },
   created () {
     this.$store.commit('TimelineSpace/changeLoading', true)
@@ -198,9 +205,7 @@ export default {
     handleKey (event) {
       switch (event.srcKey) {
         case 'next':
-          if (!this.focusedId) {
+          this.focusedId = this.timeline[0].uri
-            this.focusedId = this.timeline[0].uri
-          }
           break
       }
     }

src/renderer/store/TimelineSpace/Modals.js

@@ -14,6 +14,17 @@ const Modals = {
     ListMembership,
     AddListMember,
     Shortcut
+  },
+  getters: {
+    modalOpened: (state, getters, rootState) => {
+      const imageViewer = rootState.TimelineSpace.Modals.ImageViewer.modalOpen
+      const newToot = rootState.TimelineSpace.Modals.NewToot.modalOpen
+      const jump = rootState.TimelineSpace.Modals.Jump.modalOpen
+      const listMembership = rootState.TimelineSpace.Modals.ListMembership.modalOpen
+      const addListMember = rootState.TimelineSpace.Modals.AddListMember.modalOpen
+      const shortcut = rootState.TimelineSpace.Modals.Jump.modalOpen
+      return imageViewer || newToot || jump || listMembership || addListMember || shortcut
+    }
   }
 }