From 08c5e1616e3e25b21d50db7ec5b4d75306f0fafd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?= =?UTF-8?q?=E3=81=AB=E3=82=85?= <17376330+u1-liquid@users.noreply.github.com> Date: Mon, 30 Oct 2023 00:54:38 +0900 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E7=B5=B5=E6=96=87=E5=AD=97?= =?UTF-8?q?=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC=E3=81=AE=E3=82=AB=E3=83=86?= =?UTF-8?q?=E3=82=B4=E3=83=AA=E3=82=92=E5=A4=9A=E9=9A=8E=E5=B1=A4=E3=83=95?= =?UTF-8?q?=E3=82=A9=E3=83=AB=E3=83=80=E3=81=A7=E5=88=86=E9=A1=9E=E3=81=A7?= =?UTF-8?q?=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(misskey-dev#12?= =?UTF-8?q?132)=20(MisskeyIO#196)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: meronmks Co-authored-by: mattyatea --- locales/en-US.yml | 1 + locales/index.d.ts | 1 + locales/ja-JP.yml | 1 + .../src/components/MkEmojiPicker.section.vue | 47 ++++++++++++++++-- .../frontend/src/components/MkEmojiPicker.vue | 49 ++++++++++++++++--- packages/frontend/src/scripts/emojilist.ts | 6 +++ 6 files changed, 96 insertions(+), 9 deletions(-) diff --git a/locales/en-US.yml b/locales/en-US.yml index b693f791bb..d448686187 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -307,6 +307,7 @@ folderName: "Folder name" createFolder: "Create a folder" renameFolder: "Rename this folder" deleteFolder: "Delete this folder" +folder: "Folder" addFile: "Add a file" emptyDrive: "Your Drive is empty" emptyFolder: "This folder is empty" diff --git a/locales/index.d.ts b/locales/index.d.ts index c41f40bbcf..b0b8a256f2 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -310,6 +310,7 @@ export interface Locale { "createFolder": string; "renameFolder": string; "deleteFolder": string; + "folder": string; "addFile": string; "emptyDrive": string; "emptyFolder": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 3464b1be40..979022e33a 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -307,6 +307,7 @@ folderName: "フォルダー名" createFolder: "フォルダーを作成" renameFolder: "フォルダー名を変更" deleteFolder: "フォルダーを削除" +folder: "フォルダー" addFile: "ファイルを追加" emptyDrive: "ドライブは空です" emptyFolder: "フォルダーは空です" diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue index 4c8c0c7902..fda847bef9 100644 --- a/packages/frontend/src/components/MkEmojiPicker.section.vue +++ b/packages/frontend/src/components/MkEmojiPicker.section.vue @@ -5,9 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 169d0cb226..9d96ed3de6 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -73,18 +73,20 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.customEmojis }}
- {{ category || i18n.ts.other }} + {{ child.value || i18n.ts.other }}
{{ i18n.ts.emoji }}
- {{ category }} + {{ category }}
@@ -100,7 +102,14 @@ SPDX-License-Identifier: AGPL-3.0-only import { ref, shallowRef, computed, watch, onMounted } from 'vue'; import * as Misskey from 'misskey-js'; import XSection from '@/components/MkEmojiPicker.section.vue'; -import { emojilist, emojiCharByCategory, UnicodeEmojiDef, unicodeEmojiCategories as categories, getEmojiName } from '@/scripts/emojilist'; +import { + emojilist, + emojiCharByCategory, + UnicodeEmojiDef, + unicodeEmojiCategories as categories, + getEmojiName, + CustomEmojiFolderTree +} from '@/scripts/emojilist.js'; import MkRippleEffect from '@/components/MkRippleEffect.vue'; import * as os from '@/os'; import { isTouchUsing } from '@/scripts/touch'; @@ -144,6 +153,34 @@ const searchResultCustom = ref([]); const searchResultUnicode = ref([]); const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index'); +const customEmojiFolderRoot: CustomEmojiFolderTree = { value: "", category: "", children: [] }; + +function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree { + const parts = input.split('/').map(p => p.trim()); + let currentNode: CustomEmojiFolderTree = root; + + for (const part of parts) { + let existingNode = currentNode.children.find((node) => node.value === part); + if (!existingNode) { + const newNode: CustomEmojiFolderTree = { value: part, category: input, children: [] }; + currentNode.children.push(newNode); + existingNode = newNode; + } + + currentNode = existingNode; + } + + return currentNode; +} + +customEmojiCategories.value.forEach(ec => { + if (ec !== null) { + parseAndMergeCategories(ec, customEmojiFolderRoot); + } +}); + +parseAndMergeCategories('', customEmojiFolderRoot); + watch(q, () => { if (emojisEl.value) emojisEl.value.scrollTop = 0; diff --git a/packages/frontend/src/scripts/emojilist.ts b/packages/frontend/src/scripts/emojilist.ts index 4159da84c8..8885bf4b7f 100644 --- a/packages/frontend/src/scripts/emojilist.ts +++ b/packages/frontend/src/scripts/emojilist.ts @@ -43,3 +43,9 @@ export function getEmojiName(char: string): string | null { return emojilist[idx].name; } } + +export interface CustomEmojiFolderTree { + value: string; + category: string; + children: CustomEmojiFolderTree[]; +}