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

絵文字ピッカーのカテゴリのフォルダ分けの条件の変更・長いカテゴリ名の表示調整・セクションの背景の追加 (MisskeyIO#204)

Browse Source 
* ネストした場合にパネルでどこまでがどのフォルダのものかをわかりやすくした
Co-authored-by: meronmks <meronmks.8914@gmail.com>
This commit is contained in:
まっちゃとーにゅ 2023-11-03 01:54:47 +09:00 committed by GitHub
parent f66f78d912
commit c29ec98e3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
<section v-if="!hasChildSection">
<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
<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-icons"></i>:{{ emojis.length }})
</header>
@ -25,21 +25,21 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</section>
<!-- フォルダの中にはカスタム絵文字やフォルダがある -->
<section v-else>
<section v-else v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
<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" style="padding-left: 9px;">
<MkEmojiPickerSection
v-for="child in customEmojiTree"
:key="`custom:${child.value}`"
:key="`custom:${child.category}`"
: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 }}
{{ child.category || i18n.ts.other }}
</MkEmojiPickerSection>
</div>
<div v-if="shown" class="body">

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

@ -74,14 +74,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
<XSection
v-for="child in customEmojiFolderRoot.children"
:key="`custom:${child.value}`"
:key="`custom:${child.category}`"
:initialShown="false"
:emojis="computed(() => customEmojis.filter(e => child.value === '' ? (e.category === 'null' || !e.category) : e.category === child.value).filter(filterAvailable).map(e => `:${e.name}:`))"
:emojis="computed(() => customEmojis.filter(e => child.category === '' ? (e.category === 'null' || !e.category) : e.category === child.category).filter(filterAvailable).map(e => `:${e.name}:`))"
:hasChildSection="child.children.length !== 0"
:customEmojiTree="child.children"
@chosen="chosen"
>
{{ child.value || i18n.ts.other }}
{{ child.category || i18n.ts.other }}
</XSection>
</div>
<div v-once class="group">
@ -153,20 +153,19 @@ const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
const customEmojiFolderRoot: CustomEmojiFolderTree = { value: "", category: "", children: [] };
const customEmojiFolderRoot: CustomEmojiFolderTree = { category: "", children: [] };
function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree {
const parts = (input && input !== 'null' ? input : '').split('/');
const parts = (input && input !== 'null' ? input : '').split(' / ');
let currentNode: CustomEmojiFolderTree = root;
for (const part of parts) {
const path = currentNode.value ? `${currentNode.value}/${part.trim()}` : part.trim();
const path = currentNode.category ? `${currentNode.category} / ${part}` : part;
let existingNode = currentNode.children.find((node) => node.value === path);
let existingNode = currentNode.children.find((node) => node.category === path);
if (!existingNode) {
const newNode: CustomEmojiFolderTree = {
value: path,
category: currentNode.category ? `${currentNode.category}/${part}` : part,
category: path,
children: [],
};
currentNode.children.push(newNode);
@ -616,8 +615,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;

1
packages/frontend/src/scripts/emojilist.ts
View File

@ -45,7 +45,6 @@ export function getEmojiName(char: string): string | null {
}
export interface CustomEmojiFolderTree {
value: string;
category: string;
children: CustomEmojiFolderTree[];
}