From 9a85dc95793d4102afbfbd1dd2c7e0aa51bff268 Mon Sep 17 00:00:00 2001 From: julia221501 Date: Thu, 20 Jun 2024 15:20:23 +0200 Subject: [PATCH 1/9] Emoji test --- package-lock.json | 91 ++++++++++++++++++++++++++++++- package.json | 2 + src/components/AlteriEditForm.vue | 33 +++++++++++ src/data/Alter.ts | 2 + src/shims-vue.d.ts | 9 +-- 5 files changed, 131 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8d467d6..d105969 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "easynwk", - "version": "2.1.0", + "version": "2.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "easynwk", - "version": "2.1.0", + "version": "2.2.0", "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-solid-svg-icons": "^5.15.3", @@ -16,7 +16,9 @@ "core-js": "^3.8.3", "d3": "^7.0.0", "vue": "^3.2.13", + "vue-emoji-mart": "^1.0.5", "vue-router": "^4.0.3", + "vue3-emoji-picker": "^1.1.8", "vuex": "^4.0.0" }, "devDependencies": { @@ -1986,6 +1988,15 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "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==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sideway/address": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", @@ -7773,6 +7784,11 @@ "postcss": "^8.1.0" } }, + "node_modules/idb": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz", + "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==" + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -8621,6 +8637,11 @@ "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", "dev": true }, + "node_modules/measure-scrollbar": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/measure-scrollbar/-/measure-scrollbar-0.1.0.tgz", + "integrity": "sha512-8n7yR0PVrp/YmvWoRuiumlA0l6+joJg6PA5/uFb8frsd7ZV2It1tnNjqCrLNuMtU7yOPqJiYmm7+VwcWQwvqRQ==" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -11752,6 +11773,11 @@ "node": ">=4.2.0" } }, + "node_modules/unfetch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-3.1.2.tgz", + "integrity": "sha512-L0qrK7ZeAudGiKYw6nzFjnJ2D5WHblUBwmHIqtPS6oKUd+Hcpk7/hKsSmcHsTlpd1TbTNsiRBUKRq3bHLNIqIw==" + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -11912,6 +11938,15 @@ "@vue/shared": "3.2.39" } }, + "node_modules/vue-emoji-mart": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/vue-emoji-mart/-/vue-emoji-mart-1.0.5.tgz", + "integrity": "sha512-RpSVjVjRhxYNEGEUDRow17KRt60gMvGowNS5jPHD0lgBRFboTan0nQLvkNrSyw3SgiDbRmjwC2NzyM9NBwhi/Q==", + "dependencies": { + "measure-scrollbar": "^0.1.0", + "unfetch": "^3.0.0" + } + }, "node_modules/vue-eslint-parser": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", @@ -12130,6 +12165,19 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "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==", + "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", @@ -14259,6 +14307,11 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "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==" + }, "@sideway/address": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", @@ -18634,6 +18687,11 @@ "dev": true, "requires": {} }, + "idb": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz", + "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==" + }, "ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -19279,6 +19337,11 @@ "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", "dev": true }, + "measure-scrollbar": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/measure-scrollbar/-/measure-scrollbar-0.1.0.tgz", + "integrity": "sha512-8n7yR0PVrp/YmvWoRuiumlA0l6+joJg6PA5/uFb8frsd7ZV2It1tnNjqCrLNuMtU7yOPqJiYmm7+VwcWQwvqRQ==" + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -21544,6 +21607,11 @@ "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", "dev": true }, + "unfetch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-3.1.2.tgz", + "integrity": "sha512-L0qrK7ZeAudGiKYw6nzFjnJ2D5WHblUBwmHIqtPS6oKUd+Hcpk7/hKsSmcHsTlpd1TbTNsiRBUKRq3bHLNIqIw==" + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -21661,6 +21729,15 @@ "@vue/shared": "3.2.39" } }, + "vue-emoji-mart": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/vue-emoji-mart/-/vue-emoji-mart-1.0.5.tgz", + "integrity": "sha512-RpSVjVjRhxYNEGEUDRow17KRt60gMvGowNS5jPHD0lgBRFboTan0nQLvkNrSyw3SgiDbRmjwC2NzyM9NBwhi/Q==", + "requires": { + "measure-scrollbar": "^0.1.0", + "unfetch": "^3.0.0" + } + }, "vue-eslint-parser": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", @@ -21825,6 +21902,16 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "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 f096388..b651a14 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "core-js": "^3.8.3", "d3": "^7.0.0", "vue": "^3.2.13", + "vue-emoji-mart": "^1.0.5", "vue-router": "^4.0.3", + "vue3-emoji-picker": "^1.1.8", "vuex": "^4.0.0" }, "devDependencies": { diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue index c3bf956..e9dbbba 100644 --- a/src/components/AlteriEditForm.vue +++ b/src/components/AlteriEditForm.vue @@ -62,6 +62,19 @@ +
+
+ +
+
+
+
+ +
+
+
+
+
@@ -229,6 +242,8 @@ import { SYMBOL_DECEASED } from "@/assets/utils"; import { TAB_BASE } from "@/store/viewOptionsModule"; import de from "@/de"; import en from "@/en"; +import EmojiPicker from "vue3-emoji-picker"; +import "vue3-emoji-picker/css"; type InputType = HTMLInputElement | HTMLTextAreaElement; @@ -258,6 +273,10 @@ export default defineComponent({ // toogled after each click on the map (resets keyboard cursor) mapclicked: Boolean, }, + components: { + EmojiPicker, + }, + setup(props) { const store = useStore(); @@ -281,6 +300,19 @@ export default defineComponent({ const invalidPosition = computed(() => { return props.alter?.distance <= 0; }); + function onSelectEmoji(emoji: any) { + console.log(emoji); + /* + // result + { + i: "😚", + n: ["kissing face"], + r: "1f61a", // with skin tone + t: "neutral", // skin tone + u: "1f61a" // without tone + } + */ + } // getter & setter for select dropdown function accessor(field: keyof Alter) { @@ -439,6 +471,7 @@ export default defineComponent({ isConnectable: computed(() => isConnectable(props.alter as Alter)), commitEdit, focusRole, + onSelectEmoji, blurRole, genderOptions, roleOptions, diff --git a/src/data/Alter.ts b/src/data/Alter.ts index a3c7b91..d741d10 100644 --- a/src/data/Alter.ts +++ b/src/data/Alter.ts @@ -23,6 +23,7 @@ export interface Alter { /** distance from center normalized to 100 for the outer horizont. */ distance: number; + emoji: string; } export function initAlter(): Alter { @@ -41,6 +42,7 @@ export function initAlter(): Alter { edgeTypeByUser: -1, angle: 0, distance: 0, + emoji: "", }; } diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts index 3804a43..347cd58 100644 --- a/src/shims-vue.d.ts +++ b/src/shims-vue.d.ts @@ -1,6 +1,7 @@ /* eslint-disable */ -declare module '*.vue' { - import type { DefineComponent } from 'vue' - const component: DefineComponent<{}, {}, any> - export default component +declare module "*.vue" { + import type { DefineComponent } from "vue"; + const component: DefineComponent<{}, {}, any>; + export default component; } +declare module "vue3-emoji-picker"; From e9d022adb14bccf9b8ec4898fc0e77e27fe41071 Mon Sep 17 00:00:00 2001 From: julia221501 Date: Thu, 27 Jun 2024 15:02:54 +0200 Subject: [PATCH 2/9] Emoji als Symbol in der NWK --- src/components/AlteriEditForm.vue | 54 ++++++++++++++++++++++++------- src/components/NetworkMap.vue | 39 +++++++++++++++------- src/de.ts | 1 + src/en.ts | 1 + 4 files changed, 71 insertions(+), 24 deletions(-) diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue index e9dbbba..6282067 100644 --- a/src/components/AlteriEditForm.vue +++ b/src/components/AlteriEditForm.vue @@ -69,7 +69,31 @@
- + +
+
+
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ {{ t("selectedEmoji") + selectedEmoji }}
@@ -284,6 +308,8 @@ export default defineComponent({ const selectedRoleLabel = ref(props.alter?.role); + const showEmojiPicker = ref(!!props.alter?.emoji); + // name field is special because it must not be empty // the data item is only used for validity check & never stored const alterNameInUI = ref(props.alter?.name); @@ -300,20 +326,22 @@ export default defineComponent({ const invalidPosition = computed(() => { return props.alter?.distance <= 0; }); + + const selectedEmoji = ref(props.alter?.emoji || ""); + function onSelectEmoji(emoji: any) { - console.log(emoji); - /* - // result - { - i: "😚", - n: ["kissing face"], - r: "1f61a", // with skin tone - t: "neutral", // skin tone - u: "1f61a" // without tone - } - */ + selectedEmoji.value = emoji.i; + commitEditEmoji(emoji.i); } + const commitEditEmoji = (emoji: string) => { + const payload = { + index: store.state.view.editIndex, + changes: { emoji: emoji }, + }; + store.commit("editAlter", payload); + }; + // getter & setter for select dropdown function accessor(field: keyof Alter) { return computed({ @@ -478,6 +506,8 @@ export default defineComponent({ engRoleOptions, editAlterFinished, cancelAddAlter, + selectedEmoji, + showEmojiPicker, altername, domButton, SYMBOL_DECEASED, diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue index 47b872f..fc153f4 100644 --- a/src/components/NetworkMap.vue +++ b/src/components/NetworkMap.vue @@ -136,18 +136,33 @@ - + diff --git a/src/de.ts b/src/de.ts index 19b0993..2ee7c7e 100644 --- a/src/de.ts +++ b/src/de.ts @@ -121,6 +121,7 @@ export default { role: "Rolle", human: "Mensch", humanno: "Mensch: Nein", + selectedEmoji: "Gewähltes Emoji: ", agetitle: "Optional,soziales Alter der Kontaktperson", deceased: "verstorben", deceasedyes: "Verstroben: Ja", diff --git a/src/en.ts b/src/en.ts index 4123429..462f1e8 100644 --- a/src/en.ts +++ b/src/en.ts @@ -120,6 +120,7 @@ export default { role: "Role", human: "Human", humanno: "Human: No", + selectedEmoji: "Chosen emoji: ", agetitle: "Optional, social age of the contact", deceased: "deceased", deceasedyes: "Deceased: Yes", From 08fae987d9a4f6a44e57057689b888ac2a77f830 Mon Sep 17 00:00:00 2001 From: julia221501 Date: Sun, 11 Aug 2024 21:49:34 +0200 Subject: [PATCH 3/9] Emoji in Ansichtseinstellungen --- src/components/AlteriEditForm.vue | 28 +++++++++++++--------------- src/components/NetworkMap.vue | 3 ++- src/components/ViewOptionsPanel.vue | 7 +++++++ src/data/ViewOptions.ts | 2 ++ src/de.ts | 1 + src/en.ts | 1 + 6 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue index 1c06383..4696079 100644 --- a/src/components/AlteriEditForm.vue +++ b/src/components/AlteriEditForm.vue @@ -62,26 +62,27 @@
-
+
+
- +
+ {{ + selectedEmoji.length < 1 + ? "Noch kein Emoji gewählt" + : t("selectedEmoji") + selectedEmoji + }} +
-
+
@@ -90,12 +91,8 @@
- -
-
- {{ t("selectedEmoji") + selectedEmoji }} -
+
@@ -336,7 +333,7 @@ export default defineComponent({ const commitEditEmoji = (emoji: string) => { const payload = { - index: store.state.view.editIndex, + index: store.state.session.editIndex, changes: { emoji: emoji }, }; store.commit("editAlter", payload); @@ -497,6 +494,7 @@ export default defineComponent({ alterDeceased: accessor("deceased"), alterEdgeType: accessor("edgeType"), isConnectable: computed(() => isConnectable(props.alter as Alter)), + emoji: computed(() => store.state.view.emoji), commitEdit, focusRole, onSelectEmoji, diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue index ab16efa..1335a49 100644 --- a/src/components/NetworkMap.vue +++ b/src/components/NetworkMap.vue @@ -139,7 +139,7 @@