elk/components/status/StatusActions.vue

86 lines
2.0 KiB
Vue
Raw Normal View History

2022-11-13 06:34:43 +01:00
<script setup lang="ts">
2022-11-14 03:20:07 +01:00
import type { Status } from 'masto'
2022-11-13 06:34:43 +01:00
2022-12-01 07:46:26 +01:00
const props = defineProps<{
2022-11-14 03:20:07 +01:00
status: Status
details?: boolean
command?: boolean
2022-11-13 06:34:43 +01:00
}>()
2022-11-15 13:08:49 +01:00
2022-12-01 07:46:26 +01:00
const { details, command } = $(props)
2022-11-24 09:34:05 +01:00
2022-12-01 07:46:26 +01:00
const {
status,
isLoading,
toggleBookmark,
toggleFavourite,
toggleReblog,
} = $(useStatusActions(props))
2022-11-24 12:35:26 +01:00
const reply = () => {
if (details) {
// TODO focus to editor
}
else {
const { key, draft } = getReplyDraft(status)
openPublishDialog(key, draft())
2022-11-24 12:35:26 +01:00
}
}
2022-11-13 06:34:43 +01:00
</script>
<template>
<div flex justify-between>
2022-11-27 16:11:34 +01:00
<div flex-1>
2022-11-26 00:46:25 +01:00
<StatusActionButton
2022-11-30 00:25:29 +01:00
:content="$t('action.reply')"
2022-11-26 00:46:25 +01:00
:text="status.repliesCount"
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
icon="i-ri:chat-3-line"
:command="command"
@click="reply"
2022-11-26 00:46:25 +01:00
/>
2022-11-27 16:11:34 +01:00
</div>
2022-11-24 09:34:05 +01:00
2022-11-27 16:11:34 +01:00
<div flex-1>
2022-11-24 09:34:05 +01:00
<StatusActionButton
2022-11-30 00:25:29 +01:00
:content="$t('action.boost')"
2022-11-24 09:34:05 +01:00
:text="status.reblogsCount"
color="text-green" hover="text-green" group-hover="bg-green/10"
icon="i-ri:repeat-line"
active-icon="i-ri:repeat-fill"
:active="status.reblogged"
:disabled="isLoading.reblogged"
:command="command"
2022-11-24 09:34:05 +01:00
@click="toggleReblog()"
/>
2022-11-27 16:11:34 +01:00
</div>
2022-11-24 09:34:05 +01:00
2022-11-27 16:11:34 +01:00
<div flex-1>
2022-11-24 09:34:05 +01:00
<StatusActionButton
2022-11-30 00:25:29 +01:00
:content="$t('action.favourite')"
2022-11-24 09:34:05 +01:00
:text="status.favouritesCount"
color="text-rose" hover="text-rose" group-hover="bg-rose/10"
icon="i-ri:heart-3-line"
active-icon="i-ri:heart-3-fill"
:active="status.favourited"
:disabled="isLoading.favourited"
:command="command"
2022-11-24 09:34:05 +01:00
@click="toggleFavourite()"
/>
2022-11-27 16:11:34 +01:00
</div>
2022-11-24 09:34:05 +01:00
2022-11-27 16:11:34 +01:00
<div flex-none>
2022-11-24 06:04:20 +01:00
<StatusActionButton
2022-11-30 00:25:29 +01:00
:content="$t('action.bookmark')"
2022-11-24 09:34:05 +01:00
color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
icon="i-ri:bookmark-line"
active-icon="i-ri:bookmark-fill"
:active="status.bookmarked"
:disabled="isLoading.bookmarked"
:command="command"
2022-11-24 09:34:05 +01:00
@click="toggleBookmark()"
2022-11-24 06:04:20 +01:00
/>
2022-11-27 16:11:34 +01:00
</div>
2022-11-13 06:34:43 +01:00
</div>
</template>