diff options
author | Zéro~Informatique | 2022-11-06 19:34:26 +0100 |
---|---|---|
committer | Zéro~Informatique | 2022-11-06 19:41:44 +0100 |
commit | cfbff75f78963e3d24326f731590e78a4d719e9e (patch) | |
tree | 2e5436e819f8e93a1115a8142594ca80fd507bc1 /viewer/src/views/layout/top | |
parent | 12eb302bcc93405f81b676b1a29a9731a5fec9be (diff) | |
download | ldgallery-cfbff75f78963e3d24326f731590e78a4d719e9e.tar.gz |
viewer/command: add item download button
Fixed a reactivity issue with props used in a composition function (useItemResource)
Fixed crash with null items in LayoutTop
Changed how downloadable items are identified: We use the fact they are materialized in the gallery instead of a hardly defined "listing condition". This also simplifies the code.
Diffstat (limited to 'viewer/src/views/layout/top')
-rw-r--r-- | viewer/src/views/layout/top/LayoutCommand.vue | 35 | ||||
-rw-r--r-- | viewer/src/views/layout/top/LayoutTop.vue | 5 |
2 files changed, 17 insertions, 23 deletions
diff --git a/viewer/src/views/layout/top/LayoutCommand.vue b/viewer/src/views/layout/top/LayoutCommand.vue index d930fd2..85d47b6 100644 --- a/viewer/src/views/layout/top/LayoutCommand.vue +++ b/viewer/src/views/layout/top/LayoutCommand.vue | |||
@@ -34,14 +34,10 @@ | |||
34 | /> | 34 | /> |
35 | </LdLink> | 35 | </LdLink> |
36 | 36 | ||
37 | <LayoutCommandSort | 37 | <LdLink |
38 | v-if="isListing" | 38 | v-if="itemResourceUrl" |
39 | :tabindex="20" | ||
40 | /> | ||
41 | <a | ||
42 | v-else | ||
43 | :title="t('command.download')" | 39 | :title="t('command.download')" |
44 | :download="itemFileName" | 40 | :download="navigation.getFileName(props.item)" |
45 | :href="itemResourceUrl" | 41 | :href="itemResourceUrl" |
46 | :tabindex="20" | 42 | :tabindex="20" |
47 | > | 43 | > |
@@ -49,7 +45,11 @@ | |||
49 | :icon="faFileDownload" | 45 | :icon="faFileDownload" |
50 | size="lg" | 46 | size="lg" |
51 | /> | 47 | /> |
52 | </a> | 48 | </LdLink> |
49 | <LayoutCommandSort | ||
50 | v-else | ||
51 | :tabindex="20" | ||
52 | /> | ||
53 | 53 | ||
54 | <LdLink | 54 | <LdLink |
55 | :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }" | 55 | :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }" |
@@ -83,20 +83,19 @@ | |||
83 | <script setup lang="ts"> | 83 | <script setup lang="ts"> |
84 | import { Item } from '@/@types/gallery'; | 84 | import { Item } from '@/@types/gallery'; |
85 | import LdLink from '@/components/LdLink.vue'; | 85 | import LdLink from '@/components/LdLink.vue'; |
86 | import { useUiStore } from '@/store/uiStore'; | ||
87 | import { useGalleryStore } from '@/store/galleryStore'; | ||
88 | import { useNavigation } from '@/services/navigation'; | 86 | import { useNavigation } from '@/services/navigation'; |
89 | import { isDirectory, isDownloadableItem } from '@/services/itemGuards'; | 87 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; |
88 | import { useUiStore } from '@/store/uiStore'; | ||
90 | import { | 89 | import { |
91 | faAngleDoubleLeft, | 90 | faAngleDoubleLeft, |
92 | faArrowLeft, | 91 | faArrowLeft, |
92 | faFileDownload, | ||
93 | faFolder, | 93 | faFolder, |
94 | faLevelUpAlt, | 94 | faLevelUpAlt, |
95 | faSearch, | 95 | faSearch, |
96 | faFileDownload, | ||
97 | } from '@fortawesome/free-solid-svg-icons'; | 96 | } from '@fortawesome/free-solid-svg-icons'; |
98 | import { computedEager } from '@vueuse/shared'; | 97 | import { computedEager } from '@vueuse/shared'; |
99 | import { computed, PropType } from 'vue'; | 98 | import { computed, PropType, toRef } from 'vue'; |
100 | import { useI18n } from 'vue-i18n'; | 99 | import { useI18n } from 'vue-i18n'; |
101 | import { useRoute, useRouter } from 'vue-router'; | 100 | import { useRoute, useRouter } from 'vue-router'; |
102 | import LayoutCommandSort from './LayoutCommandSort.vue'; | 101 | import LayoutCommandSort from './LayoutCommandSort.vue'; |
@@ -110,16 +109,8 @@ const { t } = useI18n(); | |||
110 | const route = useRoute(); | 109 | const route = useRoute(); |
111 | const router = useRouter(); | 110 | const router = useRouter(); |
112 | const uiStore = useUiStore(); | 111 | const uiStore = useUiStore(); |
113 | const galleryStore = useGalleryStore(); | ||
114 | const navigation = useNavigation(); | 112 | const navigation = useNavigation(); |
115 | 113 | const { itemResourceUrl } = useItemResource(toRef(props, 'item')); | |
116 | const isListing = computedEager(() => !props.item || isDirectory(props.item)); | ||
117 | const itemFileName = computed(() => navigation.getFileName(props.item)); | ||
118 | const itemResourceUrl = computed(() => | ||
119 | isDownloadableItem(props.item) | ||
120 | ? galleryStore.resourceRoot + props.item.properties.resource | ||
121 | : '', | ||
122 | ); | ||
123 | 114 | ||
124 | const commandToggleSearchPanelIcon = computed(() => uiStore.fullWidth ? faSearch : faAngleDoubleLeft); | 115 | const commandToggleSearchPanelIcon = computed(() => uiStore.fullWidth ? faSearch : faAngleDoubleLeft); |
125 | const isRoot = computedEager(() => props.currentItemPath.length <= 1 && !uiStore.searchMode); | 116 | const 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 0362840..02c8b7b 100644 --- a/viewer/src/views/layout/top/LayoutTop.vue +++ b/viewer/src/views/layout/top/LayoutTop.vue | |||
@@ -18,7 +18,10 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div class="flex"> | 21 | <div |
22 | v-if="galleryStore.currentItem" | ||
23 | class="flex" | ||
24 | > | ||
22 | <LayoutCommand | 25 | <LayoutCommand |
23 | :current-item-path="galleryStore.currentItemPath" | 26 | :current-item-path="galleryStore.currentItemPath" |
24 | :item="galleryStore.currentItem" | 27 | :item="galleryStore.currentItem" |