Browse Source

feat(nc-gui): add $e for shortcuts

pull/4550/head
Wing-Kam Wong 2 years ago
parent
commit
0504427f80
  1. 1
      packages/nc-gui/components/dashboard/TreeView.vue
  2. 5
      packages/nc-gui/components/general/FullScreen.vue
  3. 5
      packages/nc-gui/components/general/ShareBaseButton.vue
  4. 9
      packages/nc-gui/components/smartsheet/Grid.vue
  5. 2
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue

1
packages/nc-gui/components/dashboard/TreeView.vue

@ -241,6 +241,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
if (isCreateTableAllowed.value && !isDrawerOrModalExist()) { if (isCreateTableAllowed.value && !isDrawerOrModalExist()) {
// prevent the key `T` is inputted to table title input // prevent the key `T` is inputted to table title input
e.preventDefault() e.preventDefault()
$e('a:shortcut', { key: 'ALT + T' })
openTableCreateDialog() openTableCreateDialog()
} }
break break

5
packages/nc-gui/components/general/FullScreen.vue

@ -1,10 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, isDrawerOrModalExist, isMac, useSidebar } from '#imports' import { computed, isDrawerOrModalExist, isMac, useNuxtApp, useSidebar } from '#imports'
const rightSidebar = useSidebar('nc-right-sidebar') const rightSidebar = useSidebar('nc-right-sidebar')
const leftSidebar = useSidebar('nc-left-sidebar') const leftSidebar = useSidebar('nc-left-sidebar')
const { $e } = useNuxtApp()
const isSidebarsOpen = computed({ const isSidebarsOpen = computed({
get: () => rightSidebar.isOpen.value || leftSidebar.isOpen.value, get: () => rightSidebar.isOpen.value || leftSidebar.isOpen.value,
set: (value) => { set: (value) => {
@ -20,6 +22,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
case 70: { case 70: {
// ALT + F // ALT + F
if (!isDrawerOrModalExist()) { if (!isDrawerOrModalExist()) {
$e('a:shortcut', { key: 'ALT + F' })
isSidebarsOpen.value = !isSidebarsOpen.value isSidebarsOpen.value = !isSidebarsOpen.value
} }
break break

5
packages/nc-gui/components/general/ShareBaseButton.vue

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { isDrawerOrModalExist, isMac, useRoute, useUIPermission } from '#imports' import { isDrawerOrModalExist, isMac, useNuxtApp, useRoute, useUIPermission } from '#imports'
const route = useRoute() const route = useRoute()
@ -7,6 +7,8 @@ const showUserModal = ref(false)
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
const { $e } = useNuxtApp()
const isShareBaseAllowed = computed( const isShareBaseAllowed = computed(
() => () =>
isUIAllowed('newUser') && isUIAllowed('newUser') &&
@ -24,6 +26,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
case 73: { case 73: {
// ALT + I // ALT + I
if (isShareBaseAllowed.value && !isDrawerOrModalExist()) { if (isShareBaseAllowed.value && !isDrawerOrModalExist()) {
$e('a:shortcut', { key: 'ALT + I' })
showUserModal.value = true showUserModal.value = true
} }
break break

9
packages/nc-gui/components/smartsheet/Grid.vue

@ -37,6 +37,7 @@ import {
useI18n, useI18n,
useMetas, useMetas,
useMultiSelect, useMultiSelect,
useNuxtApp,
useRoles, useRoles,
useRoute, useRoute,
useSmartsheetStoreOrThrow, useSmartsheetStoreOrThrow,
@ -52,6 +53,8 @@ const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref()) const view = inject(ActiveViewInj, ref())
const { $e } = useNuxtApp()
// keep a root fields variable and will get modified from // keep a root fields variable and will get modified from
// fields menu and get used in grid and gallery // fields menu and get used in grid and gallery
const fields = inject(FieldsInj, ref([])) const fields = inject(FieldsInj, ref([]))
@ -223,6 +226,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
switch (e.key) { switch (e.key) {
case 'ArrowUp': case 'ArrowUp':
e.preventDefault() e.preventDefault()
$e('a:shortcut', { key: 'CTRL + ArrowUp' })
selectedCell.row = 0 selectedCell.row = 0
selectedCell.col = selectedCell.col ?? 0 selectedCell.col = selectedCell.col ?? 0
scrollToCell?.() scrollToCell?.()
@ -230,6 +234,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
return true return true
case 'ArrowDown': case 'ArrowDown':
e.preventDefault() e.preventDefault()
$e('a:shortcut', { key: 'CTRL + ArrowDown' })
selectedCell.row = data.value.length - 1 selectedCell.row = data.value.length - 1
selectedCell.col = selectedCell.col ?? 0 selectedCell.col = selectedCell.col ?? 0
scrollToCell?.() scrollToCell?.()
@ -237,6 +242,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
return true return true
case 'ArrowRight': case 'ArrowRight':
e.preventDefault() e.preventDefault()
$e('a:shortcut', { key: 'CTRL + ArrowRight' })
selectedCell.row = selectedCell.row ?? 0 selectedCell.row = selectedCell.row ?? 0
selectedCell.col = fields.value?.length - 1 selectedCell.col = fields.value?.length - 1
scrollToCell?.() scrollToCell?.()
@ -244,6 +250,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
return true return true
case 'ArrowLeft': case 'ArrowLeft':
e.preventDefault() e.preventDefault()
$e('a:shortcut', { key: 'CTRL + ArrowLeft' })
selectedCell.row = selectedCell.row ?? 0 selectedCell.row = selectedCell.row ?? 0
selectedCell.col = 0 selectedCell.col = 0
scrollToCell?.() scrollToCell?.()
@ -257,6 +264,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
case 82: { case 82: {
// ALT + R // ALT + R
if (isAddingEmptyRowAllowed) { if (isAddingEmptyRowAllowed) {
$e('a:shortcut', { key: 'ALT + R' })
addEmptyRow() addEmptyRow()
} }
break break
@ -264,6 +272,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
case 67: { case 67: {
// ALT + C // ALT + C
if (isAddingColumnAllowed) { if (isAddingColumnAllowed) {
$e('a:shortcut', { key: 'ALT + C' })
addColumnDropdown.value = true addColumnDropdown.value = true
} }
break break

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

@ -213,6 +213,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
// ALT + , // ALT + ,
if (isUIAllowed('settings') && !isDrawerOrModalExist()) { if (isUIAllowed('settings') && !isDrawerOrModalExist()) {
e.preventDefault() e.preventDefault()
$e('a:shortcut', { key: 'ALT + ,' })
toggleDialog(true, 'teamAndAuth') toggleDialog(true, 'teamAndAuth')
} }
break break
@ -223,6 +224,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {
case '/': case '/':
if (!isDrawerOrModalExist()) { if (!isDrawerOrModalExist()) {
$e('a:shortcut', { key: 'CTRL + /' })
openKeyboardShortcutDialog() openKeyboardShortcutDialog()
} }
break break

Loading…
Cancel
Save