Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests 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,19 +29,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<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 }})
</header>
<div v-if="shown" class="body">
<button
v-for="emoji in emojis"
:key="emoji"
:data-emoji="emoji"
class="_button item"
@pointerenter="computeButtonTitle"
@click="emit('chosen', emoji, $event)"
>
<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
</button>
</div>
<div v-if="shown" style="padding-left: 9px;">
<MkEmojiPickerSection
v-for="child in customEmojiTree"
@ -55,6 +42,19 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ child.value || i18n.ts.other }}
</MkEmojiPickerSection>
</div>
<div v-if="shown" class="body">
<button
v-for="emoji in emojis"
:key="emoji"
:data-emoji="emoji"
class="_button item"
@pointerenter="computeButtonTitle"
@click="emit('chosen', emoji, $event)"
>
<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
</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: [] };
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;
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) {
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);
existingNode = newNode;
}