mirror/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-28 22:49:24 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

絵文字ピッカーのカテゴリの階層を表示するように・サブカテゴリを絵文字より上に (MisskeyIO#202)

Browse Source
This commit is contained in:
まっちゃとーにゅ 2023-10-30 08:50:21 +09:00 committed by GitHub
parent 2bad8941d0
commit 343ae413ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/frontend/src/components/MkEmojiPicker.section.vue
View File

@ -29,6 +29,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<header class="_acrylic" @click="shown = !shown"> <header class="_acrylic" @click="shown = !shown">
<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-folder"></i>:{{ customEmojiTree.length }} <i class="ti ti-icons"></i>:{{ emojis.length }}) <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-folder"></i>:{{ customEmojiTree.length }} <i class="ti ti-icons"></i>:{{ emojis.length }})
</header> </header>
<div v-if="shown" style="padding-left: 9px;">
<MkEmojiPickerSection
v-for="child in customEmojiTree"
:key="`custom:${child.value}`"
:initialShown="initialShown"
:emojis="computed(() => customEmojis.filter(e => e.category === child.category).map(e => `:${e.name}:`))"
:hasChildSection="child.children.length !== 0"
:customEmojiTree="child.children"
@chosen="nestedChosen"
>
{{ child.value || i18n.ts.other }}
</MkEmojiPickerSection>
</div>
<div v-if="shown" class="body"> <div v-if="shown" class="body">
<button <button
v-for="emoji in emojis" v-for="emoji in emojis"
@ -42,19 +55,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/> <MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
</button> </button>
</div> </div>
<div v-if="shown" style="padding-left: 9px;">
<MkEmojiPickerSection
v-for="child in customEmojiTree"
:key="`custom:${child.value}`"
:initialShown="initialShown"
:emojis="computed(() => customEmojis.filter(e => e.category === child.category).map(e => `:${e.name}:`))"
:hasChildSection="child.children.length !== 0"
:customEmojiTree="child.children"
@chosen="nestedChosen"
>
{{ child.value || i18n.ts.other }}
</MkEmojiPickerSection>
</div>
</section> </section>
</template> </template>

12
packages/frontend/src/components/MkEmojiPicker.vue
View File

@ -156,13 +156,19 @@ const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
const customEmojiFolderRoot: CustomEmojiFolderTree = { value: "", category: "", children: [] }; const customEmojiFolderRoot: CustomEmojiFolderTree = { value: "", category: "", children: [] };
function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree { function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree {
const parts = input.split('/').map(p => p.trim()); const parts = (input && input !== 'null' ? input : '').split('/');
let currentNode: CustomEmojiFolderTree = root; let currentNode: CustomEmojiFolderTree = root;
for (const part of parts) { for (const part of parts) {
let existingNode = currentNode.children.find((node) => node.value === part); const path = currentNode.value ? `${currentNode.value}/${part.trim()}` : part.trim();
let existingNode = currentNode.children.find((node) => node.value === path);
if (!existingNode) { if (!existingNode) {
const newNode: CustomEmojiFolderTree = { value: part, category: input, children: [] }; const newNode: CustomEmojiFolderTree = {
value: path,
category: currentNode.category ? `${currentNode.category}/${part}` : part,
children: [],
};
currentNode.children.push(newNode); currentNode.children.push(newNode);
existingNode = newNode; existingNode = newNode;
} }