diff options
Diffstat (limited to 'viewer/src')
-rw-r--r-- | viewer/src/components/LdError.vue | 64 | ||||
-rw-r--r-- | viewer/src/components/LdGallery.vue | 8 | ||||
-rw-r--r-- | viewer/src/locales/en.json | 3 | ||||
-rw-r--r-- | viewer/src/plugins/fontawesome.ts | 2 | ||||
-rw-r--r-- | viewer/src/views/GalleryNavigation.vue | 32 |
5 files changed, 95 insertions, 14 deletions
diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue new file mode 100644 index 0000000..5e266ab --- /dev/null +++ b/viewer/src/components/LdError.vue | |||
@@ -0,0 +1,64 @@ | |||
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 | <div :class="$style.content"> | ||
24 | <fa-icon :class="$style.icon" :icon="icon" size="6x" /> | ||
25 | <div :class="$style.message" v-html="message"></div> | ||
26 | </div> | ||
27 | </div> | ||
28 | </template> | ||
29 | |||
30 | <script lang="ts"> | ||
31 | import { Component, Prop, Vue } from "vue-property-decorator"; | ||
32 | |||
33 | @Component export default class LdError extends Vue { | ||
34 | @Prop({ required: true }) readonly icon!: string; | ||
35 | @Prop({ required: true }) readonly message!: string; | ||
36 | } | ||
37 | </script> | ||
38 | |||
39 | <style lang="scss" module> | ||
40 | @import "~@/assets/scss/theme.scss"; | ||
41 | |||
42 | .container { | ||
43 | min-height: 100%; | ||
44 | display: flex; | ||
45 | align-items: center; | ||
46 | justify-content: center; | ||
47 | } | ||
48 | |||
49 | .content { | ||
50 | text-align: center; | ||
51 | |||
52 | & > *:not(last-child) { | ||
53 | margin-bottom: 0.15em; | ||
54 | } | ||
55 | } | ||
56 | |||
57 | .icon { | ||
58 | color: $disabled-color; | ||
59 | } | ||
60 | |||
61 | .message { | ||
62 | color: $text-light; | ||
63 | } | ||
64 | </style> | ||
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue index 29c18b9..e512758 100644 --- a/viewer/src/components/LdGallery.vue +++ b/viewer/src/components/LdGallery.vue | |||
@@ -18,11 +18,11 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div class="thumbnail-tiles"> | 21 | <ld-error v-if="hasNoResults()" icon="search" :message="noresult" /> |
22 | <div v-else class="thumbnail-tiles"> | ||
22 | <router-link v-for="item in items" :key="item.path" :to="item.path"> | 23 | <router-link v-for="item in items" :key="item.path" :to="item.path"> |
23 | <ld-thumbnail :item="item" /> | 24 | <ld-thumbnail :item="item" /> |
24 | </router-link> | 25 | </router-link> |
25 | <div v-if="hasNoResults()" class="noresult">{{noresult}}</div> | ||
26 | </div> | 26 | </div> |
27 | </template> | 27 | </template> |
28 | 28 | ||
@@ -47,11 +47,9 @@ export default class LdPicture extends Vue { | |||
47 | flex-wrap: wrap; | 47 | flex-wrap: wrap; |
48 | align-items: center; | 48 | align-items: center; |
49 | justify-content: space-evenly; | 49 | justify-content: space-evenly; |
50 | |||
50 | & > a { | 51 | & > a { |
51 | margin: 2px; | 52 | margin: 2px; |
52 | } | 53 | } |
53 | & .noresult { | ||
54 | margin-top: 40px; | ||
55 | } | ||
56 | } | 54 | } |
57 | </style> | 55 | </style> |
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json index e6c1df2..c011552 100644 --- a/viewer/src/locales/en.json +++ b/viewer/src/locales/en.json | |||
@@ -7,7 +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.unknowntype": "Unknown item type", | 10 | "gallery.unknown-type": "Could not display item of unknown type", |
11 | "gallery.unknown-resource": "Resource not found", | ||
11 | "command.search": "Open/close search panel", | 12 | "command.search": "Open/close search panel", |
12 | "command.search.clear": "Clear", | 13 | "command.search.clear": "Clear", |
13 | "command.search.search": "Search", | 14 | "command.search.search": "Search", |
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts index 480e8e0..933bce6 100644 --- a/viewer/src/plugins/fontawesome.ts +++ b/viewer/src/plugins/fontawesome.ts | |||
@@ -23,6 +23,7 @@ import { library, config } from "@fortawesome/fontawesome-svg-core"; | |||
23 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; | 23 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; |
24 | import { | 24 | import { |
25 | faFolder, | 25 | faFolder, |
26 | faFolderOpen, | ||
26 | faEraser, | 27 | faEraser, |
27 | faSearch, | 28 | faSearch, |
28 | faPlus, | 29 | faPlus, |
@@ -38,6 +39,7 @@ import { | |||
38 | 39 | ||
39 | library.add( | 40 | library.add( |
40 | faFolder, | 41 | faFolder, |
42 | faFolderOpen, | ||
41 | faEraser, | 43 | faEraser, |
42 | faSearch, | 44 | faSearch, |
43 | faPlus, | 45 | faPlus, |
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index 7c6d11b..08c8218 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue | |||
@@ -18,18 +18,14 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <!-- TODO: eliminate intermediate div --> | ||
21 | <div> | 22 | <div> |
22 | <gallery-search v-if="query.length" :path="path" /> | 23 | <component :is="dispatch().component" v-bind="dispatch().properties" /> |
23 | <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" /> | ||
24 | <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" /> | ||
25 | <div v-else>{{$t("gallery.unknowntype")}}</div> | ||
26 | </div> | 24 | </div> |
27 | </template> | 25 | </template> |
28 | 26 | ||
29 | <script lang="ts"> | 27 | <script lang="ts"> |
30 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; | 28 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; |
31 | import { Operation } from "@/@types/Operation"; | ||
32 | import Navigation from "@/services/navigation"; | ||
33 | import GalleryDirectory from "./GalleryDirectory.vue"; | 29 | import GalleryDirectory from "./GalleryDirectory.vue"; |
34 | import GallerySearch from "@/views/GallerySearch.vue"; | 30 | import GallerySearch from "@/views/GallerySearch.vue"; |
35 | 31 | ||
@@ -52,8 +48,28 @@ export default class GalleryNavigation extends Vue { | |||
52 | this.$galleryStore.setCurrentPath(this.path); | 48 | this.$galleryStore.setCurrentPath(this.path); |
53 | } | 49 | } |
54 | 50 | ||
55 | private checkType(type: Gallery.ItemType): boolean { | 51 | dispatch(): { component: string, properties: {} } { |
56 | return Navigation.checkType(this.$galleryStore.currentItem, type); | 52 | switch (this.$galleryStore.currentItem?.properties.type ?? null) { |
53 | case null: | ||
54 | return { | ||
55 | component: "ld-error", | ||
56 | properties: { icon: "folder-open", message: this.$t("gallery.unknown-resource") } | ||
57 | }; | ||
58 | |||
59 | case "directory": | ||
60 | return this.query.length > 0 | ||
61 | ? { component: "gallery-search", properties: { path: this.path } } | ||
62 | : { component: "gallery-directory", properties: { directory: this.$galleryStore.currentItem } }; | ||
63 | |||
64 | case "picture": | ||
65 | return { component: "ld-picture", properties: { picture: this.$galleryStore.currentItem } }; | ||
66 | |||
67 | default: | ||
68 | return { | ||
69 | component: "ld-error", | ||
70 | properties: { icon: "file", message: this.$t("gallery.unknown-type") } | ||
71 | }; | ||
72 | } | ||
57 | } | 73 | } |
58 | } | 74 | } |
59 | </script> | 75 | </script> |