Keyboard shortcuts (#303)

Keyboard shortcuts

Co-authored-by: Liyas Thomas <liyasthomas@gmail.com>

assets/css/styles.scss

@@ -494,6 +494,7 @@ fieldset.yellow legend {
   display: none;
 }
 
+kbd,
 select,
 input,
 option,

components/collections/folder.vue

@@ -27,13 +27,19 @@
               class="icon"
               @click="removeFolder"
               v-tooltip="'Delete folder'"
+              v-close-popover
             >
               <i class="material-icons">delete</i>
               <span>Delete</span>
             </button>
           </div>
           <div>
-            <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
+            <button
+              class="icon"
+              @click="editFolder"
+              v-tooltip="'Edit folder'"
+              v-close-popover
+            >
               <i class="material-icons">edit</i>
               <span>Edit</span>
             </button>

components/collections/request.vue

@@ -28,6 +28,7 @@
             class="icon"
             @click="removeRequest"
             v-tooltip="'Delete request'"
+            v-close-popover
           >
             <i class="material-icons">delete</i>
             <span>Delete</span>
@@ -38,6 +39,7 @@
             class="icon"
             @click="$emit('edit-request')"
             v-tooltip="'Edit request'"
+            v-close-popover
           >
             <i class="material-icons">edit</i>
             <span>Edit</span>

components/modal.vue

@@ -37,7 +37,7 @@
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-  max-width: 800px;
+  max-width: 720px;
 }
 
 .modal-container {

layouts/default.vue

@@ -40,6 +40,16 @@
               <i class="material-icons">more_vert</i>
             </button>
             <template slot="popover">
+              <div>
+                <button
+                  class="icon"
+                  @click="showShortcuts = true"
+                  v-close-popover
+                >
+                  <i class="material-icons">keyboard</i>
+                  <span>Shortcuts</span>
+                </button>
+              </div>
               <div>
                 <a
                   href="https://opencollective.com/postwoman"
@@ -210,6 +220,42 @@
         >
       </p>
     </footer>
+    <modal v-if="showShortcuts" @close="showShortcuts = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">Shortcuts</h3>
+              <div>
+                <button class="icon" @click="showShortcuts = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <ul>
+          <li>
+            <div>
+              <label>Save to Collections</label>
+              <kbd>Ctrl</kbd><kbd>S</kbd>
+            </div>
+          </li>
+        </ul>
+        <br>
+        <ul>
+          <li>
+            <div>
+              <label>Copy Sharable Link</label>
+              <kbd>Ctrl</kbd><kbd>K</kbd>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="footer"></div>
+    </modal>
   </div>
 </template>
 
@@ -219,10 +265,12 @@
 import intializePwa from "../assets/js/pwa";
 import logo from "../components/logo";
 import * as version from "../.postwoman/version.json";
+import modal from "../components/modal";
 
 export default {
   components: {
-    logo
+    logo,
+    modal
   },
 
   methods: {
@@ -240,7 +288,8 @@ export default {
       // that can be called to show the user the installation
       // prompt.
       showInstallPrompt: null,
-      version: {}
+      version: {},
+      showShortcuts: false
     };
   },
 

pages/index.vue

@@ -1942,6 +1942,17 @@ export default {
   },
   mounted() {
     this.observeRequestButton();
+    this._keyListener = function(e) {
+      if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.saveRequest();
+      }
+      if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.copyRequest();
+      }
+    };
+    document.addEventListener("keydown", this._keyListener.bind(this));
   },
   created() {
     this.urlExcludes = this.$store.state.postwoman.settings.URL_EXCLUDES || {
@@ -1974,6 +1985,9 @@ export default {
         this.setRouteQueryState();
       }
     );
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this._keyListener);
   }
 };
 </script>