Merge pull request #28 from fhstp/emoji_chooser

Emoji chooser

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)

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/)",
@@ -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": {

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" }
   };
 

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>

src/components/EventDialogue.vue

@@ -138,6 +138,64 @@
       </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; margin-top: 10px;">
+            <div>
+              {{
+                tempEvent.emoji == null || tempEvent.emoji.length < 1
+                  ? t("noemoji")
+                  : tempEvent.emoji
+              }}
+            </div>
+          </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>{{ t("selectemoji") }}</span>
+            </button>
+            <button
+              v-if="tempEvent.emoji != null && tempEvent.emoji.length > 0"
+              @click="removeEmoji"
+              class="button is-small"
+              style="margin-left: 10px;"
+            >
+            <span>{{t("removeemoji")}}</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>
@@ -172,15 +230,15 @@
       </button>
       <button
         v-if="isNewEvent"
-        class="button is-link"
+        class="button is-dark"
         v-on:click="addEvent"
         :disabled="invalidEnd || tempEvent.description.length < 1"
       >
         {{ t("done") }}
       </button>
       <button
         v-if="!isNewEvent"
-        class="button is-link"
+        class="button is-dark"
         v-on:click="editEvent"
         :disabled="invalidEnd || tempEvent.description.length < 1"
       >
@@ -200,10 +258,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 +272,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 +383,17 @@ export default {
   z-index: 10;
 }
 
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  width: 20em;
+}
+
+.dropdown.is-active .dropdown-menu {
+  display: block;
+}
+
 @media screen and (min-width: 769px), print {
   .field-body {
     flex-grow: 3;

src/components/EventDisplay.vue

@@ -4,8 +4,9 @@
       <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">
+            <button @click="$emit('open-edit')" class="button is-dark is-small">
               <span class="icon is-small">
                 <font-awesome-icon icon="pencil-alt" />
               </span>
@@ -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 : ""
 );

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>

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>