From 72dddfae43ba793cc4f4bc8461dde990256885d1 Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Mon, 26 Aug 2024 13:51:39 +0200
Subject: [PATCH 01/10] ADD emoji

---
 package.json                     |  1 +
 src/components/EventDialogue.vue | 90 +++++++++++++++++++++++++++++++-
 src/components/EventDisplay.vue  |  5 ++
 src/components/TimeEvent.vue     |  1 +
 src/data/ZBEvent.ts              |  2 +
 5 files changed, 98 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5108b40..f622bf2 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "d3": "^7.6.1",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3",
+    "vue3-emoji-picker": "^1.1.8",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
diff --git a/src/components/EventDialogue.vue b/src/components/EventDialogue.vue
index 49af292..3ab96e2 100644
--- a/src/components/EventDialogue.vue
+++ b/src/components/EventDialogue.vue
@@ -138,6 +138,63 @@
       </div>
     </div>
 
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label" style="text-align: left">Emoji</label>
+      </div>
+      <br />
+      <div class="field-body">
+        <div>
+          <div style="display: flex; align-items: center;">
+            <div>
+              {{
+                tempEvent.emoji == null || tempEvent.emoji.length < 1
+                  ? "Noch kein Emoji gewählt"
+                  : "Gewähltes Emoji: " + tempEvent.emoji
+              }}
+            </div>
+            <button
+              v-if="tempEvent.emoji != null && tempEvent.emoji.length > 0"
+              @click="removeEmoji"
+              class="delete"
+              aria-label="remove emoji"
+              style="margin-left: 5px;"
+            ></button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">{{ t("selectEmoji") }}</label>
+      </div>
+      <div class="field-body">
+        <div class="dropdown" :class="{ 'is-active': showEmojiPicker }">
+          <div >
+            <button
+              class="button is-small"
+              @click="toggleEmojiPicker"
+            >
+            <span>Emoji auswählen</span>
+            </button>
+          </div>
+          <div class="dropdown-menu" >
+            <div>
+              <div>
+                <EmojiPicker
+                  v-model="tempEvent.emoji"
+                  :native="true"
+                  :disableSkinTones="true"
+                  @select="onSelectEmoji"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="field is-horizontal">
       <div class="field-label is-normal">
         <label class="label" style="text-align: left">{{t("notes")}}</label>
@@ -200,10 +257,12 @@ import { ref, computed } from "vue";
 import type { defineComponent, PropType } from "vue";
 import de from "@/de";
 import en from "@/en";
+import EmojiPicker from "vue3-emoji-picker"
+import "vue3-emoji-picker/css";
 
 export default {
   name: "EventDialogue",
-  components: { MonthChooser },
+  components: { MonthChooser, EmojiPicker },
   props: {
     event: { type: Object as PropType<ZBEvent | null> },
   },
@@ -212,10 +271,28 @@ export default {
       [...store.state.data.dimensions].reverse().filter((dim) => dim.visible)
     );
     const tempEvent = ref(initEvent());
+    const showEmojiPicker = ref(false);
+
+    function onSelectEmoji(emoji: any) {
+      tempEvent.value.emoji = emoji.i;
+      showEmojiPicker.value = false;
+    }
+    
+    function removeEmoji() {
+      tempEvent.value.emoji = "";
+    }
+
+    function toggleEmojiPicker() {
+      showEmojiPicker.value = !showEmojiPicker.value;
+    }
 
     return {
       tempEvent,
       dimensionOptions,
+      onSelectEmoji,
+      removeEmoji,
+      showEmojiPicker,
+      toggleEmojiPicker,
     };
   },
   computed: {
@@ -305,6 +382,17 @@ export default {
   z-index: 10;
 }
 
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  width: 20em;
+}
+
+.dropdown.is-active .dropdown-menu {
+  display: block;
+}
+
 @media screen and (min-width: 769px), print {
   .field-body {
     flex-grow: 3;
diff --git a/src/components/EventDisplay.vue b/src/components/EventDisplay.vue
index a82c61b..e11219b 100644
--- a/src/components/EventDisplay.vue
+++ b/src/components/EventDisplay.vue
@@ -4,6 +4,7 @@
       <div class="media">
         <div class="media-content">
           <p class="title is-4">
+            {{ emoji }}
             {{ description }}
             <button @click="$emit('open-edit')" class="button is-link is-small">
               <span class="icon is-small">
@@ -60,6 +61,10 @@ const description = computed(() =>
   props.selectedEvent ? props.selectedEvent.description : ""
 );
 
+const emoji = computed(() => 
+  props.selectedEvent ? props.selectedEvent.emoji : ""
+);
+
 const notes = computed(() =>
   props.selectedEvent ? props.selectedEvent.notes : ""
 );
diff --git a/src/components/TimeEvent.vue b/src/components/TimeEvent.vue
index 6879d58..0e06d74 100644
--- a/src/components/TimeEvent.vue
+++ b/src/components/TimeEvent.vue
@@ -23,6 +23,7 @@
       :class="{ int: event.isInterval }"
       :style="`max-width: ${labelSpace}%`"
     >
+    {{ event.emoji }}
       {{ event.description }}
     </p>
     <p class="subcontent" v-show="showNotes">
diff --git a/src/data/ZBEvent.ts b/src/data/ZBEvent.ts
index 8aa00e9..199fd41 100644
--- a/src/data/ZBEvent.ts
+++ b/src/data/ZBEvent.ts
@@ -7,6 +7,7 @@ export interface ZBEvent {
   startDate: string;
   endDate: string;
   isOpenEnd: boolean;
+  emoji: string;
 }
 
 export function initEvent(): ZBEvent {
@@ -19,5 +20,6 @@ export function initEvent(): ZBEvent {
     startDate: "",
     endDate: "",
     isOpenEnd: false,
+    emoji: "",
   };
 }

From 47884efc200daab0b742d1a580e0a42bfa8147ca Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Mon, 26 Aug 2024 13:53:04 +0200
Subject: [PATCH 02/10] changed red color to darker red

---
 src/assets/ColorMode.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/ColorMode.ts b/src/assets/ColorMode.ts
index 6bc6110..15df637 100644
--- a/src/assets/ColorMode.ts
+++ b/src/assets/ColorMode.ts
@@ -1,6 +1,6 @@
 const colorModes = {
     'green-mode': { primary: '#488193', secondary: '#d2dee2', text: 'white', secondaryText: 'black', moment: "#a1d592", button: "#333", buttonText: "white" },
-    'yellow-mode': { primary: '#F2BC1B', secondary: '#F2DC99', text: 'black', secondaryText: 'black', moment: "#FF0000", button: "#333", buttonText: "white" },
+    'yellow-mode': { primary: '#F2BC1B', secondary: '#F2DC99', text: 'black', secondaryText: 'black', moment: "#c1121f", button: "#333", buttonText: "white" },
     'black-mode': { primary: '#333333', secondary: '#666666', text: 'white', secondaryText: 'white', moment: "black",button: "#e3e3e3", buttonText: "black" }
   };
 

From 8d766cfa3900c28e84fef786f7989e3f786ac903 Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Mon, 26 Aug 2024 15:13:11 +0200
Subject: [PATCH 03/10] fixed tooltip placement

---
 src/components/TimeEvent.vue | 6 +++++-
 src/components/TimePane.vue  | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/TimeEvent.vue b/src/components/TimeEvent.vue
index 0e06d74..a01a193 100644
--- a/src/components/TimeEvent.vue
+++ b/src/components/TimeEvent.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ttParent">
-    <span class="tooltiptext" style="z-index: 7"
+    <span class="tooltiptext"
       >{{ event.description }}
       <br />
       {{ temporalExtentLabel }}
@@ -160,6 +160,10 @@ export default {
   padding: 2px 0;
 }
 
+.ttParent:hover {
+  z-index: 10;
+}
+
 .ttParent .tooltiptext {
   bottom: calc(100% + 5px);
   visibility: hidden;
diff --git a/src/components/TimePane.vue b/src/components/TimePane.vue
index 1fda718..41eac46 100644
--- a/src/components/TimePane.vue
+++ b/src/components/TimePane.vue
@@ -43,7 +43,7 @@
             :event="mark.datum"
             :labelSpace="(100 * mark.spx) / mark.w"
             class="events"
-            :style="`left: ${mark.x}%; width: ${mark.w}%; top: ${mark.row * 1.8}rem; height: 1.8rem; z-index: 2`"
+            :style="`left: ${mark.x}%; width: ${mark.w}%; top: ${mark.row * 1.8}rem; height: 1.8rem`"
             @click="$emit('display-event', mark.datum)"
           />
         </div>

From 6b263bafd1f6048a015c73f192c29ffe184e4412 Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Mon, 26 Aug 2024 15:52:52 +0200
Subject: [PATCH 04/10] changed checkbox for grid to button

---
 src/components/TimeGraph.vue | 13 ++++++-------
 src/de.ts                    |  2 ++
 src/en.ts                    |  2 ++
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/TimeGraph.vue b/src/components/TimeGraph.vue
index d1f2668..ec04c3f 100644
--- a/src/components/TimeGraph.vue
+++ b/src/components/TimeGraph.vue
@@ -177,6 +177,12 @@
       </div>
 
       <div class="navbar-end">
+        <a @click="changeGridState(!showGrid)" class="button is-dark navbar-item in-nav">
+            <span class="icon">
+              <font-awesome-icon icon="table-columns" />
+            </span>
+            <span>{{ showGrid ? t("enabled") : t("disabled") }}</span>
+          </a>
         <div class=" navbar-item">
             <span class="icon" :style="{ color: selectedMode !== 'yellow-mode' ? 'white' : 'inherit' }">
               <font-awesome-icon icon="paint-roller" />
@@ -187,13 +193,6 @@
               <option value="black-mode">{{ t("blackmode") }}</option>
             </select>
           </div>
-          <span>
-            <input type="checkbox" :checked="showGrid" @change="changeGridState(!showGrid)">
-          <span class="icon">
-            <font-awesome-icon icon="table-columns" />
-          </span>
-              <span>{{ t("grid") }}</span>
-        </span>
           <div class="navbar-item in-nav">
           <select
               id="langselect"
diff --git a/src/de.ts b/src/de.ts
index 9081a1c..1dabe0c 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -18,6 +18,8 @@ export default {
   greenmode: "Grün",
   yellowmode: "Gelb",
   blackmode: "Schwarz-Weiß",
+  enabled: "Ein",
+  disabled: "Aus",
   //}
   //eventDialogue: {
   createentry: "Eintrag erstellen",
diff --git a/src/en.ts b/src/en.ts
index 79dcdcc..120cf4e 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -18,6 +18,8 @@ export default {
   greenmode: "Green",
   yellowmode: "Yellow",
   blackmode: "Black-White",
+  enabled: "On",
+  disabled: "Off",
   //}
   //eventDialogue: {
   createentry: "Create a new entry",

From 9f1a9d29d40c15fb9299155a7af4acc608d39b37 Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Tue, 27 Aug 2024 11:25:15 +0200
Subject: [PATCH 05/10] changed z-index

---
 src/components/EventDialogue.vue | 2 +-
 src/components/TimeEvent.vue     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/EventDialogue.vue b/src/components/EventDialogue.vue
index 3ab96e2..998cbcb 100644
--- a/src/components/EventDialogue.vue
+++ b/src/components/EventDialogue.vue
@@ -385,7 +385,7 @@ export default {
 .dropdown-menu {
   display: none;
   position: absolute;
-  z-index: 1000;
+  z-index: 10;
   width: 20em;
 }
 
diff --git a/src/components/TimeEvent.vue b/src/components/TimeEvent.vue
index a01a193..e2ac946 100644
--- a/src/components/TimeEvent.vue
+++ b/src/components/TimeEvent.vue
@@ -158,6 +158,7 @@ export default {
 .ttParent {
   display: inline-block;
   padding: 2px 0;
+  z-index: 2;
 }
 
 .ttParent:hover {

From 89def5839bca241e981ae73b8d396d0b48da8ca1 Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Tue, 27 Aug 2024 11:53:00 +0200
Subject: [PATCH 06/10] changed position of button, burger menu is closing
 after action

---
 src/components/TimeGraph.vue | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/TimeGraph.vue b/src/components/TimeGraph.vue
index ec04c3f..d59c49f 100644
--- a/src/components/TimeGraph.vue
+++ b/src/components/TimeGraph.vue
@@ -90,18 +90,11 @@
               @click="moveZoomLeft"
               v-show="!showIntro && isZoomed"
               :title="t('totheleft')"
+              style="margin-right: 1vw"
           >
             &lt;
           </a>
-          <a
-              class="button is-dark navbar-item in-nav"
-              @click="moveZoomRight"
-              v-show="!showIntro && isZoomed"
-              :title="t('totheright')"
-              style="margin-right: 2vw"
-          >
-            >
-          </a>
+          
         </div>
       </div>
 
@@ -176,6 +169,20 @@
       </div>
       </div>
 
+      <div class="navbar-brand">
+      <div class="buttons">
+        <a 
+          class="button is-dark navbar-item in-nav"
+          @click="moveZoomRight"
+          v-show="!showIntro && isZoomed"
+          :title="t('totheright')"
+          style="margin-left: 1vw"
+        >
+          >
+        </a>
+      </div>
+      </div>
+
       <div class="navbar-end">
         <a @click="changeGridState(!showGrid)" class="button is-dark navbar-item in-nav">
             <span class="icon">
@@ -561,12 +568,14 @@ export default {
       store.commit("data/removeEvent", 0);
     },
     openPopUp() {
+      this.toggleBurgerMenu()
       //@ts-ignore
       this.newPerson = true;
       const modal = document.querySelector("#modal-popUp"); // TODO: https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes
       if (modal) modal.classList.add("is-active");
     },
     openHelpPopUp() {
+      this.toggleBurgerMenu()
       this.showHelpDialogue = true;
     },
     closeModal() {
@@ -634,6 +643,7 @@ export default {
     //   return displayObj;
     // },
     newData() {
+      this.toggleBurgerMenu()
       this.closeModal();
       console.log("jetzt")
       store.commit("data/newZeitbalken");
@@ -652,6 +662,7 @@ export default {
       this.closeModalEvent();
     },
     downloadData() {
+      this.toggleBurgerMenu()
       // TODO move to utils.ts (consistent with easynwk)
       const filename = "easybiograph_" + store.state.data.person.name + ".json";
       const dataObject = store.getters.getDownloadData;
@@ -667,6 +678,7 @@ export default {
       document.body.removeChild(dlAnchorElem);
     },
     importData(event: any) {
+      this.toggleBurgerMenu()
       const temporaryZoom = {
         birthDate: "",
         endDate: "",

From 9301119cecd99b1191b9cfebc03f1b4be344ff2c Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Tue, 27 Aug 2024 13:53:35 +0200
Subject: [PATCH 07/10] changed position of buttons when space is limited

---
 src/components/TimeGraph.vue | 103 ++++++++++++++++++-----------------
 1 file changed, 53 insertions(+), 50 deletions(-)

diff --git a/src/components/TimeGraph.vue b/src/components/TimeGraph.vue
index d59c49f..62451e2 100644
--- a/src/components/TimeGraph.vue
+++ b/src/components/TimeGraph.vue
@@ -5,6 +5,7 @@
     v-show="showEventDialogue"
     @close="showEventDialogue = false"
     :event="selectedEvent"
+    style="z-index: 100;"
   />
 
   <PersonDialogue
@@ -52,39 +53,44 @@
           easyBiograph
         </div>
 
-        
-        <div class="buttons">
-        <a
+        <div class="navbar-item"> 
+          <div class="buttons">
+            <a
             class="button is-dark navbar-item in-nav"
             @click="showAddEventDialogue()"
             v-show="!showIntro"
-        >
-              <span class="icon">
-                <font-awesome-icon icon="plus" />
-              </span>
-          <span>{{ t("createevent") }}</span>
-        </a>
-
-        <a
+            >
+            <span class="icon">
+              <font-awesome-icon icon="plus" />
+            </span>
+            <span>{{ t("createevent") }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+      
+      <div class="navbar-item">
+        <div class="buttons">
+          <a
             class="button is-dark navbar-item in-nav"
             @click="toggleZoomMode"
             v-show="!showIntro"
-        >
-              <span class="icon">
-                <font-awesome-icon icon="magnifying-glass-plus" />
-              </span>
-          <span>Zoom</span>
-        </a>
-        <a
+            >
+            <span class="icon">
+              <font-awesome-icon icon="magnifying-glass-plus" />
+            </span>
+            <span>Zoom</span>
+          </a>
+          <a
             class="button is-dark navbar-item in-nav"
             @click="zoomUndo"
             v-show="!showIntro && isZoomed"
             :title="t('resetzoom')"
-        >
-              <span class="icon">
-                <font-awesome-icon icon="magnifying-glass-minus" />
-              </span>
-        </a>
+            >
+            <span class="icon">
+              <font-awesome-icon icon="magnifying-glass-minus" />
+            </span>
+          </a>
           <a
               class="button is-dark navbar-item in-nav"
               @click="moveZoomLeft"
@@ -94,7 +100,23 @@
           >
             &lt;
           </a>
-          
+          <div class="years-text" style="color: var(--text-color);" v-show="!showIntro && isZoomed">
+            Zoom: {{ zoomedYears }} {{t("outof")}} {{ totalYears }} {{ t("years") }}
+            <div class="horizontal-bar-container">
+              <div class="white-bar">
+                <div class="grey-bar" :style="{ width: greyBarWidth, left: greyBarLeft }"></div>
+              </div>
+            </div>
+          </div>
+          <a 
+            class="button is-dark navbar-item in-nav"
+            @click="moveZoomRight"
+            v-show="!showIntro && isZoomed"
+            :title="t('totheright')"
+            style="margin-left: 1vw"
+          >
+          >
+          </a>
         </div>
       </div>
 
@@ -160,37 +182,17 @@
           </div>
         </div>
       </div>
-      <div class="years-text" v-show="!showIntro && isZoomed">
-        Zoom: {{ zoomedYears }} {{t("outof")}} {{ totalYears }} {{ t("years") }}
-      <div class="horizontal-bar-container">
-        <div class="white-bar">
-          <div class="grey-bar" :style="{ width: greyBarWidth, left: greyBarLeft }"></div>
-        </div>
-      </div>
-      </div>
-
-      <div class="navbar-brand">
-      <div class="buttons">
-        <a 
-          class="button is-dark navbar-item in-nav"
-          @click="moveZoomRight"
-          v-show="!showIntro && isZoomed"
-          :title="t('totheright')"
-          style="margin-left: 1vw"
-        >
-          >
-        </a>
-      </div>
-      </div>
+      
 
       <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
         <a @click="changeGridState(!showGrid)" class="button is-dark navbar-item in-nav">
             <span class="icon">
               <font-awesome-icon icon="table-columns" />
             </span>
             <span>{{ showGrid ? t("enabled") : t("disabled") }}</span>
           </a>
-        <div class=" navbar-item">
             <span class="icon" :style="{ color: selectedMode !== 'yellow-mode' ? 'white' : 'inherit' }">
               <font-awesome-icon icon="paint-roller" />
             </span>
@@ -199,17 +201,18 @@
               <option value="yellow-mode">{{ t("yellowmode") }}</option>
               <option value="black-mode">{{ t("blackmode") }}</option>
             </select>
-          </div>
-          <div class="navbar-item in-nav">
+        
           <select
+              style="margin-right: 1vw;"
               id="langselect"
               name="lang"
               v-model="lang">
               <option value="de">Deutsch</option>
               <option value="en">English</option>
             </select>
+          </div>
+          </div>
         </div>
-      </div>
   </nav>
 
     <TimePane

From b9d79d8c96e2e514f46c8d76ac1901d7e4569917 Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Wed, 28 Aug 2024 13:01:45 +0200
Subject: [PATCH 08/10] made improvements

---
 src/components/EventDialogue.vue | 21 +++++++++++----------
 src/components/TimeGraph.vue     | 12 +++++-------
 src/de.ts                        |  3 +++
 src/en.ts                        |  3 +++
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/EventDialogue.vue b/src/components/EventDialogue.vue
index 998cbcb..53c119e 100644
--- a/src/components/EventDialogue.vue
+++ b/src/components/EventDialogue.vue
@@ -149,17 +149,10 @@
             <div>
               {{
                 tempEvent.emoji == null || tempEvent.emoji.length < 1
-                  ? "Noch kein Emoji gewählt"
-                  : "Gewähltes Emoji: " + tempEvent.emoji
+                  ? t("noemoji")
+                  : tempEvent.emoji
               }}
             </div>
-            <button
-              v-if="tempEvent.emoji != null && tempEvent.emoji.length > 0"
-              @click="removeEmoji"
-              class="delete"
-              aria-label="remove emoji"
-              style="margin-left: 5px;"
-            ></button>
           </div>
         </div>
       </div>
@@ -176,7 +169,15 @@
               class="button is-small"
               @click="toggleEmojiPicker"
             >
-            <span>Emoji auswählen</span>
+            <span>{{ t("selectemoji") }}</span>
+            </button>
+            <button
+              v-if="tempEvent.emoji != null && tempEvent.emoji.length > 0"
+              @click="removeEmoji"
+              class="button is-small is-danger"
+              style="margin-left: 10px;"
+            >
+            <span>{{t("removeemoji")}}</span>
             </button>
           </div>
           <div class="dropdown-menu" >
diff --git a/src/components/TimeGraph.vue b/src/components/TimeGraph.vue
index 62451e2..8c86dee 100644
--- a/src/components/TimeGraph.vue
+++ b/src/components/TimeGraph.vue
@@ -196,14 +196,14 @@
             <span class="icon" :style="{ color: selectedMode !== 'yellow-mode' ? 'white' : 'inherit' }">
               <font-awesome-icon icon="paint-roller" />
             </span>
-            <select id="colorselect" name="selectedMode" v-model="selectedMode">
+            <select id="colorselect" name="selectedMode" v-model="selectedMode" style="height: 2em;">
               <option value="green-mode">{{ t("greenmode") }}</option>
               <option value="yellow-mode">{{ t("yellowmode") }}</option>
               <option value="black-mode">{{ t("blackmode") }}</option>
             </select>
         
           <select
-              style="margin-right: 1vw;"
+              style="margin-right: 1vw; height: 2em"
               id="langselect"
               name="lang"
               v-model="lang">
@@ -785,7 +785,6 @@ export default {
 }
 
 .horizontal-bar-container {
-  margin-top: 10px;
   display: flex;
   align-items: center;
   height: 20px;
@@ -793,7 +792,7 @@ export default {
 
 .white-bar {
   background-color: white;
-  width: 10vw;
+  width: 12em;
   height: 100%;
   border: 1px solid #ccc;
   position: relative;
@@ -869,9 +868,8 @@ export default {
   color: var(--text-color);
 }
 
-.navbar-end {
-  align-items: center;
-  justify-content: flex-end;
+.navbar {
+  flex-wrap: wrap; 
 }
 
 @media screen {
diff --git a/src/de.ts b/src/de.ts
index 1dabe0c..d787681 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -29,6 +29,9 @@ export default {
   until: "bis",
   dimension: "Dimension",
   title: "Titel",
+  noemoji: "Noch kein Emoji gewählt",
+  selectemoji: "Emoji auswählen",
+  removeemoji: "Emoji entfernen",
   notes: "Notizen",
   period: "Zeitraum",
   moment: "Zeitpunkt",
diff --git a/src/en.ts b/src/en.ts
index 120cf4e..ae18131 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -29,6 +29,9 @@ export default {
   until: "until",
   dimension: "Dimension",
   title: "Title",
+  noemoji: "No emoji chosen yet",
+  selectemoji: "Select emoji",
+  removeemoji: "Remove emoji",
   notes: "Notes",
   period: "Period",
   moment: "Moment",

From 2b8bf112a992c2055f50ca5c6658bd93147cdc06 Mon Sep 17 00:00:00 2001
From: Eliasboss2006 <elias.patru@gmail.com>
Date: Wed, 28 Aug 2024 13:49:59 +0200
Subject: [PATCH 09/10] changed button color for better contrast, made small
 improvements

---
 src/components/DimensionDialogue.vue | 2 +-
 src/components/EventDialogue.vue     | 8 ++++----
 src/components/EventDisplay.vue      | 2 +-
 src/components/PersonDialogue.vue    | 2 +-
 src/components/PopUpNew.vue          | 4 ++--
 src/components/TimeGraph.vue         | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/DimensionDialogue.vue b/src/components/DimensionDialogue.vue
index 65c4bb6..1393da7 100644
--- a/src/components/DimensionDialogue.vue
+++ b/src/components/DimensionDialogue.vue
@@ -36,7 +36,7 @@
         />
       </p>
       <p class="control">
-        <a class="button is-link is-light" @click="addDimension"> {{ t("adddimension") }}</a>
+        <a class="button is-dark" @click="addDimension"> {{ t("adddimension") }}</a>
       </p>
     </div>
   </form>
diff --git a/src/components/EventDialogue.vue b/src/components/EventDialogue.vue
index 53c119e..43b98e5 100644
--- a/src/components/EventDialogue.vue
+++ b/src/components/EventDialogue.vue
@@ -145,7 +145,7 @@
       <br />
       <div class="field-body">
         <div>
-          <div style="display: flex; align-items: center;">
+          <div style="display: flex; align-items: center; margin-top: 10px;">
             <div>
               {{
                 tempEvent.emoji == null || tempEvent.emoji.length < 1
@@ -174,7 +174,7 @@
             <button
               v-if="tempEvent.emoji != null && tempEvent.emoji.length > 0"
               @click="removeEmoji"
-              class="button is-small is-danger"
+              class="button is-small"
               style="margin-left: 10px;"
             >
             <span>{{t("removeemoji")}}</span>
@@ -230,7 +230,7 @@
       </button>
       <button
         v-if="isNewEvent"
-        class="button is-link"
+        class="button is-dark"
         v-on:click="addEvent"
         :disabled="invalidEnd || tempEvent.description.length < 1"
       >
@@ -238,7 +238,7 @@
       </button>
       <button
         v-if="!isNewEvent"
-        class="button is-link"
+        class="button is-dark"
         v-on:click="editEvent"
         :disabled="invalidEnd || tempEvent.description.length < 1"
       >
diff --git a/src/components/EventDisplay.vue b/src/components/EventDisplay.vue
index e11219b..681932d 100644
--- a/src/components/EventDisplay.vue
+++ b/src/components/EventDisplay.vue
@@ -6,7 +6,7 @@
           <p class="title is-4">
             {{ emoji }}
             {{ description }}
-            <button @click="$emit('open-edit')" class="button is-link is-small">
+            <button @click="$emit('open-edit')" class="button is-dark is-small">
               <span class="icon is-small">
                 <font-awesome-icon icon="pencil-alt" />
               </span>
diff --git a/src/components/PersonDialogue.vue b/src/components/PersonDialogue.vue
index 63b2854..0398afa 100644
--- a/src/components/PersonDialogue.vue
+++ b/src/components/PersonDialogue.vue
@@ -133,7 +133,7 @@
       <button class="button is-white" @click="abort">
         {{ t("cancel") }}
       </button>
-      <button class="button is-link" @click="savePerson" :disabled="newPersonDetails.name.length < 1">
+      <button class="button is-dark" @click="savePerson" :disabled="newPersonDetails.name.length < 1">
         {{ t("done") }}
       </button>
     </div>
diff --git a/src/components/PopUpNew.vue b/src/components/PopUpNew.vue
index 52e2214..79d15c3 100644
--- a/src/components/PopUpNew.vue
+++ b/src/components/PopUpNew.vue
@@ -12,11 +12,11 @@
       </div>
       <br />
       <div class="buttons">
-        <button @click="$emit('open-edit')" class="button is-link">
+        <button @click="$emit('open-edit')" class="button is-dark">
           {{ t("continue") }}
         </button>
 
-        <button @click="$emit('save-data')" class="button is-link">
+        <button @click="$emit('save-data')" class="button is-dark">
           {{ t("save") }}
         </button>
 
diff --git a/src/components/TimeGraph.vue b/src/components/TimeGraph.vue
index 8c86dee..4c2b62a 100644
--- a/src/components/TimeGraph.vue
+++ b/src/components/TimeGraph.vue
@@ -787,7 +787,7 @@ export default {
 .horizontal-bar-container {
   display: flex;
   align-items: center;
-  height: 20px;
+  height: 19px;
 }
 
 .white-bar {

From e47aa8bc92a53d56f3d8084b111e3e81ddabe3ba Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Wed, 28 Aug 2024 14:11:10 +0200
Subject: [PATCH 10/10] version 2.2.0 ; fix constrast in MonthChooser

---
 CHANGELOG.md                    |  8 ++++
 package-lock.json               | 67 +++++++++++++++++++++++++++++----
 package.json                    |  2 +-
 src/components/MonthChooser.vue |  6 +--
 4 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8ee3da..17fd627 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # easyBiograph Version History
 
+## version 2.2.0 beta, released 28 Aug 2024
+
+* (feature) set emoji for each event
+* (usability) reorganize toolbar
+* (accessibility) check & adapt color contrasts using a tool (to level AA)
+* (bugfix) tooltip placement in front
+* (security) minor updates of libraries
+
 ## version 2.1.1 beta, released 21 Aug 2024
 
 * (feature) show 5 year grid lines (with setting to turn off)
diff --git a/package-lock.json b/package-lock.json
index f5a5e87..6b9627e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "easybiograph",
-  "version": "2.0.5-beta",
+  "version": "2.2.0-beta",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "easybiograph",
-      "version": "2.0.5-beta",
+      "version": "2.2.0-beta",
       "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.2.0",
@@ -17,6 +17,7 @@
         "d3": "^7.6.1",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3",
+        "vue3-emoji-picker": "^1.1.8",
         "vuex": "^4.0.2"
       },
       "devDependencies": {
@@ -681,6 +682,16 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.19.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.2.tgz",
@@ -2930,6 +2941,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "license": "ISC"
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3160,9 +3177,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4095,6 +4112,20 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vue3-emoji-picker": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/vue3-emoji-picker/-/vue3-emoji-picker-1.1.8.tgz",
+      "integrity": "sha512-k9tVHeQEBVLzVCLYAkFaI1nib3FJFQwdPhWD5khJkhks3ktg3g12z5wPGOSDpIuSLNtelRGvq1qdmZuJu5khfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.11.0",
+        "idb": "^7.1.0",
+        "vue": "^3.2.23"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
@@ -4482,6 +4513,11 @@
       "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
     "@rollup/rollup-android-arm-eabi": {
       "version": "4.19.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.2.tgz",
@@ -6081,6 +6117,11 @@
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
     },
+    "idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -6251,9 +6292,9 @@
       "dev": true
     },
     "micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "requires": {
         "braces": "^3.0.3",
@@ -6816,6 +6857,16 @@
         "semver": "^7.5.4"
       }
     },
+    "vue3-emoji-picker": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/vue3-emoji-picker/-/vue3-emoji-picker-1.1.8.tgz",
+      "integrity": "sha512-k9tVHeQEBVLzVCLYAkFaI1nib3FJFQwdPhWD5khJkhks3ktg3g12z5wPGOSDpIuSLNtelRGvq1qdmZuJu5khfA==",
+      "requires": {
+        "@popperjs/core": "^2.11.0",
+        "idb": "^7.1.0",
+        "vue": "^3.2.23"
+      }
+    },
     "vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
diff --git a/package.json b/package.json
index f622bf2..437d334 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easybiograph",
-  "version": "2.1.1-beta",
+  "version": "2.2.0-beta",
   "private": true,
   "type": "module",
   "author": "Alexander Rind (https://github.com/alex-rind/)",
diff --git a/src/components/MonthChooser.vue b/src/components/MonthChooser.vue
index abfee5f..182a800 100644
--- a/src/components/MonthChooser.vue
+++ b/src/components/MonthChooser.vue
@@ -71,14 +71,14 @@ const age = computed(() => {
   if (minYear.value && minMonth.value !== undefined) {
     const ageMon =
       (year.value - minYear.value) * 12 + (month.value - minMonth.value);
-    
+
     const yearsLabel = langIsGerman.value ? "Jahre" : "years";
     const monthsLabel = langIsGerman.value ? "Monate" : "months";
     const invalidLabel = langIsGerman.value ? "ungültig" : "invalid";
 
     return ageMon >= 0
       ? `${Math.floor(ageMon / 12)} ${yearsLabel}, ${ageMon % 12} ${monthsLabel}`
-      : invalidLabel; 
+      : invalidLabel;
   } else {
     return undefined;
   }
@@ -192,6 +192,6 @@ watch([day, month, year], ([newDay, newMonth, newYear]) => {
 
 <style scoped lang="scss">
 .age {
-  color: hsl(0, 0%, 71%);
+  color: hsl(0, 0%, 45%);
 }
 </style>