feat: delete shortcuts and restore defaults

src/renderer/components/KeyPressDetector.vue

@@ -0,0 +1,81 @@
+<template>
+   <div class="form-group has-icon-right p-2 m-0">
+      <input
+         class="form-input"
+         type="text"
+         :value="pressedKeys"
+         readonly
+         :placeholder="t('message.registerAShortcut')"
+         @focus="isFocus = true"
+         @blur="isFocus = false"
+         @keydown.prevent.stop="onKey"
+      >
+      <i class="form-icon mdi mdi-keyboard-outline mdi-24px" />
+   </div>
+</template>
+<script setup lang="ts">
+import { computed, Ref, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Application from '@/ipc-api/Application';
+
+const { t } = useI18n();
+
+const emit = defineEmits(['update:modelValue']);
+
+const isMacOS = process.platform === 'darwin';
+
+defineProps({
+   modelValue: String
+});
+
+const isFocus = ref(false);
+const keyboardEvent: Ref<KeyboardEvent> = ref(null);
+
+const pressedKeys = computed(() => {
+   const keys: string[] = [];
+
+   if (keyboardEvent.value) {
+      if (keyboardEvent.value.altKey)
+         keys.push('Alt');
+      if (keyboardEvent.value.ctrlKey)
+         keys.push('Control');
+      if (keyboardEvent.value.metaKey && isMacOS)
+         keys.push('Meta');
+      if (keyboardEvent.value.shiftKey)
+         keys.push('Shift');
+      if (keyboardEvent.value.code) {
+         if (!['Control', 'Alt', 'AltGraph', 'Shift', 'Meta', 'CapsLock', 'ContextMenu'].includes(keyboardEvent.value.key))
+            keys.push(keyboardEvent.value.code.replace('Digit', '').replace('Key', ''));
+      }
+   }
+
+   return keys.join('+');
+});
+
+const onKey = (e: KeyboardEvent) => {
+   e.stopPropagation();
+   e.preventDefault();
+   keyboardEvent.value = e;
+};
+
+watch(pressedKeys, () => {
+   emit('update:modelValue', pressedKeys.value);
+});
+
+watch(isFocus, (val) => {
+   if (val)
+      Application.unregisterShortcuts();
+   else
+      Application.reloadShortcuts();
+});
+</script>
+<style lang="scss" scoped>
+.has-icon-right {
+   .form-input {
+      padding-right: 1.4rem;
+   }
+   .form-icon {
+      right: 0.8rem;
+   }
+}
+</style>

src/renderer/components/ModalSettingsShortcuts.vue

@@ -1,10 +1,11 @@
 <template>
    <div class="p-relative">
+      <KeyPressDetector />
       <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">
+         <button class="btn btn-dark btn-sm d-flex ml-2" @click="isConfirmRestoreModal = true">
             <i class="mdi mdi-24px mdi-undo mr-1" /><span>{{ t('message.restoreDefaults') }}</span>
          </button>
       </div>
@@ -17,7 +18,7 @@
                         {{ t('word.event') }}
                      </div>
                   </div>
-                  <div class="th no-border" style="width: 100%">
+                  <div class="th no-border" style="width: 100%;">
                      <div>
                         {{ t('word.key', 2) }}
                      </div>
@@ -34,7 +35,7 @@
                   tabindex="0"
                >
                   <div class="td py-1">
-                     {{ t(shortcut.l18nSlug, {param: shortcut.l18nParam}) }}
+                     {{ t(shortcutEvents[shortcut.event].l18n, {param: shortcutEvents[shortcut.event].l18nParam}) }}
                   </div>
                   <div
                      class="td py-1"
@@ -42,10 +43,10 @@
                      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">
+                     <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1 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">
+                     <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1" @click="showDeleteModal(shortcut)">
                         <span>{{ t('word.delete') }}</span><i class="mdi mdi-delete-outline ml-1" />
                      </button>
                   </div>
@@ -54,16 +55,59 @@
          </div>
       </div>
    </div>
+   <Teleport to="#window-content">
+      <ConfirmModal
+         v-if="isConfirmDeleteModal"
+         @confirm="deleteShortcut"
+         @hide="isConfirmDeleteModal = false"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ t('message.deleteShortcut') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+               {{ t('message.deleteCorfirm') }} <b>{{ t(shortcutEvents[shortcutToDelete.event].l18n, {param: shortcutEvents[shortcutToDelete.event].l18nParam}) }} (<span v-html="parseKeys(shortcutToDelete.keys)" />)</b>?
+            </div>
+         </template>
+      </ConfirmModal>
+      <ConfirmModal
+         v-if="isConfirmRestoreModal"
+         @confirm="restoreDefaults"
+         @hide="isConfirmRestoreModal = false"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-undo mr-1" /> {{ t('message.restoreDefaults') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+               {{ t('message.restoreDefaultsQuestion') }}
+            </div>
+         </template>
+      </ConfirmModal>
+   </Teleport>
 </template>
 <script setup lang="ts">
+import { Ref, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { useSettingsStore } from '@/stores/settings';
+import KeyPressDetector from './KeyPressDetector.vue';
+import Application from '@/ipc-api/Application';
+import { shortcutEvents, ShortcutRecord } from 'common/shortcuts';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
 
 const { t } = useI18n();
 
 const isMacOS = process.platform === 'darwin';
 
+const isConfirmRestoreModal = ref(false);
+const isConfirmDeleteModal = ref(false);
+const shortcutToDelete: Ref<ShortcutRecord> = ref(null);
+
 const settingsStore = useSettingsStore();
 const { shortcuts } = storeToRefs(settingsStore);
 
@@ -77,35 +121,53 @@ const parseKeys = (keys: {[key: number]: string}[]) => {
       .replaceAll('CommandOrControl', isMacOS ? 'CMD' : 'CTRL')
    ).join(', ');
 };
+
+const restoreDefaults = () => {
+   isConfirmRestoreModal.value = false;
+   return Application.restoreDefaultShortcuts();
+};
+
+const showDeleteModal = (shortcut: ShortcutRecord) => {
+   isConfirmDeleteModal.value = true;
+   shortcutToDelete.value = shortcut;
+};
+
+const deleteShortcut = () => {
+   const filteredShortcuts = shortcuts.value.filter(s => (
+      shortcutToDelete.value.event !== s.event && shortcutToDelete.value.keys !== s.keys
+   ));
+
+   Application.updateShortcuts(filteredShortcuts);
+};
 </script>
 <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;
-            }
+  .table {
+    .tr {
+      .td {
+        border-right: 3px solid;
+        border-bottom: 3px solid;
       }
-   }
 
-   .shortcuts-tools{
-      display: flex;
-      justify-content: flex-end;
-   }
+      &: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>