1
0
elk/components/status/StatusActions.vue

120 lines
4.0 KiB
Vue
Raw Normal View History

2022-11-13 14:34:43 +09:00
<script setup lang="ts">
2023-01-08 15:21:09 +09:00
import type { mastodon } from 'masto'
2022-11-13 14:34:43 +09:00
2022-12-01 15:46:26 +09:00
const props = defineProps<{
2023-01-08 15:21:09 +09:00
status: mastodon.v1.Status
details?: boolean
command?: boolean
2022-11-13 14:34:43 +09:00
}>()
2022-11-15 21:08:49 +09:00
const focusEditor = inject<typeof noop>('focus-editor', noop)
2022-12-01 15:46:26 +09:00
const { details, command } = $(props)
2022-11-24 17:34:05 +09:00
2022-12-01 15:46:26 +09:00
const {
status,
isLoading,
canReblog,
2022-12-01 15:46:26 +09:00
toggleBookmark,
toggleFavourite,
toggleReblog,
} = $(useStatusActions(props))
2022-11-24 20:35:26 +09:00
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
const reply = () => {
2022-12-02 11:18:57 +09:00
if (!checkLogin())
return
if (details)
focusEditor()
else
navigateToStatus({ status, focusReply: true })
2022-11-24 20:35:26 +09:00
}
2022-11-13 14:34:43 +09:00
</script>
<template>
<div flex justify-between>
2022-11-28 00:11:34 +09:00
<div flex-1>
2022-11-26 08:46:25 +09:00
<StatusActionButton
2022-11-30 08:25:29 +09:00
:content="$t('action.reply')"
2022-12-14 05:01:04 +09:00
:text="status.repliesCount || ''"
2022-11-26 08:46:25 +09:00
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
2023-01-08 18:03:23 +09:00
icon="i-ri:chat-1-line"
:command="command"
@click="reply"
>
<template v-if="status.repliesCount" #text>
<i18n-t keypath="action.reply_count" :plural="status.repliesCount">
<CommonTooltip v-if="forSR(status.repliesCount)" :content="formatNumber(status.repliesCount)" placement="bottom">
<span aria-hidden="true">{{ formatHumanReadableNumber(status.repliesCount) }}</span>
<span sr-only>{{ formatNumber(status.repliesCount) }}</span>
</CommonTooltip>
<span v-else>{{ formatHumanReadableNumber(status.repliesCount) }}</span>
</i18n-t>
</template>
</StatusActionButton>
2022-11-28 00:11:34 +09:00
</div>
2022-11-24 17:34:05 +09:00
2022-11-28 00:11:34 +09:00
<div flex-1>
2022-11-24 17:34:05 +09:00
<StatusActionButton
2022-11-30 08:25:29 +09:00
:content="$t('action.boost')"
2022-12-14 05:01:04 +09:00
:text="status.reblogsCount || ''"
2022-11-24 17:34:05 +09:00
color="text-green" hover="text-green" group-hover="bg-green/10"
icon="i-ri:repeat-line"
active-icon="i-ri:repeat-fill"
2023-01-06 01:48:20 +09:00
:active="!!status.reblogged"
:disabled="isLoading.reblogged || !canReblog"
:command="command"
2022-11-24 17:34:05 +09:00
@click="toggleReblog()"
>
<template v-if="status.reblogsCount" #text>
<i18n-t keypath="action.boost_count" :plural="status.reblogsCount">
2023-01-02 22:20:56 +09:00
<CommonTooltip v-if="forSR(status.reblogsCount)" :content="formatNumber(status.reblogsCount)" placement="bottom">
<span aria-hidden="true">{{ formatHumanReadableNumber(status.reblogsCount) }}</span>
<span sr-only>{{ formatNumber(status.reblogsCount) }}</span>
</CommonTooltip>
2023-01-02 22:20:56 +09:00
<span v-else>{{ formatHumanReadableNumber(status.reblogsCount) }}</span>
</i18n-t>
</template>
</StatusActionButton>
2022-11-28 00:11:34 +09:00
</div>
2022-11-24 17:34:05 +09:00
2022-11-28 00:11:34 +09:00
<div flex-1>
2022-11-24 17:34:05 +09:00
<StatusActionButton
2022-11-30 08:25:29 +09:00
:content="$t('action.favourite')"
2022-12-14 05:01:04 +09:00
:text="status.favouritesCount || ''"
2022-11-24 17:34:05 +09:00
color="text-rose" hover="text-rose" group-hover="bg-rose/10"
icon="i-ri:heart-3-line"
active-icon="i-ri:heart-3-fill"
2023-01-06 01:48:20 +09:00
:active="!!status.favourited"
2022-11-24 17:34:05 +09:00
:disabled="isLoading.favourited"
:command="command"
2022-11-24 17:34:05 +09:00
@click="toggleFavourite()"
>
<template v-if="status.favouritesCount" #text>
<i18n-t keypath="action.favourite_count" :plural="status.favouritesCount">
<CommonTooltip v-if="forSR(status.favouritesCount)" :content="formatNumber(status.favouritesCount)" placement="bottom">
<span aria-hidden="true">{{ formatHumanReadableNumber(status.favouritesCount) }}</span>
<span sr-only>{{ formatNumber(status.favouritesCount) }}</span>
</CommonTooltip>
<span v-else>{{ formatHumanReadableNumber(status.favouritesCount) }}</span>
</i18n-t>
</template>
</StatusActionButton>
2022-11-28 00:11:34 +09:00
</div>
2022-11-24 17:34:05 +09:00
2022-11-28 00:11:34 +09:00
<div flex-none>
2022-11-24 14:04:20 +09:00
<StatusActionButton
2022-11-30 08:25:29 +09:00
:content="$t('action.bookmark')"
2022-11-24 17:34:05 +09:00
color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
icon="i-ri:bookmark-line"
active-icon="i-ri:bookmark-fill"
2023-01-06 01:48:20 +09:00
:active="!!status.bookmarked"
2022-11-24 17:34:05 +09:00
:disabled="isLoading.bookmarked"
:command="command"
2022-11-24 17:34:05 +09:00
@click="toggleBookmark()"
2022-11-24 14:04:20 +09:00
/>
2022-11-28 00:11:34 +09:00
</div>
2022-11-13 14:34:43 +09:00
</div>
</template>