feat: show full created time in tooltip

This commit is contained in:
三咲智子 2022-11-25 16:57:34 +08:00
parent ff81389404
commit 6c350faf7c
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
3 changed files with 16 additions and 5 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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))))
}