feat: show full created time in tooltip
This commit is contained in:
parent
ff81389404
commit
6c350faf7c
|
@ -36,6 +36,7 @@ function go() {
|
||||||
router.push(getStatusPath(status))
|
router.push(getStatusPath(status))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const createdAt = useFormattedDateTime(status.createdAt)
|
||||||
const timeago = useTimeAgo(() => status.createdAt, {
|
const timeago = useTimeAgo(() => status.createdAt, {
|
||||||
showSecond: true,
|
showSecond: true,
|
||||||
messages: {
|
messages: {
|
||||||
|
@ -89,9 +90,11 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
||||||
<div flex>
|
<div flex>
|
||||||
<StatusAccountDetails :account="status.account" />
|
<StatusAccountDetails :account="status.account" />
|
||||||
<div flex-auto />
|
<div flex-auto />
|
||||||
|
<CommonTooltip :content="createdAt">
|
||||||
<div text-sm op50 :title="status.createdAt">
|
<div text-sm op50 :title="status.createdAt">
|
||||||
{{ timeago }}
|
{{ timeago }}
|
||||||
</div>
|
</div>
|
||||||
|
</CommonTooltip>
|
||||||
</div>
|
</div>
|
||||||
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
|
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -11,8 +11,7 @@ const status = $computed(() => {
|
||||||
return props.status
|
return props.status
|
||||||
})
|
})
|
||||||
|
|
||||||
const formatter = Intl.DateTimeFormat(undefined, { dateStyle: 'long' })
|
const date = useFormattedDateTime(status.createdAt)
|
||||||
const date = computed(() => formatter.format(new Date(status.createdAt)))
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
import type { MaybeRef } from '@vueuse/core'
|
||||||
|
|
||||||
|
export const useFormattedDateTime = (
|
||||||
|
value: MaybeRef<string | Date>,
|
||||||
|
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
|
||||||
|
) => {
|
||||||
|
const formatter = Intl.DateTimeFormat(undefined, options)
|
||||||
|
return computed(() => formatter.format(new Date(resolveUnref(value))))
|
||||||
|
}
|
Loading…
Reference in a new issue