aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/layout
diff options
context:
space:
mode:
authorpacien2022-10-26 01:39:04 +0200
committerGitHub2022-10-26 01:39:04 +0200
commit8ff134feaf0503bd8d93e0295c9db53ef3c49821 (patch)
tree90c029b9f29a20259d16d416844705894f2c8cb1 /viewer/src/views/layout
parentd229943925505aa1204d24c83ddc814cba2d578b (diff)
parent121b5c387ca5a91d361f989a60a6777761b332fa (diff)
downloadldgallery-8ff134feaf0503bd8d93e0295c9db53ef3c49821.tar.gz
Merge pull request #337 from ldgallery/oz-ctrl-k-focus
viewer: CTRL+K to focus in search field
Diffstat (limited to 'viewer/src/views/layout')
-rw-r--r--viewer/src/views/layout/left/LayoutTagInput.vue16
1 files changed, 14 insertions, 2 deletions
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 @@
23 v-model="search" 23 v-model="search"
24 :placeholder="t('tagInput.placeholder')" 24 :placeholder="t('tagInput.placeholder')"
25 :tabindex="50" 25 :tabindex="50"
26 @focus="e => (e.target as HTMLInputElement).select()" 26 @focus="(e: FocusEvent) => (e.target as HTMLInputElement).select()"
27 @keypress.enter="inputEnter" 27 @keypress.enter="inputEnter"
28 @keydown.backspace="inputBackspace" 28 @keydown.backspace="inputBackspace"
29 /> 29 />
@@ -58,7 +58,8 @@ import LdDropdown from '@/components/LdDropdown.vue';
58import LdInput from '@/components/LdInput.vue'; 58import LdInput from '@/components/LdInput.vue';
59import { useIndexFactory } from '@/services/indexFactory'; 59import { useIndexFactory } from '@/services/indexFactory';
60import { useGalleryStore } from '@/store/galleryStore'; 60import { useGalleryStore } from '@/store/galleryStore';
61import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core'; 61import { useUiStore } from '@/store/uiStore';
62import { computedEager, onKeyStroke, useElementBounding, useFocus, useKeyModifier, useVModel } from '@vueuse/core';
62import { computed, ref, StyleValue, watchEffect } from 'vue'; 63import { computed, ref, StyleValue, watchEffect } from 'vue';
63import { useI18n } from 'vue-i18n'; 64import { useI18n } from 'vue-i18n';
64 65
@@ -69,6 +70,7 @@ const emit = defineEmits(['update:modelValue', 'search', 'opening', 'closing']);
69const model = useVModel(props, 'modelValue', emit); 70const model = useVModel(props, 'modelValue', emit);
70 71
71const { t } = useI18n(); 72const { t } = useI18n();
73const uiStore = useUiStore();
72const galeryStore = useGalleryStore(); 74const galeryStore = useGalleryStore();
73const indexFactory = useIndexFactory(); 75const indexFactory = useIndexFactory();
74 76
@@ -88,6 +90,16 @@ const { focused } = useFocus(input);
88 90
89// --- 91// ---
90 92
93const controlState = useKeyModifier('Control');
94onKeyStroke('k', e => {
95 if (!controlState.value || focused.value) return;
96 e.preventDefault();
97 uiStore.toggleFullWidth(false);
98 focused.value = true;
99});
100
101// ---
102
91const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false) 103const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false)
92 .filter(filterAlreadyPresent) 104 .filter(filterAlreadyPresent)
93 .sort((a, b) => b.items.length - a.items.length)); 105 .sort((a, b) => b.items.length - a.items.length));