feat(status): add edit indicator for detail

This commit is contained in:
三咲智子 2022-11-26 11:36:18 +08:00
parent 0ada9e0448
commit d146b5b730
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
5 changed files with 30 additions and 9 deletions

View file

@ -90,7 +90,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
</time> </time>
</a> </a>
</CommonTooltip> </CommonTooltip>
<StatusEditIndicator v-if="status.editedAt" :edited-at="status.editedAt" /> <StatusEditIndicator :status="status" />
</div> </div>
</div> </div>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />

View file

@ -11,7 +11,7 @@ const status = $computed(() => {
return props.status return props.status
}) })
const date = useFormattedDateTime(status.createdAt) const createdAt = useFormattedDateTime(status.createdAt)
const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === status.visibility)!) const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === status.visibility)!)
</script> </script>
@ -31,7 +31,10 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
/> />
</StatusSpoiler> </StatusSpoiler>
<div flex="~ gap-1" items-center op50 text-sm> <div flex="~ gap-1" items-center op50 text-sm>
<div>{{ date }}</div> <div flex>
<div>{{ createdAt }}</div>
<StatusEditIndicator :status="status" />
</div>
<div>·</div> <div>·</div>
<CommonTooltip :content="visibility.label" placement="bottom"> <CommonTooltip :content="visibility.label" placement="bottom">
<div :class="visibility.icon" /> <div :class="visibility.icon" />

View file

@ -1,11 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ editedAt: string }>() import type { Status } from 'masto'
const editedAt = useFormattedDateTime(props.editedAt) const { status } = defineProps<{
status: Status
}>()
const editedAt = $computed(() => status.editedAt)
const formatted = useFormattedDateTime(status.editedAt)
</script> </script>
<template> <template>
<CommonTooltip :content="`Edited ${editedAt}`"> <CommonTooltip v-if="editedAt" :content="`Edited ${formatted}`">
<time :title="props.editedAt" :datetime="props.editedAt" underline decoration-dashed>&nbsp;*</time> <time
:title="editedAt"
:datetime="editedAt"
font-bold underline decoration-dashed
>&nbsp;*</time>
</CommonTooltip> </CommonTooltip>
</template> </template>

View file

@ -1,6 +1,12 @@
import type { Ref } from 'vue' import type { Ref } from 'vue'
import type { Account, Relationship, Status } from 'masto' import type { Account, Relationship, Status } from 'masto'
declare module 'masto' {
interface Status {
editedAt?: string
}
}
// @unocss-include // @unocss-include
export const STATUS_VISIBILITIES = [ export const STATUS_VISIBILITIES = [
{ {

View file

@ -1,9 +1,12 @@
import type { MaybeRef } from '@vueuse/core' import type { MaybeRef } from '@vueuse/core'
export const useFormattedDateTime = ( export const useFormattedDateTime = (
value: MaybeRef<string | Date>, value: MaybeRef<string | Date | undefined>,
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' }, options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
) => { ) => {
const formatter = Intl.DateTimeFormat(undefined, options) const formatter = Intl.DateTimeFormat(undefined, options)
return computed(() => formatter.format(new Date(resolveUnref(value)))) return computed(() => {
const v = resolveUnref(value)
return v ? formatter.format(new Date(v)) : ''
})
} }