aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--viewer/ldgallery-viewer.7.md9
-rw-r--r--viewer/src/views/layout/left/LayoutTagInput.vue16
2 files changed, 22 insertions, 3 deletions
diff --git a/viewer/ldgallery-viewer.7.md b/viewer/ldgallery-viewer.7.md
index c0634b6..736f61f 100644
--- a/viewer/ldgallery-viewer.7.md
+++ b/viewer/ldgallery-viewer.7.md
@@ -2,7 +2,7 @@
2pagetitle: Viewer user manual - ldgallery 2pagetitle: Viewer user manual - ldgallery
3title: LDGALLERY-VIEWER(7) ldgallery 3title: LDGALLERY-VIEWER(7) ldgallery
4author: Pacien TRAN-GIRARD, Guillaume FOUET 4author: Pacien TRAN-GIRARD, Guillaume FOUET
5date: 2022-09-04 (v2.1) 5date: 2022-10-26 (v2.1-SNAPSHOT)
6--- 6---
7 7
8 8
@@ -43,6 +43,13 @@ Items of the following formats can be opened and visualised within the web appli
43Formats which are not listed above or which are not supported by the user's web browser are offered for download instead of being directly displayed in the same window. 43Formats which are not listed above or which are not supported by the user's web browser are offered for download instead of being directly displayed in the same window.
44 44
45 45
46# KEYBOARD SHORTCUTS
47
48`CTRL-K`
49: Moves the focus to the tag search field, opening the side search panel if it is closed.
50 Pressing again while in the search input field sets the focus to the browser's address bar.
51
52
46# SEARCH QUERIES 53# SEARCH QUERIES
47 54
48Items can be filtered based on their tags. 55Items can be filtered based on their tags.
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));