From ab56530d229913a3ea0585ada802f978037b9ac2 Mon Sep 17 00:00:00 2001 From: Zéro~Informatique Date: Tue, 25 Oct 2022 03:48:50 +0200 Subject: viewer: CTRL+K to focus in search field github: closes #328 --- viewer/src/views/layout/left/LayoutTagInput.vue | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'viewer/src/views/layout') diff --git a/viewer/src/views/layout/left/LayoutTagInput.vue b/viewer/src/views/layout/left/LayoutTagInput.vue index a37c546..9ee6f8a 100644 --- a/viewer/src/views/layout/left/LayoutTagInput.vue +++ b/viewer/src/views/layout/left/LayoutTagInput.vue @@ -23,7 +23,7 @@ v-model="search" :placeholder="t('tagInput.placeholder')" :tabindex="50" - @focus="e => (e.target as HTMLInputElement).select()" + @focus="(e: FocusEvent) => (e.target as HTMLInputElement).select()" @keypress.enter="inputEnter" @keydown.backspace="inputBackspace" /> @@ -58,7 +58,8 @@ import LdDropdown from '@/components/LdDropdown.vue'; import LdInput from '@/components/LdInput.vue'; import { useIndexFactory } from '@/services/indexFactory'; import { useGalleryStore } from '@/store/galleryStore'; -import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core'; +import { useUiStore } from '@/store/uiStore'; +import { computedEager, onKeyStroke, useElementBounding, useFocus, useKeyModifier, useVModel } from '@vueuse/core'; import { computed, ref, StyleValue, watchEffect } from 'vue'; import { useI18n } from 'vue-i18n'; @@ -69,6 +70,7 @@ const emit = defineEmits(['update:modelValue', 'search', 'opening', 'closing']); const model = useVModel(props, 'modelValue', emit); const { t } = useI18n(); +const uiStore = useUiStore(); const galeryStore = useGalleryStore(); const indexFactory = useIndexFactory(); @@ -88,6 +90,16 @@ const { focused } = useFocus(input); // --- +const controlState = useKeyModifier('Control'); +onKeyStroke('k', e => { + if (!controlState.value || focused.value) return; + e.preventDefault(); + uiStore.toggleFullWidth(false); + focused.value = true; +}); + +// --- + const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false) .filter(filterAlreadyPresent) .sort((a, b) => b.items.length - a.items.length)); -- cgit v1.2.3