Merge pull request #148 from fhstp/emoji_chooser

Emoji chooser

CHANGELOG.md

@@ -1,5 +1,11 @@
 # easyNWK Version History
 
+## version 2.5.0, released ... 2024
+
+* (feature) optionally set emoji for ego and each alter
+* (usability) version slider always on as soon as more than 1 version
+* (usability) filename of PDF with date in YYYY-MM-dd
+
 ## version 2.4.0, released 28 Aug 2024
 
 * (feature) opening and importing .nwk files created with easyNWK 1.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easynwk",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "private": true,
   "author": "Alexander Rind (https://github.com/alex-rind/)",
   "repository": "https://github.com/fhstp/easynwk-web/",
@@ -20,6 +20,7 @@
     "d3": "^7.0.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
+    "vue3-emoji-picker": "^1.1.8",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

src/assets/variables.scss

@@ -1,7 +1,7 @@
 // Set your brand colors
 $nwkorange: hsl(32, 100%, 50%);
 $fhstpblue: #005096;
-$nwkhorizon: #238b45;
+$nwkhorizon: #1f793c;
 
 // Palette URL: http://paletton.com/#uid=30D0k0kw0w0ghLAnzAyxVmsHYdj */
 

src/components/AlteriEditForm.vue

@@ -62,6 +62,66 @@
       </div>
     </div>
 
+    <div class="field is-horizontal" v-if="emoji">
+      <div class="field-label is-normal">
+        <label class="label">Emoji</label>
+      </div>
+      <br />
+      <div class="field-body">
+        <div>
+          <div style="display: flex; align-items: center; margin-top: 10px">
+            <div>
+              {{
+                selectedEmoji == null || selectedEmoji.length < 1
+                  ? t("noemoji")
+                  : selectedEmoji
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="field is-horizontal" v-if="emoji">
+      <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
+              type="button"
+              class="button is-small"
+              @click="toggleEmojiPicker"
+            >
+              <span>{{ t("selectemoji") }}</span>
+            </button>
+            <button
+              v-if="selectedEmoji != null && selectedEmoji.length > 0"
+              @click="removeEmoji"
+              type="button"
+              class="button is-small"
+              style="margin-left: 10px"
+            >
+              <span>{{ t("removeemoji") }}</span>
+            </button>
+          </div>
+          <div class="dropdown-menu">
+            <div>
+              <div>
+                <EmojiPicker
+                  v-model="selectedEmoji"
+                  :native="true"
+                  :disableSkinTones="true"
+                  @select="onSelectEmoji"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="field is-horizontal">
       <div class="field-label">
         <label class="label checkbox" for="chk-human">{{ t("human") }}</label>
@@ -229,6 +289,8 @@ import { SYMBOL_DECEASED } from "@/assets/utils";
 import { TAB_BASE } from "@/store/sessionModule";
 import de from "@/de";
 import en from "@/en";
+import EmojiPicker from "vue3-emoji-picker";
+import "vue3-emoji-picker/css";
 
 type InputType = HTMLInputElement | HTMLTextAreaElement;
 
@@ -258,12 +320,17 @@ export default defineComponent({
     // toogled after each click on the map (resets keyboard cursor)
     mapclicked: Boolean,
   },
+  components: {
+    EmojiPicker,
+  },
+
   setup(props) {
     const store = useStore();
 
     const addingNewAlter = ref(!(props.alter?.name.length > 0));
 
-    const selectedRoleLabel = ref(props.alter?.role);
+
+    const showEmojiPicker = ref(false);
 
     // name field is special because it must not be empty
     // the data item is only used for validity check & never stored
@@ -282,6 +349,32 @@ export default defineComponent({
       return props.alter?.distance <= 0;
     });
 
+    const selectedEmoji = ref(props.alter?.emoji || "");
+
+
+    function onSelectEmoji(emoji: any) {
+      selectedEmoji.value = emoji.i;
+      showEmojiPicker.value = false;
+      commitEditEmoji(emoji.i);
+    }
+
+    const commitEditEmoji = (emoji: string) => {
+      const payload = {
+        index: store.state.session.editIndex,
+        changes: { emoji: emoji },
+      };
+      store.commit("editAlter", payload);
+    };
+
+    function removeEmoji() {
+      selectedEmoji.value = "";
+      commitEditEmoji("");
+    }
+
+    function toggleEmojiPicker() {
+      showEmojiPicker.value = !showEmojiPicker.value;
+    }
+
     // getter & setter for select dropdown
     function accessor<type>(field: keyof Alter) {
       return computed({
@@ -437,14 +530,20 @@ export default defineComponent({
       alterDeceased: accessor<boolean>("deceased"),
       alterEdgeType: accessor<number>("edgeType"),
       isConnectable: computed(() => isConnectable(props.alter as Alter)),
+      emoji: computed(() => store.state.view.emoji),
       commitEdit,
       focusRole,
+      onSelectEmoji,
+      removeEmoji,
+      toggleEmojiPicker,
       blurRole,
       genderOptions,
       roleOptions,
       engRoleOptions,
       editAlterFinished,
       cancelAddAlter,
+      selectedEmoji,
+      showEmojiPicker,
       altername,
       domButton,
       SYMBOL_DECEASED,
@@ -475,7 +574,7 @@ input::-webkit-calendar-picker-indicator {
 
 @import "~bulma/sass/base/_all.sass";
 .autovalue {
-  color: $grey-light;
+  color: #656565;
 }
 
 .autovalue:focus {
@@ -485,4 +584,15 @@ input::-webkit-calendar-picker-indicator {
 select > option {
   color: $text-strong;
 }
+
+.dropdown-menu {
+  display: none;
+  position: sticky;
+  z-index: 10;
+  width: 20em;
+}
+
+.dropdown.is-active .dropdown-menu {
+  display: block;
+}
 </style>

src/components/AlteriPanelEntry.vue

@@ -203,8 +203,7 @@ export default defineComponent({
   padding: 3px 0px;
 }
 
-@import "~bulma/sass/base/_all.sass";
 .autovalue {
-  color: $grey-light;
+  color: #656565;
 }
 </style>