refactor: add tranlation for sheet and addressing review comments

src/App.vue

@@ -275,7 +275,8 @@ export default {
         urls.push(
           {
             label: item.id,
-            'label-key': `${this.config.labels.item} ${itemLabel}`,
+            'label-key': `${itemLabel}`,
+            labelSheet: true,
             handler: (node) => {
               if (this.itemurl === node.label) {
                 return;

src/components/color.vue

@@ -2,7 +2,7 @@
   <div class="col-xs-auto colors">
     <q-btn
       flat
-      :title="$t('Colorscheme')"
+      :title="$t('colorScheme')"
     >
       <q-icon
         :name="fasPalette"

src/components/language.vue

@@ -2,7 +2,7 @@
   <div class="col-xs-auto">
     <q-btn
       flat
-      :title="$t('Change_language')"
+      :title="$t('changeLanguage')"
     >
       <q-icon
         :name="fasLanguage"

src/components/metadata.vue

@@ -176,8 +176,8 @@ export default {
       return [
         { id: 'Label', data: this.item.n },
         { id: 'Language', data: this.item.lang.join(',') },
-        { id: 'ImageLicense', data: this.item.image?.license?.id },
-        { id: 'ImageNotes', data: this.item.image?.license?.notes },
+        { id: 'imageLicense', data: this.item.image?.license?.id },
+        { id: 'imageNotes', data: this.item.image?.license?.notes },
       ].filter((item) => item.data);
     },
     metadataManifest() {

src/components/openseadragon.vue

@@ -45,10 +45,10 @@ export default {
   data() {
     return {
       buttons: [
-        { id: 'zoom-in', svg: fasSearchPlus, tooltip: 'OSD_Zoomin' },
-        { id: 'zoom-out', svg: fasSearchMinus, tooltip: 'OSD_Zoomout' },
-        { id: 'default', svg: fasExpand, tooltip: 'OSD_Home' },
-        { id: 'fullscreen', svg: fasExpandArrowsAlt, tooltip: 'OSD_FullPage' },
+        { id: 'zoom-in', svg: fasSearchPlus, tooltip: 'osdZoomin' },
+        { id: 'zoom-out', svg: fasSearchMinus, tooltip: 'osdZoomout' },
+        { id: 'default', svg: fasExpand, tooltip: 'osdHome' },
+        { id: 'fullscreen', svg: fasExpandArrowsAlt, tooltip: 'osdFullPage' },
       ],
       options: {
         id: 'openseadragon',

src/components/softwareinfo.vue

@@ -3,7 +3,7 @@
     <q-btn
       flat
       label=""
-      :title="$t('Project_Info')"
+      :title="$t('projectInfo')"
       @click="infobox = true"
     >
       <q-icon
@@ -21,13 +21,13 @@
           </h1>
 
           <p class="text-weight-bold">
-            {{ $t('Info_Description') }}
+            {{ $t('infoDescription') }}
           </p>
 
-          <p>Copyright (c) {{ actualYear }} {{ $t('Info_Copyright') }}</p>
+          <p>Copyright (c) {{ actualYear }} {{ $t('infoCopyright') }}</p>
 
           <p class="q-mb-none">
-            Version {{ version }}, {{ $t('Info_License') }}
+            Version {{ version }}, {{ $t('infoLicense') }}
           </p>
         </q-card-section>
 
@@ -43,7 +43,7 @@
               size="md"
               class="q-pr-md"
             />
-            {{ $t('Info_Docs') }}
+            {{ $t('infoDocs') }}
           </q-btn>
 
           <q-btn
@@ -57,7 +57,7 @@
               size="md"
               class="q-pr-md"
             />
-            {{ $t('Info_Sourcecode') }}
+            {{ $t('infoSourcecode') }}
           </q-btn>
 
           <q-btn
@@ -70,7 +70,7 @@
               size="md"
               class="q-pr-md"
             />
-            {{ $t('Info_Bugs') }}
+            {{ $t('infoBugs') }}
           </q-btn>
         </q-card-section>
 
@@ -79,7 +79,7 @@
             v-close-popup
             :class="$q.dark.isActive ? 'text-white' : 'text-black'"
             flat
-            :label="$t('Info_Close')"
+            :label="$t('infoClose')"
           />
         </q-card-actions>
       </q-card>

src/components/togglebar/toggleFilter.vue

@@ -6,7 +6,7 @@
       outline
       flat
       :class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
-      :label="$t('show_hide_panels')"
+      :label="$t('showHidePanels')"
     >
       <slot />
     </q-btn-dropdown>

src/components/togglebar/toggleIndex.vue

@@ -29,7 +29,7 @@
           v-close-popup
           clickable
           flat
-          :title="$t('Defaultview')"
+          :title="$t('defaultView')"
           @click="()=> handleStatusPanel(-1, true)"
         >
           <q-icon

src/components/tree.vue

@@ -2,7 +2,6 @@
   <div class="item">
     <q-tree
       class="item-content"
-      label-key="label-key"
       node-key="label"
       :expanded.sync="expanded"
       :icon="fasCaretRight"
@@ -18,6 +17,12 @@
           :id="`selectedItem-${node['label']}`"
         />
       </template>
+
+      <template #default-header="prop">
+        <div class="row items-center">
+          <div> {{ prop.node.labelSheet? $t(labels.item):'' }} {{ prop.node['label-key'] }}</div>
+        </div>
+      </template>
     </q-tree>
   </div>
 </template>
@@ -29,6 +34,10 @@ import treestore from '@/stores/treestore.js';
 export default {
   name: 'Treeview',
   props: {
+    labels: {
+      type: Object,
+      default: () => {},
+    },
     manifests: {
       type: Array,
       default: () => [],

src/i18n/de/index.js

 export default {
-  Test: 'Test DE',
   Annotations: 'Annotationen',
+  changeLanguage: 'Sprache ändern',
   Collection: 'Kollektion',
   Collector: 'Kollektor',
-  Colorscheme: 'Farbschema ändern',
+  colorScheme: 'Farbschema ändern',
   Contents: 'Inhalt',
-  Contents_Metadata: 'Inhalt & Metadaten',
-  Change_language: 'Sprache ändern',
-  cTitle: 'Die Geschichte und Redewendungen von Ahiqar dem Weisen',
+  contentsMetadata: 'Inhalt & Metadaten',
+  cTitle: 'Die Geschichte und Redewendungen von Ahikar dem Weisen',
   'Current location': 'Aktueller Standort',
   'Date of creation': 'Erstelldatum',
   Decrease: 'Verkleinern',
   default: 'Standard',
-  Defaultview: 'Ansicht zurücksetzen',
+  defaultView: 'Ansicht zurücksetzen',
   Description: 'Beschreibung',
   Editor: 'Herausgeber',
   Editors: 'Herausgeber',
   hide: 'Verstecke',
   Image: 'Digitalisat',
-  ImageLicense: 'BILDLIZENZ',
-  ImageNotes: 'Bildnotizen',
+  imageLicense: 'Bildlizenz',
+  imageNotes: 'Bildnotizen',
   Increase: 'Vergrössern',
-  Info_Bugs: 'Fehlerbericht',
-  Info_Close: 'Schliessen',
-  Info_Copyright: 'Universität Göttingen - Staats- und Universitätsbibliothok Göttingen',
-  Info_Description: 'Schlanker, benutzerfreundlicher und mobile-freundlicher Text- und Bildbetrachter',
-  Info_Docs: 'Dokumentation',
-  Info_License: 'lizensiert unter GNU Affero General Public License v3.0',
-  Info_Sourcecode: 'Quellcode',
+  infoBugs: 'Fehlerbericht',
+  infoClose: 'Schliessen',
+  infoCopyright: 'Niedersächsische Staats- und Universitätsbibliothek Göttingen',
+  infoDescription: 'Schlanker, benutzer- und mobile-freundlicher Text- und Bildbetrachter',
+  infoDocs: 'Dokumentation',
+  infoLicense: 'lizensiert unter GNU Affero General Public License v3.0',
+  infoSourcecode: 'Quellcode',
   Label: 'Kennzeichnung',
   Language: 'Sprache',
   Letter: 'Brief',
-  License: 'LIZENZ',
+  License: 'Lizenz',
   Location: 'Aktueller Aufbewahrungsort',
   Manuscript: 'Manuskript',
   Metadata: 'Metadaten',
   next: 'Näch.',
   Origin: 'Ursprung',
-  OSD_FullPage: 'Vollbildmodus wechseln',
-  OSD_Home: 'Ansicht zurücksetzen',
-  OSD_Zoomin: 'Vergrössern',
-  OSD_Zoomout: 'Verkleinern',
+  osdFullPage: 'Vollbildmodus wechseln',
+  osdHome: 'Ansicht zurücksetzen',
+  osdZoomin: 'Vergrössern',
+  osdZoomout: 'Verkleinern',
   'Place of origin': 'Herkunftsort',
   prev: 'Vorh.',
-  Project_Info: 'Projekt info',
+  projectInfo: 'Projekt info',
   Reset: 'Zurücksetzen',
   Sheet: 'Seite',
   show: 'Zeige',
-  show_hide_panels: 'Panels ein- / ausblenden',
+  showHidePanels: 'Panels ein- / ausblenden',
   Tabs: 'Reiter',
   Text: 'Text',
   Textsize: 'Textgrösse',

src/i18n/en-us/index.js

 export default {
-  Test: 'Test EN',
   Annotations: 'Annotations',
+  changeLanguage: 'Change language',
   Collection: 'Collection',
   Collector: 'Collector',
-  Colorscheme: 'Change color',
+  colorScheme: 'Change color',
   Contents: 'Contents',
-  Contents_Metadata: 'Contents & Metadata',
-  Change_language: 'Change language',
+  contentsMetadata: 'Contents & Metadata',
   cTitle: 'The Story and Proverbs of Ahiqar the Wise',
   'Current location': 'Current location',
   'Date of creation': 'Date of creation',
   Decrease: 'Decrease',
   default: 'Default',
-  Defaultview: 'Reset panels to default view',
+  defaultView: 'Reset panels to default view',
   Description: 'Description',
   Editor: 'Editor',
   Editors: 'Editors',
   hide: 'Hide',
   Image: 'Image',
-  ImageLicense: 'Image License',
-  ImageNotes: 'IMAGE NOTES',
+  imageLicense: 'Image License',
+  imageNotes: 'Image Notes',
   Increase: 'Increase',
-  Info_Bugs: 'Report a Bug',
-  Info_Close: 'Close',
-  Info_Copyright: 'Göttingen University - Göttingen State and University Library',
-  Info_Description: 'Slim, easy to use and mobile-friendly text and image viewer',
-  Info_Docs: 'Documentation',
-  Info_License: 'licensed under GNU Affero General Public License v3.0',
-  Info_Sourcecode: 'Source Code',
+  infoBugs: 'Report a Bug',
+  infoClose: 'Close',
+  infoCopyright: 'Georg-August-Universität Göttingen',
+  infoDescription: 'Slim, easy to use and mobile-friendly text and image viewer',
+  infoDocs: 'Documentation',
+  infoLicense: 'licensed under GNU Affero General Public License v3.0',
+  infoSourcecode: 'Source Code',
   Label: 'Label',
   Language: 'Language',
   Letter: 'Letter',
-  License: 'LICENSE',
+  License: 'License',
   Location: 'Current location',
   Manuscript: 'Manuscript',
   Metadata: 'Metadata',
   next: 'Next',
   Origin: 'Origin',
-  OSD_FullPage: 'Toggle full page',
-  OSD_Home: 'Go home',
-  OSD_Zoomin: 'Zoom in',
-  OSD_Zoomout: 'Zoom out',
+  osdFullPage: 'Toggle full page',
+  osdHome: 'Go home',
+  osdZoomin: 'Zoom in',
+  osdZoomout: 'Zoom out',
   'Place of origin': 'Place of origin',
   prev: 'Prev',
-  Project_Info: 'Project Info',
+  projectInfo: 'Project Info',
   Reset: 'Reset',
   Sheet: 'Sheet',
   show: 'Show',
-  show_hide_panels: 'Show/Hide Panels',
+  showHidePanels: 'Show/Hide Panels',
   Tabs: 'Tabs',
   Text: 'Text',
   Textsize: 'Textsize',

src/index.template.html

@@ -82,7 +82,7 @@
       "panels": [
         {
           "connector": [1, 2],
-          "panel_label": "Contents_Metadata",
+          "panel_label": "contentsMetadata",
           "show": true,
           "toggle": true
         },