Commit afb88a9b authored by dindigala's avatar dindigala
Browse files

refactor: add colors to config, updated readme

parent e70531c5
Pipeline #211943 failed with stages
in 1 minute and 21 seconds
......@@ -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.
......
......@@ -34,6 +34,7 @@
>
<Notification
:message="$t(messages.none)"
:notification-colors="config.notificationColors"
title-key="annotationInfoTitle"
type="info"
/>
......
......@@ -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 '';
}
},
},
......
......@@ -88,6 +88,10 @@
"all": true
}
},
"notificationColors": {
"info":"blue-9",
"warning":"red-9"
},
"panels": [
{
"connector": [1, 2],
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment