From d563cec70d996f66c4f724bba7de618fc8678e66 Mon Sep 17 00:00:00 2001
From: Fabio <fabio286@gmail.com>
Date: Sun, 4 Oct 2020 17:21:21 +0200
Subject: [PATCH] feat: close modals pressing ESC

---
 README.md                                      |  3 +--
 src/renderer/components/BaseContextMenu.vue    | 18 ++++++++++++++++--
 .../components/ModalEditConnection.vue         |  9 +++++++++
 src/renderer/components/ModalEditDatabase.vue  | 10 ++++++++++
 src/renderer/components/ModalNewConnection.vue | 11 +++++++++++
 src/renderer/components/ModalNewDatabase.vue   |  9 +++++++++
 src/renderer/components/ModalNewTableRow.vue   | 12 +++++++++++-
 src/renderer/components/ModalSettings.vue      |  9 +++++++++
 8 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 7cf86a1c..40d9b8c6 100644
--- a/README.md
+++ b/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
diff --git a/src/renderer/components/BaseContextMenu.vue b/src/renderer/components/BaseContextMenu.vue
index e0f9249d..48afa2b6 100644
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/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;
diff --git a/src/renderer/components/ModalEditConnection.vue b/src/renderer/components/ModalEditConnection.vue
index 399405d2..e0925a67 100644
--- a/src/renderer/components/ModalEditConnection.vue
+++ b/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();
       }
    }
 };
diff --git a/src/renderer/components/ModalEditDatabase.vue b/src/renderer/components/ModalEditDatabase.vue
index 13f620bb..5e7ee356 100644
--- a/src/renderer/components/ModalEditDatabase.vue
+++ b/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();
       }
    }
 };
diff --git a/src/renderer/components/ModalNewConnection.vue b/src/renderer/components/ModalNewConnection.vue
index b456343c..6e5550c2 100644
--- a/src/renderer/components/ModalNewConnection.vue
+++ b/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();
       }
    }
 };
diff --git a/src/renderer/components/ModalNewDatabase.vue b/src/renderer/components/ModalNewDatabase.vue
index e26f2741..0d1cb9c8 100644
--- a/src/renderer/components/ModalNewDatabase.vue
+++ b/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();
       }
    }
 };
diff --git a/src/renderer/components/ModalNewTableRow.vue b/src/renderer/components/ModalNewTableRow.vue
index 85f1967c..abec7864 100644
--- a/src/renderer/components/ModalNewTableRow.vue
+++ b/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();
       }
    }
 };
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index fafb6f32..7124eb55 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/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();
       }
    }
 };