diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-11-02 19:59:18 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-11-02 19:59:18 +0900 |
| commit | d20f778bd0a92fa9d3a489964f8e75981e4aadeb (patch) | |
| tree | 53ecae77f61ac167fef24a6c5c65c9ab27fac7d6 /packages/frontend/src/components/MkReactionIcon.vue | |
| parent | Revert "enhance(frontend): 「内容を隠す」でリアクションも隠... (diff) | |
| download | misskey-d20f778bd0a92fa9d3a489964f8e75981e4aadeb.tar.gz misskey-d20f778bd0a92fa9d3a489964f8e75981e4aadeb.tar.bz2 misskey-d20f778bd0a92fa9d3a489964f8e75981e4aadeb.zip | |
enhance(frontend): tweak MkNotification
Diffstat (limited to 'packages/frontend/src/components/MkReactionIcon.vue')
| -rw-r--r-- | packages/frontend/src/components/MkReactionIcon.vue | 21 |
1 files changed, 18 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkReactionIcon.vue b/packages/frontend/src/components/MkReactionIcon.vue index 55c812cbc1..fdc3bfd23c 100644 --- a/packages/frontend/src/components/MkReactionIcon.vue +++ b/packages/frontend/src/components/MkReactionIcon.vue @@ -4,16 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/> -<MkEmoji v-else :emoji="reaction" :normal="true" :noStyle="noStyle"/> +<MkCustomEmoji v-if="reaction[0] === ':'" ref="elRef" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/> +<MkEmoji v-else ref="elRef" :emoji="reaction" :normal="true" :noStyle="noStyle"/> </template> <script lang="ts" setup> -import { } from 'vue'; +import { defineAsyncComponent, shallowRef } from 'vue'; +import { useTooltip } from '@/scripts/use-tooltip.js'; +import * as os from '@/os.js'; const props = defineProps<{ reaction: string; noStyle?: boolean; emojiUrl?: string; + withTooltip?: boolean; }>(); + +const elRef = shallowRef(); + +if (props.withTooltip) { + useTooltip(elRef, (showing) => { + os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), { + showing, + reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'), + targetElement: elRef.value.$el, + }, {}, 'closed'); + }); +} </script> |