feat: close modals pressing ESC

README.md

@@ -30,7 +30,6 @@ An application created with minimalism and semplicity in mind, with features in
 This is a roadmap with major features will come in near future.
 
 - Improvements of query editor area.
-- Database management (add/edit/delete).
 - Tables management (add/edit/delete).
 - Users management (add/edit/delete).
 - Stored procedures, views, schedulers and trigger support.
@@ -57,7 +56,7 @@ This is a roadmap with major features will come in near future.
 
 ### Operating Systems
 
-#### • x86
+#### • x64
 
 - [x] Windows
 - [x] Linux

src/renderer/components/BaseContextMenu.vue

@@ -1,7 +1,11 @@
 <template>
    <div class="context">
+      <a
+         class="context-overlay"
+         @click="close"
+         @contextmenu="close"
+      />
       <div
-         v-click-outside="close"
          class="context-container"
          :style="position"
       >
@@ -29,9 +33,20 @@ export default {
          };
       }
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       close () {
          this.$emit('close-context');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.close();
       }
    }
 };
@@ -52,7 +67,6 @@ export default {
     top: 0;
     left: 0;
     bottom: 0;
-    pointer-events: none;
 
     .context-container {
       min-width: 100px;

src/renderer/components/ModalEditConnection.vue

@@ -173,6 +173,10 @@ export default {
    },
    created () {
       this.localConnection = Object.assign({}, this.connection);
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       ...mapActions({
@@ -226,6 +230,11 @@ export default {
       closeAsking () {
          this.isTesting = false;
          this.isAsking = false;
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };

src/renderer/components/ModalEditDatabase.vue

@@ -112,6 +112,11 @@ export default {
          collation: actualCollation || this.defaultCollation,
          prevCollation: actualCollation || this.defaultCollation
       };
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       ...mapActions({
@@ -139,6 +144,11 @@ export default {
       },
       closeModal () {
          this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };

src/renderer/components/ModalNewConnection.vue

@@ -180,6 +180,12 @@ export default {
          isAsking: false
       };
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       ...mapActions({
          closeModal: 'application/hideNewConnModal',
@@ -249,6 +255,11 @@ export default {
       closeAsking () {
          this.isAsking = false;
          this.isTesting = false;
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };

src/renderer/components/ModalNewDatabase.vue

@@ -88,6 +88,10 @@ export default {
    },
    created () {
       this.database = { ...this.database, collation: this.defaultCollation };
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       ...mapActions({
@@ -113,6 +117,11 @@ export default {
       },
       closeModal () {
          this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };

src/renderer/components/ModalNewTableRow.vue

@@ -160,6 +160,9 @@ export default {
             this.nInserts = 1;
       }
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
    mounted () {
       const rowObj = {};
 
@@ -195,6 +198,9 @@ export default {
 
       this.localRow = { ...rowObj };
    },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification'
@@ -294,9 +300,13 @@ export default {
 
          this.localRow[field] = files[0].path;
       },
-
       getKeyUsage (keyName) {
          return this.keyUsage.find(key => key.column === keyName);
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };

src/renderer/components/ModalSettings.vue

@@ -164,6 +164,10 @@ export default {
       this.localLocale = this.selectedLocale;
       this.localTimeout = this.notificationsTimeout;
       this.selectedTab = this.selectedSettingTab;
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       ...mapActions({
@@ -182,6 +186,11 @@ export default {
             this.localTimeout = 10;
 
          this.updateNotificationsTimeout(+this.localTimeout);
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };