mirrors/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-12-24 05:28:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: handle case where emoji reaction is normal non-custom emojis and adjust styling

Browse source
This commit is contained in:
TAKAHASHI Shuuji 2024-12-19 22:30:39 +09:00
parent 38f31a640b
commit 08b908b206
1 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
components/status/StatusEmojiReaction.vue
View file

@ -1,24 +1,35 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import { getEmojiAttributes } from '~/config/emojis'
const props = defineProps<{ const props = defineProps<{
status: mastodon.v1.Status status: Status
details?: boolean details?: boolean
}>() }>()
const { const {
status, status,
} = useStatusActions(props) } = useStatusActions(props)
function isCustomEmoji(emoji: EmojiReaction) {
return !!emoji.staticUrl
}
</script> </script>
<template> <template>
<div flex items-center class="status-actions"> <div flex flex-wrap gap-1 class="status-actions">
<div v-for="(i, emoji) in status.emojiReactions" :key="i" flex-inline gap-1 mr-4 text-secondary> <button
<picture class="custom-emoji" :alt="`:${emoji.name}:`" :data-emoji-id="emoji.name" :title="emoji.name"> v-for="(emoji, i) in status?.emojiReactions ?? []"
:key="i"
flex gap-1 p="block-1 inline-2" text-secondary btn-base hover:bg-gray-1 rounded-1
>
<picture v-if="isCustomEmoji(emoji)" class="custom-emoji" :alt="`:${emoji.name}:`" :data-emoji-id="emoji.name">
<source :srcset="emoji.staticUrl" media="(prefers-reduced-motion: reduce)"> <source :srcset="emoji.staticUrl" media="(prefers-reduced-motion: reduce)">
<img :src="emoji.url" :alt="`:${emoji.name}:`" title="" style=""> <img :src="emoji.url" :alt="`:${emoji.name}:`" title="" style="">
</picture> </picture>
<CommonLocalizedNumber :keypath="emoji.count" :count="emoji.count" /> <picture v-else class="custom-emoji" :alt="`:${emoji.name}:`" :data-emoji-id="emoji.name">
</div> <img v-bind="getEmojiAttributes(emoji.name)">
</picture>
<CommonLocalizedNumber :keypath="emoji.count.toString()" :count="emoji.count" />
</button>
</div> </div>
</template> </template>