diff options
-rw-r--r-- | viewer/src/@types/gallery.d.ts | 1 | ||||
-rw-r--r-- | viewer/src/components/LdDownload.vue | 67 | ||||
-rw-r--r-- | viewer/src/locales/en.json | 2 | ||||
-rw-r--r-- | viewer/src/plugins/fontawesome.ts | 2 | ||||
-rw-r--r-- | viewer/src/views/GalleryNavigation.vue | 5 |
5 files changed, 72 insertions, 5 deletions
diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index 066aedf..3246894 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts | |||
@@ -55,6 +55,7 @@ declare namespace Gallery { | |||
55 | } | 55 | } |
56 | interface OtherProperties { | 56 | interface OtherProperties { |
57 | type: "other", | 57 | type: "other", |
58 | resource: string | ||
58 | } | 59 | } |
59 | interface PictureProperties { | 60 | interface PictureProperties { |
60 | type: "picture", | 61 | type: "picture", |
diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue new file mode 100644 index 0000000..3b13e99 --- /dev/null +++ b/viewer/src/components/LdDownload.vue | |||
@@ -0,0 +1,67 @@ | |||
1 | <!-- | ||
2 | -- ldgallery - A static generator which turns a collection of tagged | ||
3 | -- pictures into a searchable web gallery. | ||
4 | -- | ||
5 | -- Copyright (C) 2020 Pacien TRAN-GIRARD | ||
6 | -- | ||
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 | ||
9 | -- published by the Free Software Foundation, either version 3 of the | ||
10 | -- License, or (at your option) any later version. | ||
11 | -- | ||
12 | -- This program is distributed in the hope that it will be useful, | ||
13 | -- but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
14 | -- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
15 | -- GNU Affero General Public License for more details. | ||
16 | -- | ||
17 | -- You should have received a copy of the GNU Affero General Public License | ||
18 | -- along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
19 | --> | ||
20 | |||
21 | <template> | ||
22 | <div :class="$style.container"> | ||
23 | <a :class="$style.content" :download="itemFileName" :href="itemDownloadUrl"> | ||
24 | <!-- TODO: show thumbnail instead of this generic file download icon? --> | ||
25 | <fa-icon :class="$style.icon" icon="file-download" size="6x" /> | ||
26 | <div>{{ $t("download.download-file-fmt", [itemFileName]) }}</div> | ||
27 | </a> | ||
28 | </div> | ||
29 | </template> | ||
30 | |||
31 | <script lang="ts"> | ||
32 | import { Component, Prop, Vue } from "vue-property-decorator"; | ||
33 | |||
34 | @Component export default class LdDownload extends Vue { | ||
35 | @Prop({ required: true }) readonly item!: Gallery.Item; | ||
36 | |||
37 | get itemResource(): string { | ||
38 | return (this.item.properties as Gallery.OtherProperties).resource; | ||
39 | } | ||
40 | |||
41 | get itemFileName(): string { | ||
42 | const timeStamped = this.itemResource.split("/").pop() ?? ""; | ||
43 | return timeStamped.split("?")[0]; | ||
44 | } | ||
45 | |||
46 | get itemDownloadUrl(): string { | ||
47 | return this.$galleryStore.resourceRoot + this.itemResource; | ||
48 | } | ||
49 | } | ||
50 | </script> | ||
51 | |||
52 | <style lang="scss" module> | ||
53 | .container { | ||
54 | min-height: 100%; | ||
55 | display: flex; | ||
56 | align-items: center; | ||
57 | justify-content: center; | ||
58 | } | ||
59 | |||
60 | .content { | ||
61 | text-align: center; | ||
62 | } | ||
63 | |||
64 | .icon { | ||
65 | margin-bottom: 0.15em; | ||
66 | } | ||
67 | </style> | ||
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json index c011552..824064e 100644 --- a/viewer/src/locales/en.json +++ b/viewer/src/locales/en.json | |||
@@ -7,8 +7,8 @@ | |||
7 | "tag-propositions.addition": "Include all items with this tag", | 7 | "tag-propositions.addition": "Include all items with this tag", |
8 | "tag-propositions.intersection": "Search for this tag", | 8 | "tag-propositions.intersection": "Search for this tag", |
9 | "tag-propositions.item-count": "Item count", | 9 | "tag-propositions.item-count": "Item count", |
10 | "gallery.unknown-type": "Could not display item of unknown type", | ||
11 | "gallery.unknown-resource": "Resource not found", | 10 | "gallery.unknown-resource": "Resource not found", |
11 | "download.download-file-fmt": "Download {0}", | ||
12 | "command.search": "Open/close search panel", | 12 | "command.search": "Open/close search panel", |
13 | "command.search.clear": "Clear", | 13 | "command.search.clear": "Clear", |
14 | "command.search.search": "Search", | 14 | "command.search.search": "Search", |
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts index 933bce6..886d680 100644 --- a/viewer/src/plugins/fontawesome.ts +++ b/viewer/src/plugins/fontawesome.ts | |||
@@ -35,6 +35,7 @@ import { | |||
35 | faAngleRight, | 35 | faAngleRight, |
36 | faAngleDoubleLeft, | 36 | faAngleDoubleLeft, |
37 | faFile, | 37 | faFile, |
38 | faFileDownload, | ||
38 | } from "@fortawesome/free-solid-svg-icons"; | 39 | } from "@fortawesome/free-solid-svg-icons"; |
39 | 40 | ||
40 | library.add( | 41 | library.add( |
@@ -51,6 +52,7 @@ library.add( | |||
51 | faAngleRight, | 52 | faAngleRight, |
52 | faAngleDoubleLeft, | 53 | faAngleDoubleLeft, |
53 | faFile, | 54 | faFile, |
55 | faFileDownload, | ||
54 | ); | 56 | ); |
55 | 57 | ||
56 | config.autoAddCss = false; | 58 | config.autoAddCss = false; |
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index 08c8218..2e40409 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue | |||
@@ -65,10 +65,7 @@ export default class GalleryNavigation extends Vue { | |||
65 | return { component: "ld-picture", properties: { picture: this.$galleryStore.currentItem } }; | 65 | return { component: "ld-picture", properties: { picture: this.$galleryStore.currentItem } }; |
66 | 66 | ||
67 | default: | 67 | default: |
68 | return { | 68 | return { component: "ld-download", properties: { item: this.$galleryStore.currentItem } }; |
69 | component: "ld-error", | ||
70 | properties: { icon: "file", message: this.$t("gallery.unknown-type") } | ||
71 | }; | ||
72 | } | 69 | } |
73 | } | 70 | } |
74 | } | 71 | } |