Commit a14264ad authored by dindigala's avatar dindigala
Browse files

Merge branch 'feature/#312-Notification' into 'develop'

feat/#312: Make Notification component  configurable

See merge request !198
parents 497ec855 3aa047c2
Pipeline #213040 failed with stages
in 1 minute and 56 seconds
......@@ -255,6 +255,10 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
"all": true
}
},
"notificationColors": {
"info":"blue-9",
"warning":"red-9"
},
"panels": [
{
"connector": [1, 2],
......@@ -293,7 +297,7 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
} </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.
**Note**: its 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.
### The Keys in Detail
......@@ -316,7 +320,7 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
refers to the **x-content-type** in the **API** you are using.
**Note**: This content-type has to match it's API-counterpart explicitely, otherwise TIDO isn't able to show the related annotations.
**Note**: This content-type has to match its API-counterpart explicitely, otherwise TIDO isn't able to show the related annotations.
- **icon**
......@@ -330,7 +334,7 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
the tabs-object represents different types of annotations to be displayed in tabs accordingly.
it consists of further extensible sub keys called group labels, either of it representing a single group of annotations, e.g. *editorial*, *motifs*.
these labels act as your tab heading and it's naming is up to your liking.
these labels act as your tab heading and its naming is up to your liking.
e.g.
......@@ -341,13 +345,13 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
}
```
**Note**: The strings contained within the group label keys (e.g. *Person*, *Place*, ...) have to match it's API-counterpart explicitely. Please refer to the note above (content-type).
**Note**: The strings contained within the group label keys (e.g. *Person*, *Place*, ...) have to match its API-counterpart explicitely. Please refer to the note above (content-type).
- **colors**
set the colors used in the frontend.
`primary` and `accent` should be a darker tone, so that white text is visible if used as background. It's the other way around with `secondary`.
`primary` and `accent` should be a darker tone, so that white text is visible if used as background. its the other way around with `secondary`.
Hex values (like `#a1a1a1`) or color names (like `hotpink`) are fine.
......@@ -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 its respective icon which in turn gets 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.
......
......@@ -32,7 +32,12 @@
v-else
class="q-pa-sm"
>
<Notification :message="$t(messages.none)" />
<Notification
:message="$t(messages.none)"
:notification-colors="config.notificationColors"
title-key="annotationInfoTitle"
type="info"
/>
</div>
<AnnotationOptions
......
......@@ -78,7 +78,6 @@ export default {
type: Function,
default: () => {},
},
collectiontitle: {
type: String,
default: () => '',
......
......@@ -5,12 +5,12 @@
>
<q-card-section class="text-center">
<q-icon
:name="fasInfoCircle"
:color="color"
:name="icon"
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,45 @@ export default {
type: String,
default: () => '',
},
notificationColors: {
type: Object,
default: () => {},
},
titleKey: {
type: String,
default: () => '',
},
type: {
type: String,
default: () => '',
},
},
data() {
return {
};
},
created() {
this.fasInfoCircle = fasInfoCircle;
computed: {
color() {
switch (this.type) {
case 'info':
return this.notificationColors?.info ? this.notificationColors.info : '';
case 'warning':
return this.notificationColors?.warning ? this.notificationColors.warning : '';
default:
return '';
}
},
icon() {
switch (this.type) {
case 'info':
return fasInfoCircle;
case 'warning':
return fasExclamationTriangle;
default:
return '';
}
},
},
};
</script>
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',
......
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',
......
......@@ -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": [
......@@ -88,6 +88,10 @@
"all": true
}
},
"notificationColors": {
"info":"blue-9",
"warning":"red-9"
},
"panels": [
{
"connector": [1, 2],
......
Supports Markdown
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