From c53dd22afaabdc2fa5164ad7b293bf3f01d08c9d Mon Sep 17 00:00:00 2001 From: KanariKanaru <93921745+kanarikanaru@users.noreply.github.com> Date: Fri, 3 Nov 2023 10:41:01 +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 5f588efd443a..28fa37c25417 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -311,6 +311,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 242a7275e387..1617b67bea86 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -311,6 +311,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 87a47dbd331f..02d63eb59b1d 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -308,6 +308,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 08297ea5baef..fda847bef97d 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 c7636a4f61a8..027315b49960 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.js'; +import { + emojilist, + emojiCharByCategory, + UnicodeEmojiDef, + unicodeEmojiCategories as categories, + getEmojiName, + CustomEmojiFolderTree +} from '@/scripts/emojilist.js'; import MkRippleEffect from '@/components/MkRippleEffect.vue'; import * as os from '@/os.js'; import { isTouchUsing } from '@/scripts/touch.js'; @@ -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 4159da84c883..8885bf4b7f5f 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[]; +}