perf: Add Enter / Escape keybinds to modals and views (#608) @Larsluph

src/components/Modals/AddModal.vue

@@ -218,6 +218,10 @@ export default {
   },
   mounted() {
     this.dTransition = 'scale-transition'
+    document.addEventListener('keydown', this.handleKeyboardShortcut)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardShortcut)
   },
   methods: {
     async setSettings() {
@@ -289,6 +293,11 @@ export default {
     },
     close() {
       this.dialog = false
+    },
+    handleKeyboardShortcut(e) {
+      if (e.key === "Escape") {
+        this.close()
+      }
     }
   }
 }

src/components/Modals/RenameModal.vue

@@ -10,7 +10,7 @@
         <v-container>
           <v-row>
             <v-col>
-              <v-textarea v-model="name" rows="1" auto-grow clearable :label="$t('modals.rename.torrentName')" :prepend-inner-icon="mdiFile" />
+              <v-text-field v-model="name" clearable :label="$t('modals.rename.torrentName')" :prepend-inner-icon="mdiFile" />
             </v-col>
           </v-row>
         </v-container>
@@ -57,10 +57,16 @@ export default {
       return this.$vuetify.breakpoint.xsOnly
     }
   },
+  mounted() {
+    document.addEventListener('keydown', this.handleKeyboardShortcut)
+  },
   created() {
     this.name = this.torrent.name
     this.isUrl()
   },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardShortcut)
+  },
   methods: {
     urlDecode() {
       this.name = decodeURIComponent(this.name)
@@ -68,18 +74,25 @@ export default {
     },
     isUrl() {
       this.enableUrlDecode = false
-      if (this.name.indexOf(' ') == -1) {
+      if (this.name.indexOf(' ') === -1) {
         const exp = /\+|%/
         if (exp.test(this.name)) this.enableUrlDecode = true
       }
     },
-    rename() {
-      qbit.setTorrentName(this.hash, this.name)
+    async rename() {
+      await qbit.setTorrentName(this.hash, this.name)
       this.close()
     },
     close() {
       this.dialog = false
       //this.$store.commit('DELETE_MODAL', this.guid)
+    },
+    handleKeyboardShortcut(e) {
+      if (e.key === "Escape") {
+        this.close()
+      } else if (e.keyCode === 13) {
+        this.rename()
+      }
     }
   }
 }

src/views/Settings.vue

@@ -111,10 +111,19 @@ export default {
   },
   mounted() {
     this.$store.dispatch('FETCH_SETTINGS')
+    document.addEventListener('keydown', this.handleKeyboardShortcut)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardShortcut)
   },
   methods: {
     close() {
       this.$router.back()
+    },
+    handleKeyboardShortcut(e) {
+      if (e.key === "Escape") {
+        this.close()
+      }
     }
   }
 }

src/views/TorrentDetail.vue

@@ -83,15 +83,26 @@ export default {
       return this.$route.params.hash
     }
   },
+  mounted() {
+    document.addEventListener('keydown', this.handleKeyboardShortcut)
+  },
   created() {
     this.$store.dispatch('INIT_INTERVALS')
   },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardShortcut)
+  },
   destroyed() {
     this.$store.commit('REMOVE_INTERVALS')
   },
   methods: {
     close() {
       this.$router.back()
+    },
+    handleKeyboardShortcut(e) {
+      if (e.key === "Escape") {
+        this.close()
+      }
     }
   }
 }