diff options
-rw-r--r-- | viewer/src/plugins/fontawesome.ts | 2 | ||||
-rw-r--r-- | viewer/src/tools.ts | 12 | ||||
-rw-r--r-- | viewer/src/views/GalleryThumbnail.vue | 11 | ||||
-rw-r--r-- | viewer/src/views/TopBreadcrumb.vue | 9 |
4 files changed, 24 insertions, 10 deletions
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts index fdbfcdb..460e407 100644 --- a/viewer/src/plugins/fontawesome.ts +++ b/viewer/src/plugins/fontawesome.ts | |||
@@ -33,6 +33,7 @@ import { | |||
33 | faTags, | 33 | faTags, |
34 | faAngleRight, | 34 | faAngleRight, |
35 | faWindowClose, | 35 | faWindowClose, |
36 | faQuestionCircle, | ||
36 | } from "@fortawesome/free-solid-svg-icons"; | 37 | } from "@fortawesome/free-solid-svg-icons"; |
37 | 38 | ||
38 | library.add( | 39 | library.add( |
@@ -47,6 +48,7 @@ library.add( | |||
47 | faTags, | 48 | faTags, |
48 | faAngleRight, | 49 | faAngleRight, |
49 | faWindowClose, | 50 | faWindowClose, |
51 | faQuestionCircle, | ||
50 | ); | 52 | ); |
51 | 53 | ||
52 | Vue.component("fa-icon", FontAwesomeIcon); | 54 | Vue.component("fa-icon", FontAwesomeIcon); |
diff --git a/viewer/src/tools.ts b/viewer/src/tools.ts index 57a889d..94fdf33 100644 --- a/viewer/src/tools.ts +++ b/viewer/src/tools.ts | |||
@@ -43,5 +43,17 @@ export default class Tools { | |||
43 | ]; | 43 | ]; |
44 | } | 44 | } |
45 | 45 | ||
46 | public static getIcon(item: Gallery.Item): string { | ||
47 | if (item.path.length <= 1) return "home"; | ||
48 | switch (item.properties.type) { | ||
49 | case "picture": | ||
50 | return "image"; | ||
51 | case "directory": | ||
52 | return "folder"; | ||
53 | case "other": | ||
54 | default: | ||
55 | return "question-circle"; | ||
56 | } | ||
57 | } | ||
46 | 58 | ||
47 | } \ No newline at end of file | 59 | } \ No newline at end of file |
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue index 2ed0bc2..2a372cd 100644 --- a/viewer/src/views/GalleryThumbnail.vue +++ b/viewer/src/views/GalleryThumbnail.vue | |||
@@ -22,13 +22,13 @@ | |||
22 | <v-lazy-image | 22 | <v-lazy-image |
23 | v-if="item.thumbnail" | 23 | v-if="item.thumbnail" |
24 | class="thumbnail" | 24 | class="thumbnail" |
25 | :src="pictureSrc" | 25 | :src="pictureSrc()" |
26 | :title="item.path" | 26 | :title="item.path" |
27 | @intersect="loading=true" | 27 | @intersect="loading=true" |
28 | @load="loading=false" | 28 | @load="loading=false" |
29 | /> | 29 | /> |
30 | <div v-else class="flex-column flex-center"> | 30 | <div v-else class="flex-column flex-center"> |
31 | <fa-icon icon="folder" size="4x" /> | 31 | <fa-icon :icon="getIcon()" size="4x" /> |
32 | {{item.title}} | 32 | {{item.title}} |
33 | </div> | 33 | </div> |
34 | </div> | 34 | </div> |
@@ -36,6 +36,7 @@ | |||
36 | 36 | ||
37 | <script lang="ts"> | 37 | <script lang="ts"> |
38 | import { Component, Vue, Prop } from "vue-property-decorator"; | 38 | import { Component, Vue, Prop } from "vue-property-decorator"; |
39 | import Tools from "@/tools"; | ||
39 | 40 | ||
40 | @Component | 41 | @Component |
41 | export default class GalleryThumbnail extends Vue { | 42 | export default class GalleryThumbnail extends Vue { |
@@ -43,9 +44,13 @@ export default class GalleryThumbnail extends Vue { | |||
43 | 44 | ||
44 | loading: boolean = false; | 45 | loading: boolean = false; |
45 | 46 | ||
46 | get pictureSrc() { | 47 | pictureSrc() { |
47 | return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`; | 48 | return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`; |
48 | } | 49 | } |
50 | |||
51 | getIcon() { | ||
52 | return Tools.getIcon(this.item); | ||
53 | } | ||
49 | } | 54 | } |
50 | </script> | 55 | </script> |
51 | 56 | ||
diff --git a/viewer/src/views/TopBreadcrumb.vue b/viewer/src/views/TopBreadcrumb.vue index eb7fdd1..9104b80 100644 --- a/viewer/src/views/TopBreadcrumb.vue +++ b/viewer/src/views/TopBreadcrumb.vue | |||
@@ -31,17 +31,12 @@ | |||
31 | 31 | ||
32 | <script lang="ts"> | 32 | <script lang="ts"> |
33 | import { Component, Vue } from "vue-property-decorator"; | 33 | import { Component, Vue } from "vue-property-decorator"; |
34 | import Tools from "@/tools"; | ||
34 | 35 | ||
35 | @Component | 36 | @Component |
36 | export default class TopBreadcrumb extends Vue { | 37 | export default class TopBreadcrumb extends Vue { |
37 | getIcon(item: Gallery.Item) { | 38 | getIcon(item: Gallery.Item) { |
38 | if (item.path.length <= 1) return "home"; | 39 | return Tools.getIcon(item); |
39 | switch (item.properties.type) { | ||
40 | case "picture": | ||
41 | return "image"; | ||
42 | case "directory": | ||
43 | return "folder"; | ||
44 | } | ||
45 | } | 40 | } |
46 | } | 41 | } |
47 | </script> | 42 | </script> |