Commit 683efc1f authored by dindigala's avatar dindigala
Browse files

Merge branch 'issue/projectheader' into 'develop'

project header

Closes #289

See merge request !172
parents 1d5efe2b af4248b8
Pipeline #210054 passed with stages
in 2 minutes and 32 seconds
......@@ -191,6 +191,7 @@ There are options to
- group multiple components inside a single panel
- set the order of the panels
- rename labels and / or panel headings
- switch project header on or off and provide descriptive strings
- and **more** ...
As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defaults to `true` and denotes to show the appropriate element.
......@@ -282,7 +283,13 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
],
"rtl": false,
"lang": "en-us",
"standalone": true
"standalone": true,
"breadcrumbNavigation": {
"show": true,
"title_homepage_key": "title_homepage",
"title_viewer_key": "title_viewer",
"website": "https://subugoe.pages.gwdg.de/ahiqar/website/"
}
} </script>
```
......@@ -414,6 +421,34 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
Defaults to `true`
- **breadcrumbNavigation**
- **show**
defines if a project header should be shown or not.
Defaults to `false`
- **title_homepage_key**
defines the string shown as first item in the breadcrumb. Shows a "Home Icon"
Note: To change this title please navigate to "tido/src/i18n/en or tido/src/i18n/de" and find "title_homepage".
Has to be set!
- **title_viewer_key**
defines the string shown as last item in the breadcrumb. Shows a "Document Icon"
Note: To change this title please navigate to "tido/src/i18n/en or tido/src/i18n/de" and find "title_viewer".
Has to be set!
- **website**
Navigates to the Home Page page on website.
### Configure the Panels
```json
......
......@@ -8,6 +8,7 @@ const i18n = new VueI18n({
locale: 'en-us',
fallbackLocale: 'en-us',
messages,
silentTranslationWarn: true,
});
export default ({ app }) => {
......
<template>
<div
class="q-py-xs"
>
<div class="content">
<q-breadcrumbs
:class="$q.dark.isActive ? 'text-dark' : 'text-white'"
class="text-weight-medium"
>
<template #separator>
<q-icon
:name="fasChevronRight"
size="1em"
/>
</template>
<q-breadcrumbs-el
:class="$q.dark.isActive ? 'text-dark' : 'text-white'"
:icon="fasHome"
>
<a
:class="$q.dark.isActive ? 'text-dark' : 'text-white'"
:href="`${config.breadcrumbNavigation.website}`"
class="header-links"
>
{{ $t(`${config.breadcrumbNavigation.title_homepage_key}`) }}
</a>
</q-breadcrumbs-el>
<q-breadcrumbs-el
:icon="fasFileAlt"
:label="$t(`${config.breadcrumbNavigation.title_viewer_key}`)"
/>
</q-breadcrumbs>
</div>
</div>
</template>
<script>
import {
fasHome,
fasFileAlt,
fasChevronRight,
} from '@quasar/extras/fontawesome-v5';
export default {
name: 'BreadcrumbNavigation',
props: {
config: {
type: Object,
required: true,
},
},
created() {
this.fasHome = fasHome;
this.fasFileAlt = fasFileAlt;
this.fasChevronRight = fasChevronRight;
},
};
</script>
<style lang="scss" scoped>
.content {
margin: 0 auto;
max-width: 1200px;
padding: 0 12px;
}
.header-links {
margin-left: 8px;
text-decoration: none;
}
.q-breadcrumbs__el-icon {
font-size: 100% !important;
}
</style>
<template>
<q-header :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'">
<div
v-if="config.breadcrumbNavigation.show"
:class="$q.dark.isActive ? 'bg-white' : 'bg-accent'"
>
<BreadCrumbNavigation
:config="config"
/>
</div>
<div class="header__wrap">
<q-toolbar v-if="config['header_section'].titles">
<TitleBar
......@@ -51,6 +59,7 @@
<script>
import Navbar from '@/components/navbar.vue';
import BreadCrumbNavigation from '@/components/breadcrumbnavigation.vue';
import TitleBar from '@/components/titlebar.vue';
import TogglePanels from '@/components/togglebar/togglePanels.vue';
import Tools from '@/components/tools.vue';
......@@ -61,6 +70,7 @@ export default {
Navbar,
TitleBar,
TogglePanels,
BreadCrumbNavigation,
Tools,
},
props: {
......
......@@ -48,6 +48,7 @@ export default {
prev: 'Vorh.',
projectInfo: 'Projekt info',
Reset: 'Zurücksetzen',
search: 'Suche',
Sheet: 'Seite',
show: 'Zeige',
showHidePanels: 'Panels ein- / ausblenden',
......@@ -55,6 +56,8 @@ export default {
Text: 'Text',
Textsize: 'Textgrösse',
Title: 'Titel',
title_homepage: 'Die syrischen und arabischen Ahiqar-Texte',
title_viewer: 'Edition anzeigen',
transcription: 'Transkription',
transliteration: 'Transliteration',
Year: 'Erstellungsjahr',
......
......@@ -48,6 +48,7 @@ export default {
prev: 'Prev',
projectInfo: 'Project Info',
Reset: 'Reset',
search: 'Search',
Sheet: 'Sheet',
show: 'Show',
showHidePanels: 'Show/Hide Panels',
......@@ -55,6 +56,8 @@ export default {
Text: 'Text',
Textsize: 'Textsize',
Title: 'Title',
title_homepage: 'The Syriac, Arabic, and Karshuni Ahiqar Texts',
title_viewer: 'Edition Viewer',
transcription: 'Transcription',
transliteration: 'Transliteration',
Year: 'Year of creation',
......
......@@ -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": [
......@@ -116,7 +116,13 @@
],
"rtl": false,
"lang": "en-us",
"standalone": true
"standalone": true,
"breadcrumbNavigation": {
"show": true,
"title_homepage_key": "title_homepage",
"title_viewer_key": "title_viewer",
"website": "https://subugoe.pages.gwdg.de/ahiqar/website/"
}
}
</script>
......
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