Merge pull request #33 from fhstp/new_changes

New changes

CHANGELOG.md

@@ -1,5 +1,14 @@
 # easyBiograph Version History
 
+## version 2.2.2, released 11 Dec 2024
+
+* (usability) Escape keyboard binding in dialogs and menu
+* (usability) tooltips for buttons
+* (usability) remove unnessary buttons on welcome screen
+* (usability) better dialogs on small screens
+* (accessibility) increase contrast between alternating dimensions
+* (security) minor updates of libraries (nanoid)
+
 ## version 2.2.1, released 18 Nov 2024
 
 * (feature) print content of Zeitbalken as a list

CITATION.cff

@@ -2,18 +2,18 @@
 # Visit https://bit.ly/cffinit to generate yours today!
 
 cff-version: 1.2.0
-title: easyBiograph
+title: easyBiograph - biographical time bars for social work
 message: '"If you use this software, please cite it as below."'
 type: software
 authors:
-  - given-names: Alexander
-    family-names: Rind
-    orcid: 'https://orcid.org/0000-0001-8788-4600'
-    affiliation: 'St. Pölten University of Applied Sciences, Austria'
   - given-names: Julia
     family-names: Böck
     orcid: 'https://orcid.org/0009-0009-3991-6407'
     affiliation: 'St. Pölten University of Applied Sciences, Austria'
+  - given-names: Alexander
+    family-names: Rind
+    orcid: 'https://orcid.org/0000-0001-8788-4600'
+    affiliation: 'St. Pölten University of Applied Sciences, Austria'
   - name: 'easyBiograph contributors'
 repository-code: 'https://github.com/fhstp/easybiograph'
 url: 'https://www.easybiograph.com/'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybiograph",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "private": true,
   "type": "module",
   "author": "Alexander Rind (https://github.com/alex-rind/)",

src/components/EventDialogue.vue

@@ -403,4 +403,12 @@ button.emoji {
     flex-grow: 3;
   }
 }
+
+@media screen and (max-width: 768px) {
+  #box {
+    width: 100vw !important;
+    left: 0 !important;
+    margin-left: 0 !important;
+  }
+}
 </style>

src/components/PersonDialogue.vue

@@ -278,9 +278,11 @@ export default {
 </script>
 
 <style scoped>
-@media screen and (min-width: 769px), print {
-  .field-body {
-    flex-grow: 3;
+@media screen and (max-width: 768px) {
+  .box {
+    width: 100vw !important;
+    left: 0 !important;
+    margin-left: 0 !important;
   }
 }
 </style>

src/components/TimeGraph.vue

@@ -74,6 +74,7 @@
             class="button is-dark navbar-item in-nav"
             @click="toggleZoomMode"
             v-show="!showIntro"
+            :title= "t('zoomButton')"
             >
             <span class="icon">
               <font-awesome-icon icon="magnifying-glass-plus" />
@@ -136,21 +137,21 @@
         </div>
         <div class="sidebar-menu">
           <div class="buttons sidebar-buttons">
-            <a class="button navbar-item out-nav" @click="openPopUp" v-if="!showIntro">
+            <a class="button navbar-item out-nav" @click="openPopUp" v-if="!showIntro" :title="t('newButton')">
           <span class="icon is-small">
             <font-awesome-icon icon="file" />
           </span>
               <span>{{ t("new") }}</span>
             </a>
-            <a class="button navbar-item out-nav" @click="newData" v-if="showIntro">
+            <a class="button navbar-item out-nav" @click="newData" v-if="showIntro" :title="t('newButton')">
           <span class="icon is-small">
             <font-awesome-icon icon="file" />
           </span>
               <span>{{ t("new") }}</span>
             </a>
             <a class="file">
               <label class="file-label">
-                <input class="file-input" type="file" @change="importData" />
+                <input class="file-input" type="file" @change="importData" :title="t('openButton')" />
                 <span class="file-cta">
               <span class="file-icon icon is-small">
                 <font-awesome-icon icon="folder-open" />
@@ -159,28 +160,28 @@
             </span>
               </label>
             </a>
-            <a class="button navbar-item out-nav" @click="downloadData" v-show="!showIntro">
+            <a class="button navbar-item out-nav" @click="downloadData" v-show="!showIntro" :title="t('saveButton')">
           <span class="icon is-small">
             <font-awesome-icon icon="save" />
           </span>
               <span>{{ t("save") }}</span>
             </a>
 
-            <a class="button navbar-item out-nav" @click="showCreateBiograph = true; newPerson = false;" v-show="!showIntro">
+            <a class="button navbar-item out-nav" @click="showCreateBiograph = true; newPerson = false;" v-show="!showIntro" :title="t('editButton')">
           <span class="icon">
             <font-awesome-icon icon="pencil-alt" />
           </span>
               <span>{{ t("edittimebar") }}</span>
             </a>
 
-            <a class="button navbar-item out-nav" @click="openPrintView">
+            <a class="button navbar-item out-nav" @click="openPrintView" v-show="!showIntro" :title="t('printButton')">
               <span class="icon">
                 <font-awesome-icon icon="print" />
               </span>
-              <span>Drucken</span>
+              <span>{{ t("print") }}</span>
             </a>
 
-            <a class="button navbar-item out-nav" @click="openHelpPopUp()">
+            <a class="button navbar-item out-nav" @click="openHelpPopUp()" :title="t('infoButton')">
           <span class="icon">
             <font-awesome-icon icon="question" />
           </span>
@@ -194,7 +195,7 @@
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
-        <a @click="changeGridState(!showGrid)" class="button is-dark navbar-item in-nav">
+        <a @click="changeGridState(!showGrid)" class="button is-dark navbar-item in-nav" v-show="!showIntro" :title= "t('gridTitle')">
             <span class="icon">
               <font-awesome-icon icon="table-columns" />
             </span>
@@ -442,6 +443,17 @@ export default {
     },
   },
   methods: {
+    closeOnEsc(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        this.showEventDialogue = false;
+        this.showCreateBiograph = false;
+        this.showHelpDialogue = false;
+        this.burgerMenuActive = false;
+        this.closeModal();
+        this.closeModalEvent();
+      }
+    },
+
     openPrintView() {
       const printViewUrl = `${window.location.origin}/#/print-view`;
       window.open(printViewUrl, '_blank');
@@ -730,6 +742,7 @@ export default {
   },
   mounted() {
     changeColorMode(this.selectedMode);
+    document.addEventListener('keydown', this.closeOnEsc);
   },
 };
 </script>
@@ -894,6 +907,16 @@ span.file-cta {
   flex-wrap: wrap;
 }
 
+/* .button.is-primary {
+  background-color: #3693A9;
+}
+
+.button.is-primary:hover {
+  background-color: #3693A9;
+}
+ */
+
+
 @media screen {
   .navbar-menu {
     display: none !important;

src/components/TimePane.vue

@@ -337,7 +337,7 @@ const layout = computed((): Array<DimensionLayout> => {
 <style scoped lang="scss">
 
 .grey-background {
-  background-color: #f2f2f2;
+  background-color: #e6e6e6;
 }
 
 .white-background {

src/de.ts

@@ -98,5 +98,15 @@ export default {
   //timeEvent{
   toopen: "Offen",
   //}
-  language: "de-DE"
+  language: "de-DE",
+  print: "Drucken",
+  gridTitle: "Ein-/Ausschalten von vertikalen Linien, welche alle 5 Jahre angezeigt werden",
+  zoomButton: "In den Zeitbalken zoomen",
+  newButton: "Neuen Zeitbalken erstellen",
+  openButton: "Einen bestehenden Zeitbalken laden",
+  saveButton: "Aktuellen Zeitbalken speichern",
+  editButton: "Aktuellen Zeitbalken bearbeiten",
+  printButton: "PDF mit Informationen des Zeitbalkens erstellen",
+  infoButton: "Informationen zur easyBiograph App öffnen"
+
 };

src/en.ts

@@ -98,5 +98,14 @@ export default {
   //timeEvent{
   toopen: "Ongoing",
   //}
-  language: "en-EN"
+  language: "en-US",
+  print: "Print",
+  gridTitle: "Turn on/off of vertical five year grid lines",
+  zoomButton: "Zoom into the timeline",
+  newButton: "Create new timeline",
+  openButton: "Open existing timeline",
+  saveButton: "Save current timeline",
+  editButton: "Edit current timeline",
+  printButton: "Create PDF with information of current timeline",
+  infoButton: "Open information about the easyBiograph app"
 };