LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Improvement is keyboard shortcuts (#10925)

Browse Source
This commit is contained in:
Sivin Varghese
2025-02-26 14:51:55 +05:30
committed by GitHub
parent 4d588ae618
commit 0ccbe5882c
4 changed files with 91 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
View File

@@ -1,41 +1,34 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
import { SHORTCUT_KEYS } from './constants';
import { SHORTCUT_KEYS, KEYS } from './constants';
import {
LAYOUT_QWERTZ,
keysToModifyInQWERTZ,
} from 'shared/helpers/KeyboardHelpers';
import Hotkey from 'dashboard/components/base/Hotkey.vue';
defineProps({
show: {
type: Boolean,
default: false,
},
});
defineProps({ show: Boolean });
defineEmits(['close']);
const { t } = useI18n();
const shortcutKeys = SHORTCUT_KEYS;
const currentLayout = ref(null);
const title = item => t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`);
const title = computed(
() => item => t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`)
);
// Added this function to check if the keySet needs a shift key
// This is used to display the shift key in the modal
// If the current layout is QWERTZ and the keySet contains a key that needs a shift key
// If layout is QWERTZ then we add the Shift+keysToModify to fix an known issue
// https://github.com/chatwoot/chatwoot/issues/9492
const needsShiftKey = keySet => {
return (
const needsShiftKey = computed(
() => keySet =>
currentLayout.value === LAYOUT_QWERTZ &&
keySet.some(key => keysToModifyInQWERTZ.has(key))
);
};
);
onMounted(async () => {
currentLayout.value = await useDetectKeyboardLayout();
@@ -55,80 +48,46 @@ onMounted(async () => {
</h5>
<div class="flex items-center gap-2 mb-1 ml-2">
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
{{ KEYS.WIN }}
</Hotkey>
<Hotkey custom-class="min-h-[28px] min-w-[36px] key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
{{ KEYS.SLASH }}
</Hotkey>
</div>
</div>
</div>
<div class="grid grid-cols-2 px-8 pt-0 pb-8 gap-x-5 gap-y-3">
<div class="flex justify-between items-center min-w-[25rem]">
<h5 class="text-sm text-slate-800 dark:text-slate-100">
{{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
</h5>
<div class="flex items-center gap-2 mb-1 ml-2">
<div class="flex gap-2">
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</Hotkey>
<Hotkey custom-class="min-h-[28px] w-9 key"> {{ 'J' }} </Hotkey>
<span
class="flex items-center text-sm font-semibold text-slate-800 dark:text-slate-100"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
</span>
</div>
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</Hotkey>
<Hotkey custom-class="w-9 key"> {{ 'K' }} </Hotkey>
</div>
</div>
<div class="flex justify-between items-center min-w-[25rem]">
<h5 class="text-sm text-slate-800 dark:text-slate-100">
{{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
</h5>
<div class="flex items-center gap-2 mb-1 ml-2">
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
</Hotkey>
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</Hotkey>
<Hotkey custom-class="w-9 key"> {{ 'E' }} </Hotkey>
</div>
</div>
<div
v-for="shortcutKey in shortcutKeys"
:key="shortcutKey.id"
v-for="shortcut in SHORTCUT_KEYS"
:key="shortcut.id"
class="flex justify-between items-center min-w-[25rem]"
>
<h5 class="text-sm text-slate-800 min-w-[36px] dark:text-slate-100">
{{ title(shortcutKey) }}
{{ title(shortcut) }}
</h5>
<div class="flex items-center gap-2 mb-1 ml-2">
<Hotkey
v-if="needsShiftKey(shortcutKey.keySet)"
custom-class="min-h-[28px] min-w-[36px] key"
>
{{ 'Shift' }}
</Hotkey>
<Hotkey
:class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
custom-class="min-h-[28px] normal-case key"
>
{{ shortcutKey.firstKey }}
</Hotkey>
<Hotkey
:class="{ 'normal-case': shortcutKey.secondKey === 'Down' }"
custom-class="min-h-[28px] min-w-[36px] key"
>
{{ shortcutKey.secondKey }}
</Hotkey>
<template v-if="needsShiftKey(shortcut.keySet)">
<Hotkey custom-class="min-h-[28px] min-w-[36px] key">
{{ KEYS.SHIFT }}
</Hotkey>
</template>
<template v-for="(key, index) in shortcut.displayKeys" :key="index">
<template v-if="key !== KEYS.SLASH">
<Hotkey
custom-class="min-h-[28px] min-w-[36px] key normal-case"
>
{{ key }}
</Hotkey>
</template>
<span
v-else
class="flex items-center text-sm font-semibold text-slate-800 dark:text-slate-100"
>
{{ key }}
</span>
</template>
</div>
</div>
</div>