diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkEmojiPicker.section.vue | 11 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkEmojiPicker.vue | 13 |
2 files changed, 23 insertions, 1 deletions
diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue index c418ac2c52..89abf1d946 100644 --- a/packages/frontend/src/components/MkEmojiPicker.section.vue +++ b/packages/frontend/src/components/MkEmojiPicker.section.vue @@ -8,7 +8,9 @@ <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"/> @@ -20,6 +22,7 @@ <script lang="ts" setup> import { ref, computed, Ref } from 'vue'; +import { getEmojiName } from '@/scripts/emojilist'; const props = defineProps<{ emojis: string[] | Ref<string[]>; @@ -33,4 +36,12 @@ const emit = defineEmits<{ const emojis = computed(() => Array.isArray(props.emojis) ? props.emojis : props.emojis.value); const shown = ref(!!props.initialShown); + +/** @see MkEmojiPicker.vue */ +function computeButtonTitle(ev: MouseEvent): void { + const elm = ev.target as HTMLElement; + const emoji = elm.dataset.emoji as string; + elm.title = getEmojiName(emoji) ?? emoji; +} + </script> diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 7d280f2f4b..a5a39108d6 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -35,8 +35,10 @@ <button v-for="emoji in pinned" :key="emoji" + :data-emoji="emoji" class="_button item" tabindex="0" + @pointerenter="computeButtonTitle" @click="chosen(emoji, $event)" > <MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/> @@ -52,6 +54,8 @@ v-for="emoji in recentlyUsedEmojis" :key="emoji" class="_button item" + :data-emoji="emoji" + @pointerenter="computeButtonTitle" @click="chosen(emoji, $event)" > <MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/> @@ -90,7 +94,7 @@ import { ref, shallowRef, computed, watch, onMounted } from 'vue'; import * as Misskey from 'misskey-js'; import XSection from '@/components/MkEmojiPicker.section.vue'; -import { emojilist, emojiCharByCategory, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist'; +import { emojilist, emojiCharByCategory, UnicodeEmojiDef, unicodeEmojiCategories as categories, getEmojiName } from '@/scripts/emojilist'; import MkRippleEffect from '@/components/MkRippleEffect.vue'; import * as os from '@/os'; import { isTouchUsing } from '@/scripts/touch'; @@ -291,6 +295,13 @@ function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): return typeof emoji === 'string' ? emoji : 'char' in emoji ? emoji.char : `:${emoji.name}:`; } +/** @see MkEmojiPicker.section.vue */ +function computeButtonTitle(ev: MouseEvent): void { + const elm = ev.target as HTMLElement; + const emoji = elm.dataset.emoji as string; + elm.title = getEmojiName(emoji) ?? emoji; +} + function chosen(emoji: any, ev?: MouseEvent) { const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined; if (el) { |