From 49b63bc6f28fc6031e6a892d0a48cd35ae2f26cd Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Tue, 9 Aug 2022 16:10:08 +0200
Subject: [PATCH] feat(UI): shortcuts setting UI improved

---
 src/common/shortcuts.ts                       |  31 ++++-
 src/main/libs/ShortcutRegister.ts             |   3 +-
 .../components/ModalAllConnections.vue        | 118 +++++++++---------
 src/renderer/components/ModalSettings.vue     |   8 +-
 .../components/ModalSettingsShortcuts.vue     |  58 ++++++++-
 src/renderer/components/TheSettingBar.vue     |   6 +-
 .../WorkspaceAddConnectionPanel.vue           |   2 +-
 .../WorkspaceEditConnectionPanel.vue          |   2 +-
 .../components/WorkspaceQueryConsole.vue      | 107 ++++++++--------
 src/renderer/i18n/en-US.ts                    |   8 +-
 src/renderer/scss/_variables.scss             |  15 +--
 src/renderer/scss/main.scss                   |   3 +-
 src/renderer/scss/themes/dark-theme.scss      |   8 +-
 src/renderer/scss/themes/light-theme.scss     |  12 +-
 src/renderer/stores/settings.ts               |   3 +-
 15 files changed, 229 insertions(+), 155 deletions(-)

diff --git a/src/common/shortcuts.ts b/src/common/shortcuts.ts
index 4bbc8018..477e8300 100644
--- a/src/common/shortcuts.ts
+++ b/src/common/shortcuts.ts
@@ -1,7 +1,9 @@
 interface ShortcutRecord {
    event: string;
    keys: Electron.Accelerator[];
-   description: string;
+   description?: string;
+   l18nSlug: string;
+   l18nParam?: string | number;
    os: NodeJS.Platform[];
 }
 
@@ -10,48 +12,63 @@ const shortcuts: ShortcutRecord[] = [
       event: 'open-new-tab',
       keys: ['CommandOrControl+T'],
       description: 'Open a new query tab',
+      l18nSlug: 'message.openNewTab',
       os: ['darwin', 'linux', 'win32']
    },
    {
       event: 'close-tab',
       keys: ['CommandOrControl+W'],
       description: 'Close tab',
+      l18nSlug: 'message.closeTab',
       os: ['darwin', 'linux', 'win32']
    },
    {
       event: 'next-tab',
-      keys: ['Alt+CommandOrControl+Right', 'CommandOrControl+PageDown'],
+      keys: ['Alt+CommandOrControl+Right'],
       description: 'Next tab',
+      l18nSlug: 'message.nextTab',
       os: ['darwin', 'win32']
    },
    {
       event: 'prev-tab',
-      keys: ['Alt+CommandOrControl+Left', 'CommandOrControl+PageUp'],
+      keys: ['Alt+CommandOrControl+Left'],
       description: 'Previous tab',
+      l18nSlug: 'message.previousTab',
       os: ['darwin', 'win32']
    },
    {
       event: 'next-tab',
       keys: ['CommandOrControl+PageDown'],
       description: 'Next tab',
-      os: ['linux']
+      l18nSlug: 'message.nextTab',
+      os: ['linux', 'win32']
    },
    {
       event: 'prev-tab',
       keys: ['CommandOrControl+PageUp'],
       description: 'Previous tab',
-      os: ['linux']
+      l18nSlug: 'message.previousTab',
+      os: ['linux', 'win32']
    },
    {
       event: 'open-connections-modal',
       keys: ['Shift+CommandOrControl+Space'],
       description: 'Show all connections',
+      l18nSlug: 'message.allConnections',
       os: ['darwin', 'linux', 'win32']
    },
    {
       event: 'toggle-console',
-      keys: ['CommandOrControl+F12', 'CommandOrControl+`'],
+      keys: ['CommandOrControl+F12'],
       description: 'Toggle console',
+      l18nSlug: 'message.toggleConsole',
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'toggle-console',
+      keys: ['CommandOrControl+`'],
+      description: 'Toggle console',
+      l18nSlug: 'message.toggleConsole',
       os: ['darwin', 'linux', 'win32']
    }
 ];
@@ -62,6 +79,8 @@ for (let i = 1; i <= 9; i++) {
          event: `select-tab-${i}`,
          keys: [`CommandOrControl+${i}`],
          description: `Select tab number ${i}`,
+         l18nSlug: 'message.selectTabNumber',
+         l18nParam: i,
          os: ['darwin', 'linux', 'win32']
       });
 }
diff --git a/src/main/libs/ShortcutRegister.ts b/src/main/libs/ShortcutRegister.ts
index dd689c50..9fb2db36 100644
--- a/src/main/libs/ShortcutRegister.ts
+++ b/src/main/libs/ShortcutRegister.ts
@@ -1,8 +1,9 @@
 import { BrowserWindow, globalShortcut } from 'electron';
 import * as Store from 'electron-store';
-import { ShortcutRecord, shortcuts as defaultShortcuts } from 'common/shortcuts';
+import { ShortcutRecord, shortcuts } from 'common/shortcuts';
 const shortcutsStore = new Store({ name: 'shortcuts' });
 const isDevelopment = process.env.NODE_ENV !== 'production';
+const defaultShortcuts = shortcuts.filter(s => s.os.includes(process.platform));
 
 export class ShortcutRegister {
    private _shortcuts: ShortcutRecord[];
diff --git a/src/renderer/components/ModalAllConnections.vue b/src/renderer/components/ModalAllConnections.vue
index 09910111..ea9f840a 100644
--- a/src/renderer/components/ModalAllConnections.vue
+++ b/src/renderer/components/ModalAllConnections.vue
@@ -126,7 +126,7 @@
                         key="trick"
                         readonly
                         class="p-absolute"
-                        style="width: 1px; height: 1px; opacity: 0"
+                        style="width: 1px; height: 1px; opacity: 0;"
                         type="text"
                      >
                      <!-- workaround for useFocusTrap $lastFocusable -->
@@ -270,89 +270,87 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .vscroll {
-   height: 1000px;
-   overflow: auto;
-   overflow-anchor: none;
+  height: 1000px;
+  overflow: auto;
+  overflow-anchor: none;
 }
 
 .column-resizable {
-
-   &:hover,
-   &:active {
-      resize: horizontal;
-      overflow: hidden;
-   }
+  &:hover,
+  &:active {
+    resize: horizontal;
+    overflow: hidden;
+  }
 }
 
 .table-column-title {
-   display: flex;
-   align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .sort-icon {
-   font-size: 0.7rem;
-   line-height: 1;
-   margin-left: 0.2rem;
+  font-size: 0.7rem;
+  line-height: 1;
+  margin-left: 0.2rem;
 }
 
 .modal {
-   align-items: flex-start;
+  align-items: flex-start;
 
-   .modal-container {
-      max-width: 75vw;
-      margin-top: 10vh;
+  .modal-container {
+    max-width: 75vw;
+    margin-top: 10vh;
 
-      .modal-body {
-         height: 80vh;
-      }
-   }
+    .modal-body {
+      height: 80vh;
+    }
+  }
 }
 
 .connections-search {
-   display: flex;
-   justify-content: space-around;
+  display: flex;
+  justify-content: space-around;
 }
 
 .connection-block {
-   cursor: pointer;
-   transition: all .2s;
-   border-radius: $border-radius;
-   outline: none;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-radius: $border-radius;
+  outline: none;
 
-   &:focus {
-      box-shadow: 0 0 3px .1rem rgba($primary-color, 80%);
-   }
-
-   &:hover {
-      .all-connections-buttons {
-
-         .all-connections-delete,
-         .all-connections-pinned,
-         .all-connections-pin {
-            opacity: .5;
-         }
-      }
-   }
-
-   .all-connections-buttons {
-      .all-connections-pinned {
-         opacity: .3;
-         transition: opacity .2s;
-
-         &:hover {
-            opacity: 1;
-         }
-      }
+  &:focus {
+    box-shadow: 0 0 3px 0.1rem rgba($primary-color, 80%);
+  }
 
+  &:hover {
+    .all-connections-buttons {
       .all-connections-delete,
+      .all-connections-pinned,
       .all-connections-pin {
-         opacity: 0;
-         transition: opacity .2s;
-
-         &:hover {
-            opacity: 1;
-         }
+        opacity: 0.5;
       }
-   }
+    }
+  }
+
+  .all-connections-buttons {
+    .all-connections-pinned {
+      opacity: 0.3;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    .all-connections-delete,
+    .all-connections-pin {
+      opacity: 0;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 55e04835..c256be68 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -549,10 +549,10 @@ onBeforeUnmount(() => {
     .modal-body {
       overflow: hidden;
 
-      .tab-link{
-         overflow: hidden;
-         white-space: nowrap;
-         text-overflow: ellipsis;
+      .tab-link {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
       .panel-body {
diff --git a/src/renderer/components/ModalSettingsShortcuts.vue b/src/renderer/components/ModalSettingsShortcuts.vue
index 7f84eaf7..97cc563c 100644
--- a/src/renderer/components/ModalSettingsShortcuts.vue
+++ b/src/renderer/components/ModalSettingsShortcuts.vue
@@ -1,5 +1,13 @@
 <template>
    <div class="p-relative">
+      <div class="shortcuts-tools pb-2 px-2">
+         <button class="btn btn-dark btn-sm d-flex ml-2">
+            <i class="mdi mdi-24px mdi-plus mr-1" /><span>{{ t('message.addShortcut') }}</span>
+         </button>
+         <button class="btn btn-dark btn-sm d-flex ml-2">
+            <i class="mdi mdi-24px mdi-undo mr-1" /><span>{{ t('message.restoreDefaults') }}</span>
+         </button>
+      </div>
       <div class="container workspace-query-results">
          <div class="table table-hover">
             <div class="thead">
@@ -14,6 +22,7 @@
                         {{ t('word.key', 2) }}
                      </div>
                   </div>
+                  <div class="th no-border" />
                </div>
             </div>
 
@@ -25,9 +34,21 @@
                   tabindex="0"
                >
                   <div class="td py-1">
-                     {{ shortcut.description }}
+                     {{ t(shortcut.l18nSlug, {param: shortcut.l18nParam}) }}
+                  </div>
+                  <div
+                     class="td py-1"
+                     style="border-right: 0;"
+                     v-html="parseKeys(shortcut.keys)"
+                  />
+                  <div class="td py-1 pr-2">
+                     <button class="shortcut-button btn btn-link btn-sm d-flex p-0 mr-2">
+                        <span>{{ t('word.edit') }}</span><i class="mdi mdi-pencil ml-1" />
+                     </button>
+                     <button class="shortcut-button btn btn-link btn-sm d-flex p-0">
+                        <span>{{ t('word.delete') }}</span><i class="mdi mdi-delete-outline ml-1" />
+                     </button>
                   </div>
-                  <div class="td py-1" v-html="parseKeys(shortcut.keys)" />
                </div>
             </div>
          </div>
@@ -57,9 +78,34 @@ const parseKeys = (keys: {[key: number]: string}[]) => {
    ).join(', ');
 };
 </script>
-<style scoped>
-   .table .td {
-      border-right: 3px solid;
-      border-bottom: 3px solid;
+<style lang="scss" scoped>
+   .table {
+      .tr{
+         .td {
+            border-right: 3px solid;
+            border-bottom: 3px solid;
+
+         }
+
+         &:hover {
+            .shortcut-button {
+               opacity: 1;
+            }
+         }
+            .shortcut-button {
+               font-size: 0.7rem;
+               height: 1rem;
+               line-height: 1rem;
+               display: inline-flex;
+               align-items: center;
+               justify-content: center;
+               opacity: 0;
+            }
+      }
+   }
+
+   .shortcuts-tools{
+      display: flex;
+      justify-content: flex-end;
    }
 </style>
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index cbcc8db1..c276226c 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -245,7 +245,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
     height: calc(100vh - #{$excluding-size});
     display: flex;
     flex-direction: column;
-   //  justify-content: space-between;
+    //  justify-content: space-between;
     align-items: center;
     padding: 0;
     z-index: 9;
@@ -319,7 +319,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
           }
         }
 
-        .settingbar-element-pin{
+        .settingbar-element-pin {
           margin: 0 auto;
 
           &::before {
@@ -327,7 +327,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
             content: "\F0403";
             color: $body-font-color-dark;
             transform: rotate(45deg);
-            opacity: .25;
+            opacity: 0.25;
             bottom: -8px;
             left: -4px;
             position: absolute;
diff --git a/src/renderer/components/WorkspaceAddConnectionPanel.vue b/src/renderer/components/WorkspaceAddConnectionPanel.vue
index f6c9bfcc..2338e407 100644
--- a/src/renderer/components/WorkspaceAddConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceAddConnectionPanel.vue
@@ -560,7 +560,7 @@ setTimeout(() => {
 .connection-panel {
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-top: 1.5rem;
 
   .panel {
diff --git a/src/renderer/components/WorkspaceEditConnectionPanel.vue b/src/renderer/components/WorkspaceEditConnectionPanel.vue
index 610506ce..2afd29f1 100644
--- a/src/renderer/components/WorkspaceEditConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@@ -551,7 +551,7 @@ localConnection.value = JSON.parse(JSON.stringify(props.connection));
 .connection-panel {
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-top: 1.5rem;
 
   .panel {
diff --git a/src/renderer/components/WorkspaceQueryConsole.vue b/src/renderer/components/WorkspaceQueryConsole.vue
index 7f703ffe..570a1ab2 100644
--- a/src/renderer/components/WorkspaceQueryConsole.vue
+++ b/src/renderer/components/WorkspaceQueryConsole.vue
@@ -119,61 +119,62 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
-.query-console-wrapper{
-   width: 100%;
-   z-index: 9;
-   margin-top: auto;
-   position: absolute;
-   bottom: 0;
+.query-console-wrapper {
+  width: 100%;
+  z-index: 9;
+  margin-top: auto;
+  position: absolute;
+  bottom: 0;
 
-   .query-console-resizer{
-      height: 4px;
-      top: -1px;
-      width: 100%;
-      cursor: ns-resize;
-      position: absolute;
-      z-index: 99;
-      transition: background 0.2s;
+  .query-console-resizer {
+    height: 4px;
+    top: -1px;
+    width: 100%;
+    cursor: ns-resize;
+    position: absolute;
+    z-index: 99;
+    transition: background 0.2s;
 
-      &:hover {
-         background: rgba($primary-color, 50%);
+    &:hover {
+      background: rgba($primary-color, 50%);
+    }
+  }
+
+  .query-console {
+    padding: 0;
+    padding-bottom: $footer-height;
+
+    .query-console-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px;
+      font-weight: 700;
+    }
+
+    .query-console-body {
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      max-height: 100%;
+      padding: 0 6px 3px;
+
+      .query-console-log {
+        padding: 1px 3px;
+        margin: 1px 0;
+        border-radius: $border-radius;
+
+        .query-console-log-sql {
+          font-size: 95%;
+          opacity: 0.8;
+          font-weight: 700;
+
+          &:hover {
+            user-select: text;
+          }
+        }
       }
-   }
-
-   .query-console {
-      padding: 0;
-      padding-bottom: $footer-height;
-      .query-console-header {
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-         padding: 4px;
-         font-weight: 700;
-      }
-
-      .query-console-body {
-         overflow: auto;
-         display: flex;
-         flex-direction: column;
-         max-height: 100%;
-         padding: 0 6px 3px;
-
-         .query-console-log {
-            padding: 1px 3px;
-            margin: 1px 0;
-            border-radius: $border-radius;
-
-            .query-console-log-sql {
-               font-size: 95%;
-               opacity: .8;
-               font-weight: 700;
-               &:hover {
-                  user-select: text;
-               }
-            }
-         }
-      }
-   }
-
+    }
+  }
 }
 </style>
diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts
index f45b93fd..174ed87e 100644
--- a/src/renderer/i18n/en-US.ts
+++ b/src/renderer/i18n/en-US.ts
@@ -299,7 +299,13 @@ export const enUS = {
       allConnections: 'All connections',
       searchForConnections: 'Search for connections',
       disableScratchpad: 'Disable scratchpad',
-      reportABug: 'Report a bug'
+      reportABug: 'Report a bug',
+      nextTab: 'Next tab',
+      previousTab: 'Previous tab',
+      selectTabNumber: 'Select tab number {param}',
+      toggleConsole: 'Toggle console',
+      addShortcut: 'Add shortcut',
+      restoreDefaults: 'Restore defaults'
    },
    faker: {
       address: 'Address',
diff --git a/src/renderer/scss/_variables.scss b/src/renderer/scss/_variables.scss
index 19da6c0e..aa024091 100644
--- a/src/renderer/scss/_variables.scss
+++ b/src/renderer/scss/_variables.scss
@@ -28,13 +28,14 @@ $settingbar-width: 3rem;
 $explorebar-width: 14rem;
 $footer-height: 1.5rem;
 
-@function get-excluding-size(){
-   @if $platform == linux{
-      @return $footer-height;
-   }
-   @else {
-      @return $footer-height + $titlebar-height;
-   }
+@function get-excluding-size() {
+  @if $platform == linux {
+    @return $footer-height;
+  }
+
+  @else {
+    @return $footer-height + $titlebar-height;
+  }
 }
 
 $excluding-size: get-excluding-size();
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 05fae1e7..ce732073 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -362,8 +362,9 @@ option:checked {
 .accordion-body {
   max-height: 5000rem !important;
 }
+
 .btn {
-  &:focus{
+  &:focus {
     box-shadow: 0 0 3px 1px rgba($primary-color, 90%);
   }
 
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index b637223f..28e1afb8 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -256,7 +256,7 @@
     }
   }
 
-  .connection-block{  
+  .connection-block {
     &:hover {
       background: $bg-color-light-dark;
     }
@@ -308,13 +308,13 @@
   .query-console {
     border-top: 1px solid #444;
     background-color: $bg-color-dark;
-    
+
     .query-console-log {
       &:hover,
       &:focus {
-         background: $bg-color-gray;
+        background: $bg-color-gray;
       }
-   }
+    }
   }
 
   .tile {
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index 9bc788b0..55fad7aa 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -131,13 +131,13 @@
   .query-console {
     border-top: 1px solid darken($bg-color-light-gray, 15%);
     background-color: $bg-color-light;
-    
+
     .query-console-log {
       &:hover,
       &:focus {
-         background: $bg-color-light-gray;
+        background: $bg-color-light-gray;
       }
-   }
+    }
   }
 
   #titlebar {
@@ -234,7 +234,7 @@
 
         .table-size {
           opacity: 0.4;
-          
+
           &:hover {
             opacity: 1;
           }
@@ -290,8 +290,8 @@
       background: rgba($bg-color-light-gray, 100%);
     }
   }
-  
-  .connection-block{  
+
+  .connection-block {
     &:hover {
       background: $bg-color-light-gray;
     }
diff --git a/src/renderer/stores/settings.ts b/src/renderer/stores/settings.ts
index 51b0616e..f1cf02d9 100644
--- a/src/renderer/stores/settings.ts
+++ b/src/renderer/stores/settings.ts
@@ -2,12 +2,13 @@ import { defineStore } from 'pinia';
 import { ipcRenderer } from 'electron';
 import { i18n, AvailableLocale } from '@/i18n';
 import * as Store from 'electron-store';
-import { ShortcutRecord, shortcuts as defaultShortcuts } from 'common/shortcuts';
+import { ShortcutRecord, shortcuts } from 'common/shortcuts';
 const settingsStore = new Store({ name: 'settings' });
 const shortcutsStore = new Store({ name: 'shortcuts' });
 const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
 const defaultAppTheme = isDarkTheme.matches ? 'dark' : 'light';
 const defaultEditorTheme = isDarkTheme.matches ? 'twilight' : 'sqlserver';
+const defaultShortcuts = shortcuts.filter(s => s.os.includes(process.platform));
 
 export type EditorFontSize = 'small' | 'medium' | 'large';
 export type ApplicationTheme = 'light' | 'dark';