Merge pull request #566 from h3poteto/fix/shortcut

Fix shortcut events
h3poteto · Aug 23, 2018 · 24e3983 · 24e3983
2 parents 15b3254 + c4355df
commit 24e3983
Show file tree

Hide file tree

Showing 20 changed files with 195 additions and 51 deletions.
diff --git a/src/renderer/components/Login.vue b/src/renderer/components/Login.vue
@@ -9,6 +9,7 @@
     </el-row>
   </el-header>
   <el-container>
+    <div v-shortkey="['esc']" @shortkey="close"></div>
     <login-form></login-form>
   </el-container>
 </el-container>

diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
@@ -5,7 +5,7 @@
   :element-loading-text="$t('message.loading')"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.8)"
-  v-shortkey="{help: ['h']}"
+  v-shortkey="shortcutEnabled ? {help: ['h']} : {}"
   @shortkey="handleKey"
   >
   <side-menu></side-menu>
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import SideMenu from './TimelineSpace/SideMenu'
 import HeaderMenu from './TimelineSpace/HeaderMenu'
 import Contents from './TimelineSpace/Contents'
@@ -42,7 +42,13 @@ export default {
     ...mapState({
       loading: state => state.TimelineSpace.loading,
       collapse: state => state.TimelineSpace.SideMenu.collapse
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ]),
+    shortcutEnabled: function () {
+      return !this.modalOpened
+    }
   },
   created () {
     this.$store.commit('TimelineSpace/changeLoading', true)

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Notification.vue b/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 }

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue b/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()

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue b/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 () {

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Mention.vue b/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 },

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue b/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()

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue b/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':

diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -1,12 +1,13 @@
 <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">
     <toot
       :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
       }
     }

diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
@@ -9,7 +9,7 @@
           </el-button>
         </div>
         <div class="form-item input">
-          <input v-model="tag" :placeholder="$t('hashtag.tag_name')" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
+          <input v-model="tag" :placeholder="$t('hashtag.tag_name')" class="search-keyword" v-shortkey.avoid v-on:keyup.enter="search" autofocus></input>
         </div>
         <div class="form-item" v-show="tagPage()">
           <el-button type="text" @click="save">

diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/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
       }
     }

diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/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
       }
     }