Browse Source

feat: close toolbar menu on escape key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4451/head
Pranav C 2 years ago
parent
commit
915575309d
  1. 7
      packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  2. 7
      packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
  3. 7
      packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
  4. 7
      packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
  5. 28
      packages/nc-gui/composables/useMenuCloseOnEsc/index.ts

7
packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@ -8,6 +8,7 @@ import {
inject, inject,
ref, ref,
useGlobal, useGlobal,
useMenuCloseOnEsc,
useNuxtApp, useNuxtApp,
useSmartsheetStoreOrThrow, useSmartsheetStoreOrThrow,
useViewFilters, useViewFilters,
@ -62,10 +63,14 @@ const filterAutoSaveLoc = computed({
filterAutoSave.value = val filterAutoSave.value = val
}, },
}) })
const open = ref(false)
useMenuCloseOnEsc(open)
</script> </script>
<template> <template>
<a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu"> <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
<div :class="{ 'nc-badge nc-active-btn': filtersLength }"> <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
<a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked"> <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">

7
packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@ -14,6 +14,7 @@ import {
inject, inject,
ref, ref,
resolveComponent, resolveComponent,
useMenuCloseOnEsc,
useNuxtApp, useNuxtApp,
useViewColumns, useViewColumns,
watch, watch,
@ -119,10 +120,14 @@ const getIcon = (c: ColumnType) =>
h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), { h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
columnMeta: c, columnMeta: c,
}) })
const open = ref(false)
useMenuCloseOnEsc(open)
</script> </script>
<template> <template>
<a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu"> <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
<div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }"> <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
<a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked"> <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">

7
packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@ -9,6 +9,7 @@ import {
getSortDirectionOptions, getSortDirectionOptions,
inject, inject,
ref, ref,
useMenuCloseOnEsc,
useViewSorts, useViewSorts,
watch, watch,
} from '#imports' } from '#imports'
@ -37,10 +38,14 @@ watch(
}, },
{ immediate: true }, { immediate: true },
) )
const open = ref(false)
useMenuCloseOnEsc(open)
</script> </script>
<template> <template>
<a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu"> <a-dropdown v-model:visible="open" offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
<div :class="{ 'nc-badge nc-active-btn': sorts?.length }"> <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
<a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"> <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">

7
packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@ -8,6 +8,7 @@ import {
message, message,
ref, ref,
useI18n, useI18n,
useMenuCloseOnEsc,
useNuxtApp, useNuxtApp,
useProject, useProject,
useSmartsheetStoreOrThrow, useSmartsheetStoreOrThrow,
@ -79,11 +80,15 @@ async function changeLockType(type: LockType) {
} }
const { isSqlView } = useSmartsheetStoreOrThrow() const { isSqlView } = useSmartsheetStoreOrThrow()
const open = ref(false)
useMenuCloseOnEsc(open)
</script> </script>
<template> <template>
<div> <div>
<a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu"> <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
<a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn"> <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<component <component

28
packages/nc-gui/composables/useMenuCloseOnEsc/index.ts

@ -0,0 +1,28 @@
import { isClient } from '@vueuse/core'
import type { Ref } from 'vue'
export function useMenuCloseOnEsc(open: Ref<boolean>) {
const handler = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
e.preventDefault()
e.stopPropagation()
open.value = false
}
}
if (isClient) {
watch(open, (nextVal, _, cleanup) => {
// bind listener when `open` is truthy
if (nextVal) {
document.addEventListener('keydown', handler, true)
// if `open` is falsy then remove the event handler
} else {
document.removeEventListener('keydown', handler, true)
}
// cleanup is called whenever the watcher is re-evaluated or stopped
cleanup(() => {
document.removeEventListener('keydown', handler, true)
})
})
}
}
Loading…
Cancel
Save