diff options
author | pacien | 2022-11-06 20:23:11 +0100 |
---|---|---|
committer | GitHub | 2022-11-06 20:23:11 +0100 |
commit | bb3b0eae37a7214a3a4a6a1e4354e6f082adf15e (patch) | |
tree | 2e5436e819f8e93a1115a8142594ca80fd507bc1 /viewer | |
parent | f864eeca506331c1dee2cd3f5f0df4fe806f303a (diff) | |
parent | cfbff75f78963e3d24326f731590e78a4d719e9e (diff) | |
download | ldgallery-bb3b0eae37a7214a3a4a6a1e4354e6f082adf15e.tar.gz |
Merge pull request #347 from ldgallery/p_viewer_download_button
viewer/command: add item download button
Diffstat (limited to 'viewer')
-rw-r--r-- | viewer/ldgallery-viewer.7.md | 1 | ||||
-rw-r--r-- | viewer/src/locales/en.yml | 1 | ||||
-rw-r--r-- | viewer/src/services/ui/ldItemResourceUrl.ts | 8 | ||||
-rw-r--r-- | viewer/src/views/ItemThumbnail.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/AudioViewer.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/DownloadViewer.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/MarkdownViewer.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/PdfViewer.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/PictureViewer.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/PlainTextViewer.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/VideoViewer.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/layout/top/LayoutCommand.vue | 37 | ||||
-rw-r--r-- | viewer/src/views/layout/top/LayoutTop.vue | 10 |
13 files changed, 63 insertions, 26 deletions
diff --git a/viewer/ldgallery-viewer.7.md b/viewer/ldgallery-viewer.7.md index 736f61f..46509fb 100644 --- a/viewer/ldgallery-viewer.7.md +++ b/viewer/ldgallery-viewer.7.md | |||
@@ -41,6 +41,7 @@ Items of the following formats can be opened and visualised within the web appli | |||
41 | * PDFs | 41 | * PDFs |
42 | 42 | ||
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 | The item being visualised can be downloaded using the download button at the top-left corner. | ||
44 | 45 | ||
45 | 46 | ||
46 | # KEYBOARD SHORTCUTS | 47 | # KEYBOARD SHORTCUTS |
diff --git a/viewer/src/locales/en.yml b/viewer/src/locales/en.yml index acbe24b..86ecd49 100644 --- a/viewer/src/locales/en.yml +++ b/viewer/src/locales/en.yml | |||
@@ -1,6 +1,7 @@ | |||
1 | command: | 1 | command: |
2 | back: Go back | 2 | back: Go back |
3 | parent: Go to parent directory | 3 | parent: Go to parent directory |
4 | download: Download | ||
4 | search: | 5 | search: |
5 | clear: Clear | 6 | clear: Clear |
6 | search: Search | 7 | search: Search |
diff --git a/viewer/src/services/ui/ldItemResourceUrl.ts b/viewer/src/services/ui/ldItemResourceUrl.ts index 7db7ab9..d6734b3 100644 --- a/viewer/src/services/ui/ldItemResourceUrl.ts +++ b/viewer/src/services/ui/ldItemResourceUrl.ts | |||
@@ -1,12 +1,12 @@ | |||
1 | import { Item } from '@/@types/gallery'; | 1 | import { Item } from '@/@types/gallery'; |
2 | import { useGalleryStore } from '@/store/galleryStore'; | 2 | import { useGalleryStore } from '@/store/galleryStore'; |
3 | import { computed } from 'vue'; | 3 | import { computed, ToRef } from 'vue'; |
4 | import { isDownloadableItem } from '../itemGuards'; | 4 | import { isDownloadableItem } from '../itemGuards'; |
5 | 5 | ||
6 | export const useItemResource = (item: Item) => { | 6 | export const useItemResource = (item: ToRef<Item>) => { |
7 | const galleryStore = useGalleryStore(); | 7 | const galleryStore = useGalleryStore(); |
8 | const itemResourceUrl = computed(() => isDownloadableItem(item) ? galleryStore.resourceRoot + item.properties.resource : ''); | 8 | const itemResourceUrl = computed(() => isDownloadableItem(item.value) ? galleryStore.resourceRoot + item.value.properties.resource : ''); |
9 | const thumbnailResourceUrl = computed(() => item.thumbnail ? galleryStore.resourceRoot + item.thumbnail.resource : ''); | 9 | const thumbnailResourceUrl = computed(() => item.value.thumbnail ? galleryStore.resourceRoot + item.value.thumbnail.resource : ''); |
10 | 10 | ||
11 | return { | 11 | return { |
12 | itemResourceUrl, | 12 | itemResourceUrl, |
diff --git a/viewer/src/views/ItemThumbnail.vue b/viewer/src/views/ItemThumbnail.vue index bf33043..afd0e48 100644 --- a/viewer/src/views/ItemThumbnail.vue +++ b/viewer/src/views/ItemThumbnail.vue | |||
@@ -50,7 +50,7 @@ import { Item } from '@/@types/gallery'; | |||
50 | import { useNavigation } from '@/services/navigation'; | 50 | import { useNavigation } from '@/services/navigation'; |
51 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; | 51 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; |
52 | import VLazyImage from 'v-lazy-image'; | 52 | import VLazyImage from 'v-lazy-image'; |
53 | import { computed, PropType, ref } from 'vue'; | 53 | import { computed, PropType, ref, toRef } from 'vue'; |
54 | 54 | ||
55 | const props = defineProps({ | 55 | const props = defineProps({ |
56 | item: { type: Object as PropType<Item>, required: true }, | 56 | item: { type: Object as PropType<Item>, required: true }, |
@@ -60,7 +60,7 @@ const navigation = useNavigation(); | |||
60 | 60 | ||
61 | const loading = ref(false); | 61 | const loading = ref(false); |
62 | 62 | ||
63 | const { thumbnailResourceUrl } = useItemResource(props.item); | 63 | const { thumbnailResourceUrl } = useItemResource(toRef(props, 'item')); |
64 | 64 | ||
65 | const pictureStyle = computed(() => { | 65 | const pictureStyle = computed(() => { |
66 | const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 }; | 66 | const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 }; |
diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue index bbba7e5..124d132 100644 --- a/viewer/src/views/item_handlers/AudioViewer.vue +++ b/viewer/src/views/item_handlers/AudioViewer.vue | |||
@@ -43,7 +43,7 @@ | |||
43 | import { AudioItem } from '@/@types/gallery'; | 43 | import { AudioItem } from '@/@types/gallery'; |
44 | import { useNavigation } from '@/services/navigation'; | 44 | import { useNavigation } from '@/services/navigation'; |
45 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; | 45 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; |
46 | import { computed, PropType } from 'vue'; | 46 | import { computed, PropType, toRef } from 'vue'; |
47 | import { useI18n } from 'vue-i18n'; | 47 | import { useI18n } from 'vue-i18n'; |
48 | import ItemThumbnail from '../ItemThumbnail.vue'; | 48 | import ItemThumbnail from '../ItemThumbnail.vue'; |
49 | 49 | ||
@@ -54,7 +54,7 @@ const props = defineProps({ | |||
54 | const { t } = useI18n(); | 54 | const { t } = useI18n(); |
55 | const navigation = useNavigation(); | 55 | const navigation = useNavigation(); |
56 | 56 | ||
57 | const { itemResourceUrl } = useItemResource(props.item); | 57 | const { itemResourceUrl } = useItemResource(toRef(props, 'item')); |
58 | const itemFileName = computed(() => navigation.getFileName(props.item)); | 58 | const itemFileName = computed(() => navigation.getFileName(props.item)); |
59 | </script> | 59 | </script> |
60 | 60 | ||
diff --git a/viewer/src/views/item_handlers/DownloadViewer.vue b/viewer/src/views/item_handlers/DownloadViewer.vue index 6562bee..c627d3e 100644 --- a/viewer/src/views/item_handlers/DownloadViewer.vue +++ b/viewer/src/views/item_handlers/DownloadViewer.vue | |||
@@ -41,7 +41,7 @@ import { DownloadableItem } from '@/@types/gallery'; | |||
41 | import { useNavigation } from '@/services/navigation'; | 41 | import { useNavigation } from '@/services/navigation'; |
42 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; | 42 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; |
43 | import { faFileDownload } from '@fortawesome/free-solid-svg-icons'; | 43 | import { faFileDownload } from '@fortawesome/free-solid-svg-icons'; |
44 | import { computed, PropType } from 'vue'; | 44 | import { computed, PropType, toRef } from 'vue'; |
45 | import { useI18n } from 'vue-i18n'; | 45 | import { useI18n } from 'vue-i18n'; |
46 | 46 | ||
47 | const props = defineProps({ | 47 | const props = defineProps({ |
@@ -52,7 +52,7 @@ const { t } = useI18n(); | |||
52 | const navigation = useNavigation(); | 52 | const navigation = useNavigation(); |
53 | 53 | ||
54 | const itemFileName = computed(() => navigation.getFileName(props.item)); | 54 | const itemFileName = computed(() => navigation.getFileName(props.item)); |
55 | const { itemResourceUrl } = useItemResource(props.item); | 55 | const { itemResourceUrl } = useItemResource(toRef(props, 'item')); |
56 | </script> | 56 | </script> |
57 | 57 | ||
58 | <style lang="scss" module> | 58 | <style lang="scss" module> |
diff --git a/viewer/src/views/item_handlers/MarkdownViewer.vue b/viewer/src/views/item_handlers/MarkdownViewer.vue index d5ac7e2..574029f 100644 --- a/viewer/src/views/item_handlers/MarkdownViewer.vue +++ b/viewer/src/views/item_handlers/MarkdownViewer.vue | |||
@@ -33,13 +33,13 @@ import { LdMarkdown } from '@/components/async'; | |||
33 | import LdLoading from '@/components/LdLoading.vue'; | 33 | import LdLoading from '@/components/LdLoading.vue'; |
34 | import { useLdFetch } from '@/services/api/ldFetch'; | 34 | import { useLdFetch } from '@/services/api/ldFetch'; |
35 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; | 35 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; |
36 | import { PropType } from 'vue'; | 36 | import { PropType, toRef } from 'vue'; |
37 | 37 | ||
38 | const props = defineProps({ | 38 | const props = defineProps({ |
39 | item: { type: Object as PropType<MarkdownItem>, required: true }, | 39 | item: { type: Object as PropType<MarkdownItem>, required: true }, |
40 | }); | 40 | }); |
41 | 41 | ||
42 | const { itemResourceUrl } = useItemResource(props.item); | 42 | const { itemResourceUrl } = useItemResource(toRef(props, 'item')); |
43 | const { isFetching, data, error } = useLdFetch(itemResourceUrl).text(); | 43 | const { isFetching, data, error } = useLdFetch(itemResourceUrl).text(); |
44 | </script> | 44 | </script> |
45 | 45 | ||
diff --git a/viewer/src/views/item_handlers/PdfViewer.vue b/viewer/src/views/item_handlers/PdfViewer.vue index 29f8033..a6ba273 100644 --- a/viewer/src/views/item_handlers/PdfViewer.vue +++ b/viewer/src/views/item_handlers/PdfViewer.vue | |||
@@ -36,13 +36,13 @@ | |||
36 | <script setup lang="ts"> | 36 | <script setup lang="ts"> |
37 | import { PDFItem } from '@/@types/gallery'; | 37 | import { PDFItem } from '@/@types/gallery'; |
38 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; | 38 | import { useItemResource } from '@/services/ui/ldItemResourceUrl'; |
39 | import { PropType } from 'vue'; | 39 | import { PropType, toRef } from 'vue'; |
40 | import DownloadViewer from './DownloadViewer.vue'; | 40 | import DownloadViewer from './DownloadViewer.vue'; |
41 | 41 | ||
42 | const props = defineProps({ | 42 | const props = defineProps({ |
43 | item: { type: Object as PropType<PDFItem>, required: true }, | 43 | item: { type: Object as PropType<PDFItem>, required: true }, |
44 | }); | 44 | }); |
45 | 45 | ||
46 | const { itemResourceUrl } = useItemResource(props.item); | 46 | const { itemResourceUrl } = useItemResource(toRef(props, 'item')); |
47 | 47 | ||
48 | </script> | 48 | </script> |
diff --git a/viewer/src/views/item_handlers/PictureViewer.vue b/viewer/src/views/item_handlers/PictureViewer.vue index 10055fd..74b978f 100644 --- a/viewer/src/views/item_handlers/PictureViewer.vue +++ b/viewer/src/views/item_handlers/PictureViewer.vue | |||
@@ -46,7 +46,7 @@ import { useLdZoom } from '@/services/ui/ldZoom'; | |||
46 | import { useUiStore } from '@/store/uiStore'; | 46 | import { useUiStore } from '@/store/uiStore'; |
47 | import { unrefElement, VueInstance } from '@vueuse/core'; | 47 | import { unrefElement, VueInstance } from '@vueuse/core'; |
48 | import { createToast } from 'mosha-vue-toastify'; | 48 | import { createToast } from 'mosha-vue-toastify'; |
49 | import { CSSProperties, onMounted, onUnmounted, PropType, ref } from 'vue'; | 49 | import { CSSProperties, onMounted, onUnmounted, PropType, ref, toRef } from 'vue'; |
50 | import { useI18n } from 'vue-i18n'; | 50 | import { useI18n } from 'vue-i18n'; |
51 | 51 | ||
52 | const props = defineProps({ | 52 | const props = defineProps({ |
@@ -63,7 +63,7 @@ const loader = ref(false); | |||
63 | const containerElement = ref<HTMLDivElement>(); | 63 | const containerElement = ref<HTMLDivElement>(); |
64 | const imageElement = ref<VueInstance>(); | 64 | const imageElement = ref<VueInstance>(); |
65 | 65 | ||
66 | const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item); | 66 | const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(toRef(props, 'item')); |
67 | 67 | ||
68 | onMounted(() => { | 68 | onMounted(() => { |
69 | generateSlowLoadingStyle(); | 69 | generateSlowLoadingStyle(); |