Browse Source

feat(nc-gui): add keyboardShortcut

pull/4482/head
Wing-Kam Wong 2 years ago
parent
commit
f0e98ace78
  1. 29
      packages/nc-gui/components/dlg/KeyboardShortcuts.vue
  2. 3
      packages/nc-gui/lang/en.json
  3. 30
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue

29
packages/nc-gui/components/dlg/KeyboardShortcuts.vue

@ -0,0 +1,29 @@
<script lang="ts" setup>
import { useI18n } from '#imports'
const { modelValue } = defineProps<{
modelValue: boolean
}>()
const emit = defineEmits(['update:modelValue'])
const dialogShow = computed({
get: () => modelValue,
set: (v) => emit('update:modelValue', v),
})
const { t } = useI18n()
</script>
<template>
<a-modal
v-model:visible="dialogShow"
width="max(30vw, 600px)"
class="p-2"
:wrap-class-name="`nc-modal-keyboard-shortcuts ${dialogShow ? 'active' : ''}`"
@keydown.esc="dialogShow = false"
>
<template #title> {{ $t('general.title.keyboardShortcut') }} </template>
<!-- TODO: -->
</a-modal>
</template>

3
packages/nc-gui/lang/en.json

@ -199,7 +199,8 @@
"quickImportFrom": "Quick Import From", "quickImportFrom": "Quick Import From",
"quickImport": "Quick Import", "quickImport": "Quick Import",
"advancedSettings": "Advanced Settings", "advancedSettings": "Advanced Settings",
"codeSnippet": "Code Snippet" "codeSnippet": "Code Snippet",
"keyboardShortcut": "Keyboard Shortcuts"
}, },
"labels": { "labels": {
"createdBy": "Created By", "createdBy": "Created By",

30
packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@ -13,7 +13,9 @@ import {
openLink, openLink,
projectThemeColors, projectThemeColors,
ref, ref,
resolveComponent,
useCopy, useCopy,
useDialog,
useGlobal, useGlobal,
useI18n, useI18n,
useProject, useProject,
@ -35,6 +37,8 @@ const { theme, defaultTheme } = useTheme()
const { t } = useI18n() const { t } = useI18n()
const { $e } = useNuxtApp()
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
@ -184,6 +188,22 @@ onMounted(() => {
onBeforeUnmount(reset) onBeforeUnmount(reset)
function openKeyboardShortcutDialog() {
$e('a:actions:keyboard-shortcut')
const isOpen = ref(true)
const { close } = useDialog(resolveComponent('DlgKeyboardShortcuts'), {
'modelValue': isOpen,
'onUpdate:modelValue': closeDialog,
})
function closeDialog() {
isOpen.value = false
close(1000)
}
}
useEventListener(document, 'keydown', async (e: KeyboardEvent) => { useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
if (e.altKey && !e.shiftKey && !cmdOrCtrl) { if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
@ -198,6 +218,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
} }
} }
} }
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
if (cmdOrCtrl) {
switch (e.key) {
case '/':
if (!document.querySelector('.nc-modal-keyboard-shortcuts.active')) {
openKeyboardShortcutDialog()
}
break
}
}
}) })
</script> </script>

Loading…
Cancel
Save