Keyboard shortcuts (#105)

* Added basic shortcut support
Added vue-shortkey library
Added 'esc' shortcut to go back from add list component
Added 'esc' shortcut to go back from game search component
Added 'ctl+alt+d' to delete list from list settings component

* Add shortcut to delete game from list (Delete Key)

* Added shortcuts to delete game from list
Added shortcuts to add note to game
Added shortcuts to cancel from note creation
Added shortcuts to delete note

* Fixing import method for consistency

* Fixed code review suggestions

package.json

@@ -37,6 +37,7 @@
         "vue-markdown": "^2.2.4",
         "vue-raven": "^1.0.0",
         "vue-router": "^3.0.1",
+        "vue-shortkey": "^3.1.7",
         "vuedraggable": "^2.16.0",
         "vuefire": "^1.4.5",
         "vuex": "^3.0.1",

src/components/GameBoard/ListSettings.vue

@@ -58,7 +58,7 @@
         </section>
 
         <footer>
-            <button class="filled small tiny info hollow" @click="cancel" title="back">
+            <button class="filled small tiny info hollow" v-shortkey="['esc']" @shortkey="cancel" @click="cancel" title="back">
                 <i class="fas fa-chevron-left" />
                 Back
             </button>

src/components/GameNotes/GameNotes.vue

@@ -29,16 +29,18 @@
                 />
 
                 <div class="note-actions">
-                    <button class="info tag" @click="reset">
+                    <button class="info tag" v-shortkey="['shift', 'c']" @shortkey="reset" @click="reset">
                         Cancel
                     </button>
 
-                    <button class="error tag" @click="deleteNote">
+                    <button class="error tag" v-shortkey="['shift', 'del']" @shortkey="deleteNote" @click="deleteNote">
                         <i class="far fa-trash-alt" />
                     </button>
 
                     <button
                         class="success tag"
+                        v-shortkey="['shift', 's']"
+                        @shortkey="saveNote"
                         @click="saveNote"
                         :disabled="!localNote"
                     >
@@ -51,6 +53,8 @@
 
         <button
             class="warning small hollow"
+            v-shortkey="['ctrl', 'alt', 'n']"
+            @shortkey="addNote"
             @click="addNote"
             v-if="!hasNote && !editingNote"
         >

src/components/GameSearch/GameSearch.vue

@@ -37,7 +37,7 @@
         </panel>
 
         <div class="search-actions">
-            <button class="small filled info" @click="back" title="back">
+            <button class="small filled info" v-shortkey="['esc']" @shortkey="back" @click="back" title="back">
                 <i class="fas fa-chevron-left" />
                 Back
             </button>

src/components/Lists/ListAdd.vue

@@ -39,6 +39,8 @@
                 <button
                     class="small info"
                     type="button"
+                    v-shortkey="['esc']"
+                    @shortkey="reset"
                     @click="reset"
                 >
                     Cancel

src/main.js

@@ -6,6 +6,7 @@ import axios from 'axios';
 import VueAnalytics from 'vue-analytics';
 import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
+import VueShortKey from 'vue-shortkey';
 import App from './App';
 import messages from './i18n/';
 import router from './router';
@@ -29,6 +30,7 @@ Vue.use(VueAnalytics, {
 Vue.use(VueAxios, axios);
 Vue.use(VueFire);
 Vue.use(VueI18n);
+Vue.use(VueShortKey, { prevent: ['input', 'textarea'] });
 
 if (process.env.NODE_ENV !== 'development') {
     Raven

src/pages/GameDetail.vue

@@ -14,7 +14,7 @@
                         <game-rating :rating="game.rating" />
 
                         <div class="actions" v-if="list.games.includes(game.id)">
-                            <button class="error small hollow" @click="removeGame">
+                            <button class="error small hollow" v-shortkey="['del']" @shortkey="removeGame" @click="removeGame">
                                 <i class="far fa-trash-alt delete-game" />
                                 Remove from list
                             </button>

yarn.lock

@@ -2507,6 +2507,10 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+
 custom-event@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
@@ -2849,6 +2853,10 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@
   version "1.3.127"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.127.tgz#9b34d3d63ee0f3747967205b953b25fe7feb0e10"
 
+element-matches@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/element-matches/-/element-matches-0.1.2.tgz#7345cb71e965bd2b12f725e524591c102198361a"
+
 elliptic@^6.0.0:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@@ -8730,6 +8738,13 @@ vue-router@^3.0.1:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
 
+vue-shortkey@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/vue-shortkey/-/vue-shortkey-3.1.7.tgz#31c09a99ed597331a6a49a45eeff894a78a19eef"
+  dependencies:
+    custom-event-polyfill "^1.0.7"
+    element-matches "^0.1.2"
+
 vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.1.2.tgz#6b66ad34998fc9520c2f1e4d5fa4091641c1597a"