Merge branch 'issue/projectheader' into 'develop'

project header

Closes #289

See merge request !172

README.md

@@ -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

src/boot/i18n.js

@@ -8,6 +8,7 @@ const i18n = new VueI18n({
   locale: 'en-us',
   fallbackLocale: 'en-us',
   messages,
+  silentTranslationWarn: true,
 });
 
 export default ({ app }) => {

src/components/breadcrumbnavigation.vue

+<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>

src/components/header.vue

 <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: {

src/i18n/de/index.js

@@ -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',

src/i18n/en-us/index.js

@@ -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',

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": [
@@ -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>