oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues 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
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">