refactor: add colors to config, updated readme

README.md

@@ -201,96 +201,100 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
   {
     "entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
     "annotations": {
-        "types": [
-          {
-            "contenttype": "Person",
-            "icon": "fasUser",
-            "label": "Names"
-          },
-          {
-            "contenttype": "Place",
-            "icon": "fasMapMarkerAlt",
-            "label": "Places"
-          },
-          {
-            "contenttype": "Editorial Comment",
-            "icon": "fasComment",
-            "label": "Comments"
-          },
-          {
-            "contenttype": "Motif",
-            "icon": "fasHighlighter",
-            "label": "Motifs"
-          }
-        ],
-        "tabs": {
-          "Editorial": ["Person", "Place", "Editorial Comment"],
-          "Motif": ["Motif"]
-        }
-      },
-      "colors": {
-        "primary": "",
-        "secondary": "",
-        "accent": ""
-      },
-      "header_section": {
-        "show": true,
-        "navigation": true,
-        "panelheadings": true,
-        "titles": true,
-        "toggle": true
-      },
-      "labels": {
-        "item": "Sheet",
-        "manifest": "Manuscript"
-      },
-      "meta": {
-        "collection": {
-          "all": true
-        },
-        "manifest": {
-          "all": true
-        },
-        "item": {
-          "all": true
-        }
-    },
-      "panels": [
+      "types": [
         {
-          "connector": [1, 2],
-          "panel_label": "Contents & Meta",
-          "show": true,
-          "toggle": true
+          "contenttype": "Person",
+          "icon": "fasUser",
+          "label": "Names"
         },
         {
-          "connector": [3],
-          "panel_label": "Image",
-          "show": true,
-          "toggle": true
+          "contenttype": "Place",
+          "icon": "fasMapMarkerAlt",
+          "label": "Places"
         },
         {
-          "connector": [4],
-          "panel_label": "Text",
-          "show": true,
-          "toggle": true
+          "contenttype": "Editorial Comment",
+          "icon": "fasComment",
+          "label": "Comments"
         },
         {
-          "connector": [5],
-          "panel_label": "Annotations",
-          "show": true,
-          "toggle": true
+          "contenttype": "Motif",
+          "icon": "fasHighlighter",
+          "label": "Motifs"
         }
       ],
-      "rtl": false,
-      "lang": "en-us",
-      "standalone": true,
-      "breadcrumbNavigation": {
+      "tabs": {
+        "Editorial": ["Person", "Place", "Editorial Comment"],
+        "Motif": ["Motif"]
+      }
+    },
+    "colors": {
+      "primary": "",
+      "secondary": "",
+      "accent": ""
+    },
+    "header_section": {
+      "show": true,
+      "navigation": true,
+      "panelheadings": true,
+      "titles": true,
+      "toggle": true
+    },
+    "labels": {
+      "item": "Sheet",
+      "manifest": "Manuscript"
+    },
+    "meta": {
+      "collection": {
+        "all": true
+      },
+      "manifest": {
+        "all": true
+      },
+      "item": {
+        "all": true
+      }
+    },
+    "notificationColors": {
+      "info":"blue-9",
+      "warning":"red-9"
+    },
+    "panels": [
+      {
+        "connector": [1, 2],
+        "panel_label": "Contents & Meta",
+        "show": true,
+        "toggle": true
+      },
+      {
+        "connector": [3],
+        "panel_label": "Image",
+        "show": true,
+        "toggle": true
+      },
+      {
+        "connector": [4],
+        "panel_label": "Text",
+        "show": true,
+        "toggle": true
+      },
+      {
+        "connector": [5],
+        "panel_label": "Annotations",
         "show": true,
-        "title_homepage_key": "title_homepage",
-        "title_viewer_key": "title_viewer",
-        "website": "https://subugoe.pages.gwdg.de/ahiqar/website/"
+        "toggle": true
       }
-    }  </script>
+    ],
+    "rtl": false,
+    "lang": "en-us",
+    "standalone": true,
+    "breadcrumbNavigation": {
+      "show": true,
+      "title_homepage_key": "title_homepage",
+      "title_viewer_key": "title_viewer",
+      "website": "https://subugoe.pages.gwdg.de/ahiqar/website/"
+    }
+  }  </script>
 ```
 
 **Note**: It's a *JSON* object. So if you are going to make any changes and you have to quote these (e.g. see *labels* or *colors*), please use **double quotes** only.
@@ -399,6 +403,18 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
 
       Defaults to `Manuscript`
 
+- **notificationColors**
+
+  sets the colors used in frontend to apply for icons in notification messages.
+
+  `info` and `warning` are set to `blue-9` `red-9` respectively which can be changed according to the project requirements.
+
+  There is a re-usable component called notification.vue (src/components/notification.vue) which receives the type of notification (ex: `info` or `warning`). Based on the type we send, this component searches for it and it's respective icon which in turn get's displayed before the title message of Notifications.
+
+  If we do not send any type, than there is no `icon` set to the notification message.
+
+  **Note**: Can add additional types ex: `success`, `error`, `positive`, `negative`. Based on these we need to add them at the component level as well and their icons respectively.
+
 - **rtl (right to left)**
 
     refers to the direction the text inside the text panel will be displayed.

src/components/annotations/annotations.vue

@@ -34,6 +34,7 @@
     >
       <Notification
         :message="$t(messages.none)"
+        :notification-colors="config.notificationColors"
         title-key="annotationInfoTitle"
         type="info"
       />

src/components/notification.vue

@@ -34,6 +34,10 @@ export default {
       type: String,
       default: () => '',
     },
+    notificationColors: {
+      type: Object,
+      default: () => {},
+    },
     titleKey: {
       type: String,
       default: () => '',
@@ -52,11 +56,11 @@ export default {
     color() {
       switch (this.type) {
         case 'info':
-          return 'red-9';
+          return this.notificationColors?.info ? this.notificationColors.info : '';
         case 'warning':
-          return 'yellow-9';
+          return this.notificationColors?.warning ? this.notificationColors.warning : '';
         default:
-          return 'red-9';
+          return '';
       }
     },
     icon() {
@@ -66,7 +70,7 @@ export default {
         case 'warning':
           return fasExclamationTriangle;
         default:
-          return fasInfoCircle;
+          return '';
       }
     },
   },

src/index.template.html

@@ -88,6 +88,10 @@
           "all": true
         }
       },
+      "notificationColors": {
+        "info":"blue-9",
+        "warning":"red-9"
+      },
       "panels": [
         {
           "connector": [1, 2],