aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/layout
diff options
context:
space:
mode:
authorpacien2023-02-17 22:57:38 +0100
committerpacien2023-02-17 22:57:38 +0100
commit46cd42de44e402fbf33522d999fa2649729ffaa8 (patch)
tree1281beefda5d9b6d2411bc47ec1327fbf0b38dde /viewer/src/views/layout
parent11bbbae2850b9c45da697a8ed9626495a50a38c0 (diff)
parente939712a284dff9af6d81cc1fcd4e7f7ec9ad503 (diff)
downloadldgallery-46cd42de44e402fbf33522d999fa2649729ffaa8.tar.gz
Merge branch 'develop': release v2.2v2.2
Diffstat (limited to 'viewer/src/views/layout')
-rw-r--r--viewer/src/views/layout/left/LayoutInformation.vue8
-rw-r--r--viewer/src/views/layout/left/LayoutTagInput.vue16
-rw-r--r--viewer/src/views/layout/top/LayoutCommand.vue37
-rw-r--r--viewer/src/views/layout/top/LayoutTop.vue10
4 files changed, 56 insertions, 15 deletions
diff --git a/viewer/src/views/layout/left/LayoutInformation.vue b/viewer/src/views/layout/left/LayoutInformation.vue
index 780a458..9dfb311 100644
--- a/viewer/src/views/layout/left/LayoutInformation.vue
+++ b/viewer/src/views/layout/left/LayoutInformation.vue
@@ -67,6 +67,7 @@ const formatDate = computed(() => {
67.infopanel { 67.infopanel {
68 padding: 2px 2px 7px 7px; 68 padding: 2px 2px 7px 7px;
69 overflow-wrap: break-word; 69 overflow-wrap: break-word;
70 max-height: 50%;
70 71
71 .title { 72 .title {
72 font-weight: bold; 73 font-weight: bold;
@@ -80,13 +81,6 @@ const formatDate = computed(() => {
80 > * { 81 > * {
81 margin-top: 5px; 82 margin-top: 5px;
82 } 83 }
83 ul,
84 ol {
85 margin-left: 1em;
86 }
87 ul {
88 list-style-type: disc;
89 }
90 a { 84 a {
91 color: $palette-200; 85 color: $palette-200;
92 &:hover { 86 &:hover {
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));
diff --git a/viewer/src/views/layout/top/LayoutCommand.vue b/viewer/src/views/layout/top/LayoutCommand.vue
index 8919da3..85d47b6 100644
--- a/viewer/src/views/layout/top/LayoutCommand.vue
+++ b/viewer/src/views/layout/top/LayoutCommand.vue
@@ -2,7 +2,7 @@
2-- pictures into a searchable web gallery. 2-- pictures into a searchable web gallery.
3-- 3--
4-- Copyright (C) 2019-2022 Guillaume FOUET 4-- Copyright (C) 2019-2022 Guillaume FOUET
5-- 2020 Pacien TRAN-GIRARD 5-- 2020-2022 Pacien TRAN-GIRARD
6-- 6--
7-- This program is free software: you can redistribute it and/or modify 7-- This program is free software: you can redistribute it and/or modify
8-- it under the terms of the GNU Affero General Public License as 8-- it under the terms of the GNU Affero General Public License as
@@ -33,7 +33,24 @@
33 size="lg" 33 size="lg"
34 /> 34 />
35 </LdLink> 35 </LdLink>
36 <LayoutCommandSort :tabindex="20" /> 36
37 <LdLink
38 v-if="itemResourceUrl"
39 :title="t('command.download')"
40 :download="navigation.getFileName(props.item)"
41 :href="itemResourceUrl"
42 :tabindex="20"
43 >
44 <fa-icon
45 :icon="faFileDownload"
46 size="lg"
47 />
48 </LdLink>
49 <LayoutCommandSort
50 v-else
51 :tabindex="20"
52 />
53
37 <LdLink 54 <LdLink
38 :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }" 55 :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }"
39 :title="t('command.back')" 56 :title="t('command.back')"
@@ -66,22 +83,34 @@
66<script setup lang="ts"> 83<script setup lang="ts">
67import { Item } from '@/@types/gallery'; 84import { Item } from '@/@types/gallery';
68import LdLink from '@/components/LdLink.vue'; 85import LdLink from '@/components/LdLink.vue';
86import { useNavigation } from '@/services/navigation';
87import { useItemResource } from '@/services/ui/ldItemResourceUrl';
69import { useUiStore } from '@/store/uiStore'; 88import { useUiStore } from '@/store/uiStore';
70import { faAngleDoubleLeft, faArrowLeft, faFolder, faLevelUpAlt, faSearch } from '@fortawesome/free-solid-svg-icons'; 89import {
90 faAngleDoubleLeft,
91 faArrowLeft,
92 faFileDownload,
93 faFolder,
94 faLevelUpAlt,
95 faSearch,
96} from '@fortawesome/free-solid-svg-icons';
71import { computedEager } from '@vueuse/shared'; 97import { computedEager } from '@vueuse/shared';
72import { computed } from 'vue'; 98import { computed, PropType, toRef } from 'vue';
73import { useI18n } from 'vue-i18n'; 99import { useI18n } from 'vue-i18n';
74import { useRoute, useRouter } from 'vue-router'; 100import { useRoute, useRouter } from 'vue-router';
75import LayoutCommandSort from './LayoutCommandSort.vue'; 101import LayoutCommandSort from './LayoutCommandSort.vue';
76 102
77const props = defineProps({ 103const props = defineProps({
78 currentItemPath: { type: Array<Item>, required: true }, 104 currentItemPath: { type: Array<Item>, required: true },
105 item: { type: Object as PropType<Item>, required: true },
79}); 106});
80 107
81const { t } = useI18n(); 108const { t } = useI18n();
82const route = useRoute(); 109const route = useRoute();
83const router = useRouter(); 110const router = useRouter();
84const uiStore = useUiStore(); 111const uiStore = useUiStore();
112const navigation = useNavigation();
113const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
85 114
86const commandToggleSearchPanelIcon = computed(() => uiStore.fullWidth ? faSearch : faAngleDoubleLeft); 115const commandToggleSearchPanelIcon = computed(() => uiStore.fullWidth ? faSearch : faAngleDoubleLeft);
87const isRoot = computedEager(() => props.currentItemPath.length <= 1 && !uiStore.searchMode); 116const isRoot = computedEager(() => props.currentItemPath.length <= 1 && !uiStore.searchMode);
diff --git a/viewer/src/views/layout/top/LayoutTop.vue b/viewer/src/views/layout/top/LayoutTop.vue
index b755c42..02c8b7b 100644
--- a/viewer/src/views/layout/top/LayoutTop.vue
+++ b/viewer/src/views/layout/top/LayoutTop.vue
@@ -18,8 +18,14 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="flex"> 21 <div
22 <LayoutCommand :current-item-path="galleryStore.currentItemPath" /> 22 v-if="galleryStore.currentItem"
23 class="flex"
24 >
25 <LayoutCommand
26 :current-item-path="galleryStore.currentItemPath"
27 :item="galleryStore.currentItem"
28 />
23 <LayoutBreadcrumb 29 <LayoutBreadcrumb
24 :current-item-path="galleryStore.currentItemPath" 30 :current-item-path="galleryStore.currentItemPath"
25 :search-mode="uiStore.searchMode" 31 :search-mode="uiStore.searchMode"