feat(UI): shortcuts setting UI improved

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']
       });
 }

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[];

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 -->
@@ -276,7 +276,6 @@ onBeforeUnmount(() => {
 }
 
 .column-resizable {
-
   &:hover,
   &:active {
     resize: horizontal;
@@ -315,29 +314,28 @@ onBeforeUnmount(() => {
 
 .connection-block {
   cursor: pointer;
-   transition: all .2s;
+  transition: all 0.2s;
   border-radius: $border-radius;
   outline: none;
 
   &:focus {
-      box-shadow: 0 0 3px .1rem rgba($primary-color, 80%);
+    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: .5;
+        opacity: 0.5;
       }
     }
   }
 
   .all-connections-buttons {
     .all-connections-pinned {
-         opacity: .3;
+      opacity: 0.3;
-         transition: opacity .2s;
+      transition: opacity 0.2s;
 
       &:hover {
         opacity: 1;
@@ -347,7 +345,7 @@ onBeforeUnmount(() => {
     .all-connections-delete,
     .all-connections-pin {
       opacity: 0;
-         transition: opacity .2s;
+      transition: opacity 0.2s;
 
       &:hover {
         opacity: 1;

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>
+<style lang="scss" scoped>
-   .table .td {
+   .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>

src/renderer/components/TheSettingBar.vue

@@ -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;

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 {

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 {

src/renderer/components/WorkspaceQueryConsole.vue

@@ -143,6 +143,7 @@ onMounted(() => {
   .query-console {
     padding: 0;
     padding-bottom: $footer-height;
+
     .query-console-header {
       display: flex;
       justify-content: space-between;
@@ -165,8 +166,9 @@ onMounted(() => {
 
         .query-console-log-sql {
           font-size: 95%;
-               opacity: .8;
+          opacity: 0.8;
           font-weight: 700;
+
           &:hover {
             user-select: text;
           }
@@ -174,6 +176,5 @@ onMounted(() => {
       }
     }
   }
-
 }
 </style>

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',

src/renderer/scss/_variables.scss

@@ -32,6 +32,7 @@ $footer-height: 1.5rem;
   @if $platform == linux {
     @return $footer-height;
   }
+
   @else {
     @return $footer-height + $titlebar-height;
   }

src/renderer/scss/main.scss

@@ -362,6 +362,7 @@ option:checked {
 .accordion-body {
   max-height: 5000rem !important;
 }
+
 .btn {
   &:focus {
     box-shadow: 0 0 3px 1px rgba($primary-color, 90%);

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';