Merge pull request #18 from fhstp/buttons_changes

Buttons changes, info screen

CHANGELOG.md

@@ -0,0 +1,17 @@
+# easyBiograph Version History
+
+## version 2.0.4 beta, released 18 Mar 2024
+
+* (feature) standard dimensions are not changeable
+* (feature) high contrast mode
+* (feature) info button shows card with version and links
+* (bugfix) zoom button only visible if zoomed
+* (bugfix) cancel after new results in start screen
+
+## version 2.0.3 beta, released 26 Jan 2024
+
+...
+
+## version 2.0.2 beta, released 3 May 2023
+
+...

env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybiograph",
-  "version": "1.9.0",
+  "version": "2.0.4 beta",
   "private": true,
   "author": "Alexander Rind (https://github.com/alex-rind/)",
   "repository": "https://github.com/fhstp/easybiograph/",

src/components/DimensionDialogue.vue

@@ -5,20 +5,20 @@
   <div>
     <div v-for="(dimension, index) in Dimension" :key="dimension.id" class="checkbox-container">
       <label v-if="!isEditing[index]">
-        <input type="checkbox" @click="toggleDim(dimension.id)" :checked="dimension.visible"> {{ dimension.title }}
+        <input type="checkbox" @click="toggleDim(dimension.id)" :checked="dimension.visible" v-if="dimension.id > 6"> {{ dimension.title }}
       </label>
       <input v-if="isEditing[index]" v-model="editedDimension" @blur="cancelEdit(index)" @keyup.enter="saveEdit(index)" />
       <div class="buttons">
-      <button class="button is-small" v-if="!isEditing[index]" @click="editDimension(index)">
+      <button class="button is-small" v-if="!isEditing[index] && dimension.id > 6" @click="editDimension(index)">
         <font-awesome-icon icon="pencil-alt" />
       </button>
-        <button class="button is-small" v-if="isEditing[index]" @click="cancelEdit(index)">
+        <button class="button is-small" v-if="isEditing[index] && dimension.id > 6" @click="cancelEdit(index)">
           <font-awesome-icon icon="pencil-alt" />
         </button>
-      <button class="button is-small" @click="moveUp(index)" :disabled="index === 0">
+      <button class="button is-small" @click="moveUp(index)" :disabled="index === 6" v-if="dimension.id > 6">
         <font-awesome-icon icon="arrow-up" />
       </button>
-        <button class="button is-small" @click="moveDown(index)" :disabled="index === Dimension.length - 1">
+        <button class="button is-small" @click="moveDown(index)" :disabled="index === Dimension.length - 1" v-if="dimension.id > 6">
           <font-awesome-icon icon="arrow-down" />
         </button>
       </div>

src/components/HelpDialogue.vue

@@ -0,0 +1,39 @@
+<script setup>
+// eslint-disable-next-line no-undef
+const appVersion = __APP_VERSION__;
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-content">
+      <div class="content">
+        <p class="title is-4">easyBiograph</p>
+        <p class="subtitle is-6">version {{ appVersion }}</p>
+        <p class="block">
+          <!-- TODO provide link to https://easybiograph.fhstp.ac.at/ -->
+          Die Webseite mit Handbüchern und Einführungsmaterialien ist noch nicht
+          verfügbar.
+        </p>
+        <p class="block">
+          easyBiograph ist Free and Open Source Software. Den Source Code finden
+          Sie auf <a href="https://github.com/fhstp/easybiograph">GitHub</a>.
+        </p>
+        <p class="block">
+          Diese Software wurde im Rahmen des Erasmus+ Projekts
+          <a
+            href="https://research.fhstp.ac.at/en/projects/transsodia-transnational-and-digital-learning-and-teaching-in-cooperative-social-diagnostics"
+            target="_blank"
+          >
+            TransSoDia
+          </a>
+          entwickelt, das von der Europäischen Union kofinanziert wurde.
+        </p>
+        <div class="buttons is-centered">
+          <button class="button" @click="$emit('abort')">Schließen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/components/PersonInfo.vue

@@ -31,6 +31,12 @@
 <script>
 export default {
   name: "PersonInfo",
+  props: {
+    contrastMode: {
+      type: Boolean,
+      required: true,
+    },
+  },
 };
 </script>
 
@@ -39,13 +45,17 @@ export default {
   position: fixed;
   padding-left: 1vw;
   padding-top: 0.5vh;
-  background-color: #d2dee2;
-  color: #3e505b;
   font-weight: normal;
   width: 100vw;
   height: 2.5em;
   z-index: 5;
   white-space: nowrap;
+  background-color: #d2dee2;
+}
+
+.contrast .personInfo {
+  /* background-color: #93b2c9; */
+  color: #001f3f;
 }
 
 .same {

src/components/TimeEvent.vue

@@ -23,7 +23,7 @@
                   event.startDate.substring(0, 4)
       }}
     </span>
-    <div :class="[event.isInterval && event.isOpenEnd ? 'openEnd sel' : event.isInterval ? 'period sel' : 'event sel']" @click="showDetails">
+    <div :value="contrastMode ? true : false" :class="[event.isInterval && event.isOpenEnd ? 'openEnd sel' : event.isInterval ? 'period sel' : 'event sel']" @click="showDetails">
       <p class="eventText">
         {{ event.description }}
       </p>
@@ -58,6 +58,10 @@ export default {
   props: {
     event: Object,
     showNotes: Boolean,
+    contrastMode: {
+      type: Boolean,
+      required: true,
+    },
   },
   mounted() {
     this.setHeight();
@@ -83,9 +87,8 @@ export default {
 
 <style scoped lang="scss">
 
-.openEnd {
+.openEnd[value="false"] {
   display: block;
-  //background-color: $periodblue;
   border: 2px solid $periodborderblue;
   background: linear-gradient(90deg, rgba(230,242,248,1) 0%, rgba(175,211,227,1) 90%, rgba(137,182,203,1) 100%);
   box-shadow: #2c3e50;
@@ -99,13 +102,13 @@ export default {
 
 }
 
-.content {
+.content[value="false"] {
   border-right: 0.5px solid lightgrey;
   width: 10%;
   text-align: center;
 }
 
-.event {
+.event[value="false"] {
   display: block;
   background-color: $eventgrey;
   border-left: 3px solid $eventgreen;
@@ -115,7 +118,7 @@ export default {
   width: 50px;
 }
 
-.period {
+.period[value="false"] {
   display: block;
   background-color: $periodblue;
   border: 2px solid $periodborderblue;
@@ -126,6 +129,48 @@ export default {
   margin-right: 1px;
 }
 
+.openEnd[value="true"] {
+  display: block;
+  border: 1.5px solid #488193;
+  background: linear-gradient(90deg, rgba(230,242,248,1) 0%, rgba(175,211,227,1) 90%, rgba(137,182,203,1) 100%);
+  box-shadow: #2c3e50;
+  margin: 5px 0;
+  border-radius: 3px;
+  z-index: 1;
+  margin-right: 1px;
+  border-right: none;
+  border-top-right-radius: 100px;
+
+
+}
+
+.content[value="true"] {
+  border-right: 0.5px solid lightgrey;
+  width: 10%;
+  text-align: center;
+}
+
+.event[value="true"] {
+  display: block;
+  background-color: $eventgrey;
+  border-left: 3px solid #FFA500;
+  margin: 5px 0;
+  border-radius: 3px;
+  z-index: 1;
+  width: 50px;
+}
+
+.period[value="true"] {
+  display: block;
+  background-color: $periodblue;
+  border: 1.5px solid #488193;
+  box-shadow: #2c3e50;
+  margin: 5px 0;
+  border-radius: 3px;
+  z-index: 1;
+  margin-right: 1px;
+}
+
 .eventText {
   font-size: smaller;
   white-space: nowrap;