yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-01-19 00:08:41 -06:00
Code Issues Projects Releases Packages Wiki Activity

add emoji picker preview

Browse source
This commit is contained in:
fly_mc 2024-10-02 12:26:16 +08:00
parent 490fb3812f
commit 79078ce09e
1 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/frontend/src/components/MkEmojiPicker.section.vue
View file

@ -8,7 +8,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） --> <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);"> <section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
<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-icons"></i>:{{ emojis.length }}) <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i>
<span class="emoji-example">
<MkCustomEmoji v-if="emojiExample[0] === ':'" class="emoji" :name="emojiExample" :normal="true" :fallbackToImage="true"/>
<MkEmoji v-else class="emoji" :emoji="emojiExample" :normal="true"/>
</span>
<slot></slot>
(<i class="ph-smiley-sticker ph-bold ph-lg"></i>:{{ emojis.length }})
</header> </header>
<div v-if="shown" class="body"> <div v-if="shown" class="body">
<button <button
@ -80,6 +86,7 @@ const emit = defineEmits<{
}>(); }>();
const emojis = computed(() => Array.isArray(props.emojis) ? props.emojis : props.emojis.value); const emojis = computed(() => Array.isArray(props.emojis) ? props.emojis : props.emojis.value);
const emojiExample = computed(() => emojis.value[0]);
const shown = ref(!!props.initialShown); const shown = ref(!!props.initialShown);
@ -94,3 +101,13 @@ function nestedChosen(emoji: any, ev: MouseEvent) {
emit('chosen', emoji, ev); emit('chosen', emoji, ev);
} }
</script> </script>
<style lang="scss" scoped>
.emoji-example {
margin-left: 2px;
margin-right: 2px;
> img {
height: 25px;
}
}
</style>