aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
authorpacien2020-05-03 23:07:51 +0200
committerpacien2020-05-03 23:15:55 +0200
commit665139f7d25a64f66e1149a6403fc26efcbabb2a (patch)
tree46dd9634423540c3ac6a1ea38dc0f1857b1e95e3 /viewer/src
parent09624c0089f0e29ffb1abc578525b6a07fd95e81 (diff)
downloadldgallery-665139f7d25a64f66e1149a6403fc26efcbabb2a.tar.gz
viewer/GalleryNavigation: better error messages
Introducing a generic error page with some icon and a different error for unknown resources GitHub: closes #190
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/components/LdError.vue64
-rw-r--r--viewer/src/components/LdGallery.vue8
-rw-r--r--viewer/src/locales/en.json3
-rw-r--r--viewer/src/plugins/fontawesome.ts2
-rw-r--r--viewer/src/views/GalleryNavigation.vue32
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">
31import { 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";
23import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; 23import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
24import { 24import {
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
39library.add( 40library.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">
30import { Component, Vue, Prop, Watch } from "vue-property-decorator"; 28import { Component, Vue, Prop, Watch } from "vue-property-decorator";
31import { Operation } from "@/@types/Operation";
32import Navigation from "@/services/navigation";
33import GalleryDirectory from "./GalleryDirectory.vue"; 29import GalleryDirectory from "./GalleryDirectory.vue";
34import GallerySearch from "@/views/GallerySearch.vue"; 30import 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>