viewer: unknown types now show a question mark icon instead of a folder icon. this is unified with the breadcrumb

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 {
     faTags,
     faAngleRight,
     faWindowClose,
+    faQuestionCircle,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -47,6 +48,7 @@ library.add(
     faTags,
     faAngleRight,
     faWindowClose,
+    faQuestionCircle,
 );
 
 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 {
     ];
   }
 
+  public static getIcon(item: Gallery.Item): string {
+    if (item.path.length <= 1) return "home";
+    switch (item.properties.type) {
+      case "picture":
+        return "image";
+      case "directory":
+        return "folder";
+      case "other":
+      default:
+        return "question-circle";
+    }
+  }
 
 }
\ 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 @@
     <v-lazy-image
       v-if="item.thumbnail"
       class="thumbnail"
-      :src="pictureSrc"
+      :src="pictureSrc()"
       :title="item.path"
       @intersect="loading=true"
       @load="loading=false"
     />
     <div v-else class="flex-column flex-center">
-      <fa-icon icon="folder" size="4x" />
+      <fa-icon :icon="getIcon()" size="4x" />
       {{item.title}}
     </div>
   </div>
@@ -36,6 +36,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import Tools from "@/tools";
 
 @Component
 export default class GalleryThumbnail extends Vue {
@@ -43,9 +44,13 @@ export default class GalleryThumbnail extends Vue {
 
   loading: boolean = false;
 
-  get pictureSrc() {
+  pictureSrc() {
     return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
   }
+
+  getIcon() {
+    return Tools.getIcon(this.item);
+  }
 }
 </script>
 
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 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import Tools from "@/tools";
 
 @Component
 export default class TopBreadcrumb extends Vue {
   getIcon(item: Gallery.Item) {
-    if (item.path.length <= 1) return "home";
-    switch (item.properties.type) {
-      case "picture":
-        return "image";
-      case "directory":
-        return "folder";
-    }
+    return Tools.getIcon(item);
   }
 }
 </script>