From c190b720d3d4f3aa93a0556f63be4b09e241108c Mon Sep 17 00:00:00 2001 From: meron Date: Sat, 2 Dec 2023 15:26:46 +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(#12132)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update CHANGELOG.md * Feat:emoji picker folder select * Fix: lint error * Fix: lint error 2 * Fix: lint error 3 * カスタム絵文字のカテゴリ表示部分が長かったので短くした * エフェクトが壊れて出ないのを修正 * padding 18px -> 9px * Update CHANGELOG.md * Revert: en-US.yml * chg: Folder -> folder * chg: isChildrenExits -> isChildren * chg: isChildren -> categoryFolderFlag * カテゴリ末尾が / の場合ピッカーから消失するので「その他」と扱い対応 * 特定のパターンのカテゴリ名でピッカーに出てこないのを修正 「i18n.ts.other」や「/」始まりの場合壊れる * chg: categoryFolderFlag -> hasChildSection * code format * Del: ti-fw * fix * 絵文字とフォルダの表示順序入れ替え * ネストした場合にパネルでどこまでがどのフォルダのものかをわかりやすくした * fix lint * カテゴリの名前が長いと表示がおかしくなる問題を修正 Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com> --------- Co-authored-by: tamaina Co-authored-by: syuilo Co-authored-by: atsuchan <83960488+atsu1125@users.noreply.github.com> Co-authored-by: Masaya Suzuki <15100604+massongit@users.noreply.github.com> Co-authored-by: Kagami Sascha Rosylight Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com> Co-authored-by: xianon Co-authored-by: kabo2468 <28654659+kabo2468@users.noreply.github.com> Co-authored-by: YS <47836716+yszkst@users.noreply.github.com> Co-authored-by: Khsmty Co-authored-by: Soni L Co-authored-by: mei23 Co-authored-by: daima3629 <52790780+daima3629@users.noreply.github.com> Co-authored-by: Windymelt <1113940+windymelt@users.noreply.github.com> Co-authored-by: Ebise Lutica <7106976+EbiseLutica@users.noreply.github.com> Co-authored-by: nenohi Co-authored-by: Acid Chicken (硫酸鶏) Co-authored-by: rinsuki <428rinsuki+git@gmail.com> Co-authored-by: FineArchs <133759614+FineArchs@users.noreply.github.com> Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com> --- CHANGELOG.md | 1 + locales/index.d.ts | 1 + locales/ja-JP.yml | 1 + .../src/components/MkEmojiPicker.section.vue | 47 ++++++++++++++-- .../frontend/src/components/MkEmojiPicker.vue | 53 ++++++++++++++++--- packages/frontend/src/scripts/emojilist.ts | 6 +++ 6 files changed, 98 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a51204781944..4f7389c31c16 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -177,6 +177,7 @@ ### Client - Enhance: TLの返信表示オプションを記憶するように - Enhance: 投稿されてから時間が経過しているノートであることを視覚的に分かりやすく +- Feat: 絵文字ピッカーのカテゴリに「/」を入れることでフォルダ分け表示できるように ### Server - Enhance: タイムライン取得時のパフォーマンスを向上 diff --git a/locales/index.d.ts b/locales/index.d.ts index 402c2413f882..a8f54e2e18e7 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -314,6 +314,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 2b2f05aa8829..04fb1f947d55 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -311,6 +311,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..35de9bbb5e77 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 5b420c499e13..603f676d5d96 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,35 @@ 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; @@ -572,8 +610,7 @@ defineExpose({ position: sticky; top: 0; left: 0; - height: 32px; - line-height: 32px; + line-height: 28px; z-index: 1; padding: 0 8px; font-size: 12px; 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[]; +}