Merge pull request #562 from h3poteto/iss-561

closes #561 Add shortcut help modal

src/config/locales/en/translation.json

@@ -148,6 +148,21 @@
     },
     "list_membership": {
       "title": "List Memberships"
+    },
+    "shortcut": {
+      "title": "Keyboard shortcuts",
+      "ctrl_number": "Switch accounts",
+      "ctrl_k": "Jump to other timelines",
+      "ctrl_n": "Open the new toot modal",
+      "ctrl_enter": "Post the toot",
+      "j": "Select the next toot",
+      "k": "Select the previous toot",
+      "r": "Reply to the toot",
+      "b": "Reblog the toot",
+      "f": "Favourite the toot",
+      "o": "Open details of the toot",
+      "p": "Open account profile of the toot",
+      "esc": "Close current page"
     }
   },
   "cards": {

src/config/locales/ja/translation.json

@@ -148,6 +148,21 @@
     },
     "list_membership": {
       "title": "リストメンバー管理"
+    },
+    "shortcut": {
+      "title": "キーボードショートカット",
+      "ctrl_number": "アカウントの切り替え",
+      "ctrl_k": "タイムラインの移動",
+      "ctrl_n": "トゥートモーダルの表示",
+      "ctrl_enter": "トゥート送信",
+      "j": "次のトゥートを選択",
+      "k": "前のトゥートを選択",
+      "r": "リプライ",
+      "b": "ブースト",
+      "f": "お気に入り",
+      "o": "トゥート詳細を開く",
+      "p": "発言主のプロフィールを開く",
+      "esc": "ページを閉じる"
     }
   },
   "cards": {

src/renderer/components/TimelineSpace.vue

@@ -5,6 +5,8 @@
   :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']}"
+  @shortkey="handleKey"
   >
   <side-menu></side-menu>
   <div :class="collapse ? 'page-narrow':'page'">
@@ -159,6 +161,13 @@ export default {
     },
     onDragOver (e) {
       e.preventDefault()
+    },
+    handleKey (event) {
+      switch (event.srcKey) {
+        case 'help':
+          this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', true)
+          break
+      }
     }
   }
 }

src/renderer/components/TimelineSpace/Modals.vue

@@ -5,6 +5,7 @@
     <image-viewer></image-viewer>
     <list-membership></list-membership>
     <add-list-member></add-list-member>
+    <shortcut></shortcut>
   </div>
 </template>
 
@@ -14,6 +15,7 @@ import Jump from './Modals/Jump'
 import ImageViewer from './Modals/ImageViewer'
 import ListMembership from './Modals/ListMembership'
 import AddListMember from './Modals/AddListMember'
+import Shortcut from './Modals/Shortcut'
 
 export default {
   name: 'modals',
@@ -22,7 +24,8 @@ export default {
     Jump,
     ImageViewer,
     ListMembership,
-    AddListMember
+    AddListMember,
+    Shortcut
   }
 }
 </script>

src/renderer/components/TimelineSpace/Modals/Shortcut.vue

@@ -0,0 +1,126 @@
+<template>
+<el-dialog
+  :title="$t('modals.shortcut.title')"
+  :visible.sync="shortcutModal"
+  width="500px"
+  class="shortcut-modal"
+  >
+  <table class="shortcuts">
+    <tbody>
+      <tr>
+        <td><kbd>Ctrl(Cmd) + 1, 2, 3...</kbd></td>
+        <td>{{ $t('modals.shortcut.ctrl_number') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>Ctrl(Cmd) + k</kbd></td>
+        <td>{{ $t('modals.shortcut.ctrl_k') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>Ctrl(Cmd) + n</kbd></td>
+        <td>{{ $t('modals.shortcut.ctrl_n') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>Ctrl(Cmd) + Enter</kbd></td>
+        <td>{{ $t('modals.shortcut.ctrl_enter') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>j</kbd></td>
+        <td>{{ $t('modals.shortcut.j') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>k</kbd></td>
+        <td>{{ $t('modals.shortcut.k') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>r</kbd></td>
+        <td>{{ $t('modals.shortcut.r') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>b</kbd></td>
+        <td>{{ $t('modals.shortcut.b') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>f</kbd></td>
+        <td>{{ $t('modals.shortcut.f') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>o</kbd></td>
+        <td>{{ $t('modals.shortcut.o') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>p</kbd></td>
+        <td>{{ $t('modals.shortcut.p') }}</td>
+      </tr>
+      <tr>
+        <td><kbd>esc</kbd></td>
+        <td>{{ $t('modals.shortcut.esc') }}</td>
+      </tr>
+    </tbody>
+  </table>
+</el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'shortcut',
+  computed: {
+    shortcutModal: {
+      get () {
+        return this.$store.state.TimelineSpace.Modals.Shortcut.modalOpen
+      },
+      set (value) {
+        this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', value)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.shortcut-modal /deep/ {
+  .el-dialog__header {
+    background-color: #4a5664;
+
+    .el-dialog__title {
+      color: #ebeef5;
+    }
+  }
+
+  .shortcuts {
+    text-align: left;
+    border-collapse: collapse;
+    line-height: 28px;
+    width: 100%;
+
+    tr {
+      border: none;
+
+      &:nth-child(even) {
+        background-color: #fafafa;
+      }
+
+      &:hover {
+        background-color: #f2f6fc;
+      }
+
+      td {
+        padding: 4px 8px;
+      }
+    }
+
+    kbd {
+      display: inline-block;
+      padding: 3px 5px;
+      font-size: 11px;
+      line-height: 10px;
+      color: #444d56;
+      vertical-align: middle;
+      background-color: #fafbfc;
+      border: solid 1px #c6cbd1;
+      border-bottom-color: #959da5;
+      border-radius: 3px;
+      box-shadow: inset 0 -1px 0 #959da5;
+    }
+  }
+}
+</style>

src/renderer/store/TimelineSpace/Modals.js

@@ -3,6 +3,7 @@ import ImageViewer from './Modals/ImageViewer'
 import Jump from './Modals/Jump'
 import ListMembership from './Modals/ListMembership'
 import AddListMember from './Modals/AddListMember'
+import Shortcut from './Modals/Shortcut'
 
 const Modals = {
   namespaced: true,
@@ -11,7 +12,8 @@ const Modals = {
     NewToot,
     Jump,
     ListMembership,
-    AddListMember
+    AddListMember,
+    Shortcut
   }
 }
 

src/renderer/store/TimelineSpace/Modals/Shortcut.js

@@ -0,0 +1,11 @@
+export default {
+  namespaced: true,
+  state: {
+    modalOpen: false
+  },
+  mutations: {
+    changeModal (state, value) {
+      state.modalOpen = value
+    }
+  }
+}