feat: make notification component configurable

src/components/annotations/annotations.vue

@@ -32,7 +32,11 @@
       v-else
       class="q-pa-sm"
     >
-      <Notification :message="$t(messages.none)" />
+      <Notification
+        :message="$t(messages.none)"
+        title-key="annotationInfoTitle"
+        variant-type="info"
+      />
     </div>
 
     <AnnotationOptions

src/components/header.vue

@@ -78,7 +78,6 @@ export default {
       type: Function,
       default: () => {},
     },
-
     collectiontitle: {
       type: String,
       default: () => '',

src/components/notification.vue

@@ -5,12 +5,12 @@
   >
     <q-card-section class="text-center">
       <q-icon
-        :name="fasInfoCircle"
+        :color="variantColor"
+        :name="variantIcon"
         class="q-pr-sm"
-        color="red-9"
         size="sm"
       />
-      <span class="text-body1 text-uppercase vertical-middle">{{ $t('notificationTitle') }}</span>
+      <span class="text-body1 text-uppercase vertical-middle">{{ $t(titleKey) }}</span>
     </q-card-section>
 
     <q-separator inset />
@@ -22,7 +22,10 @@
 </template>
 
 <script>
-import { fasInfoCircle } from '@quasar/extras/fontawesome-v5';
+import {
+  fasInfoCircle,
+  fasExclamationTriangle,
+} from '@quasar/extras/fontawesome-v5';
 
 export default {
   name: 'Notification',
@@ -31,14 +34,41 @@ export default {
       type: String,
       default: () => '',
     },
+    titleKey: {
+      type: String,
+      default: () => '',
+    },
+    variantType: {
+      type: String,
+      default: () => '',
+    },
   },
   data() {
     return {
 
     };
   },
-  created() {
-    this.fasInfoCircle = fasInfoCircle;
+  computed: {
+    variantColor() {
+      switch (this.variantType) {
+        case 'info':
+          return 'red-9';
+        case 'warning':
+          return 'yellow-9';
+        default:
+          return 'red-9';
+      }
+    },
+    variantIcon() {
+      switch (this.variantType) {
+        case 'info':
+          return fasInfoCircle;
+        case 'warning':
+          return fasExclamationTriangle;
+        default:
+          return fasInfoCircle;
+      }
+    },
   },
 };
 </script>

src/i18n/de/index.js

 export default {
   Annotations: 'Annotationen',
+  annotationInfoTitle: 'Keine Annotationen verfügbar',
   changeLanguage: 'Sprache ändern',
   Collection: 'Kollektion',
   Collector: 'Kollektor',
@@ -37,7 +38,6 @@ export default {
   Metadata: 'Metadaten',
   Motifs: 'Motive',
   next: 'Näch.',
-  notificationTitle: 'Keine Annotationen verfügbar',
   noAnnotationMessage: 'Die aktuelle Ansicht enthält keine Annotationen.',
   Origin: 'Ursprung',
   osdFullPage: 'Vollbildmodus wechseln',

src/i18n/en-us/index.js

 export default {
   Annotations: 'Annotations',
+  annotationInfoTitle: 'No Annotations available',
   changeLanguage: 'Change language',
   Collection: 'Collection',
   Collector: 'Collector',
@@ -37,7 +38,6 @@ export default {
   Metadata: 'Metadata',
   Motifs: 'Motifs',
   next: 'Next',
-  notificationTitle: 'No Annotations available',
   noAnnotationMessage: 'The current view has no annotations to display.',
   Origin: 'Origin',
   osdFullPage: 'Toggle full page',

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-			"entrypoint": "",
+			"entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
       "annotations": {
         "show": true,
         "types": [