diff options
Diffstat (limited to 'viewer')
-rw-r--r-- | viewer/ldgallery-viewer.7.md | 9 | ||||
-rw-r--r-- | viewer/src/views/layout/left/LayoutTagInput.vue | 16 |
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 @@ | |||
2 | pagetitle: Viewer user manual - ldgallery | 2 | pagetitle: Viewer user manual - ldgallery |
3 | title: LDGALLERY-VIEWER(7) ldgallery | 3 | title: LDGALLERY-VIEWER(7) ldgallery |
4 | author: Pacien TRAN-GIRARD, Guillaume FOUET | 4 | author: Pacien TRAN-GIRARD, Guillaume FOUET |
5 | date: 2022-09-04 (v2.1) | 5 | date: 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 | |||
43 | Formats 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. | 43 | Formats 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 | ||
48 | Items can be filtered based on their tags. | 55 | Items 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'; | |||
58 | import LdInput from '@/components/LdInput.vue'; | 58 | import LdInput from '@/components/LdInput.vue'; |
59 | import { useIndexFactory } from '@/services/indexFactory'; | 59 | import { useIndexFactory } from '@/services/indexFactory'; |
60 | import { useGalleryStore } from '@/store/galleryStore'; | 60 | import { useGalleryStore } from '@/store/galleryStore'; |
61 | import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core'; | 61 | import { useUiStore } from '@/store/uiStore'; |
62 | import { computedEager, onKeyStroke, useElementBounding, useFocus, useKeyModifier, useVModel } from '@vueuse/core'; | ||
62 | import { computed, ref, StyleValue, watchEffect } from 'vue'; | 63 | import { computed, ref, StyleValue, watchEffect } from 'vue'; |
63 | import { useI18n } from 'vue-i18n'; | 64 | import { useI18n } from 'vue-i18n'; |
64 | 65 | ||
@@ -69,6 +70,7 @@ const emit = defineEmits(['update:modelValue', 'search', 'opening', 'closing']); | |||
69 | const model = useVModel(props, 'modelValue', emit); | 70 | const model = useVModel(props, 'modelValue', emit); |
70 | 71 | ||
71 | const { t } = useI18n(); | 72 | const { t } = useI18n(); |
73 | const uiStore = useUiStore(); | ||
72 | const galeryStore = useGalleryStore(); | 74 | const galeryStore = useGalleryStore(); |
73 | const indexFactory = useIndexFactory(); | 75 | const indexFactory = useIndexFactory(); |
74 | 76 | ||
@@ -88,6 +90,16 @@ const { focused } = useFocus(input); | |||
88 | 90 | ||
89 | // --- | 91 | // --- |
90 | 92 | ||
93 | const controlState = useKeyModifier('Control'); | ||
94 | onKeyStroke('k', e => { | ||
95 | if (!controlState.value || focused.value) return; | ||
96 | e.preventDefault(); | ||
97 | uiStore.toggleFullWidth(false); | ||
98 | focused.value = true; | ||
99 | }); | ||
100 | |||
101 | // --- | ||
102 | |||
91 | const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false) | 103 | const 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)); |