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>
</a>
</CommonTooltip>
<StatusEditIndicator v-if="status.editedAt" :edited-at="status.editedAt" />
<StatusEditIndicator :status="status" />
</div>
</div>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />

View file

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

View file

@ -1,11 +1,20 @@
<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>
<template>
<CommonTooltip :content="`Edited ${editedAt}`">
<time :title="props.editedAt" :datetime="props.editedAt" underline decoration-dashed>&nbsp;*</time>
<CommonTooltip v-if="editedAt" :content="`Edited ${formatted}`">
<time
:title="editedAt"
:datetime="editedAt"
font-bold underline decoration-dashed
>&nbsp;*</time>
</CommonTooltip>
</template>

View file

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

View file

@ -1,9 +1,12 @@
import type { MaybeRef } from '@vueuse/core'
export const useFormattedDateTime = (
value: MaybeRef<string | Date>,
value: MaybeRef<string | Date | undefined>,
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
) => {
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)) : ''
})
}