feat(ui): on expireAt, add time tag + tooltip (#362)

This commit is contained in:
Michel EDIGHOFFER 2022-12-08 11:07:54 +01:00 committed by GitHub
parent 431a431c1d
commit 8132efbc4d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 4 deletions

View file

@ -1,7 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Popper as VTooltipType } from 'floating-vue/dist'
defineProps<{ defineProps<{
content?: string content?: string
}>() } & Partial<typeof VTooltipType>>()
</script> </script>
<template> <template>

View file

@ -12,6 +12,7 @@ function toPercentage(num: number) {
} }
const timeAgoOptions = useTimeAgoOptions() const timeAgoOptions = useTimeAgoOptions()
const expiredTimeAgo = useTimeAgo(poll.expiresAt!, timeAgoOptions) const expiredTimeAgo = useTimeAgo(poll.expiresAt!, timeAgoOptions)
const expiredTimeFormatted = useFormattedDateTime(poll.expiresAt!)
const masto = useMasto() const masto = useMasto()
async function vote(e: Event) { async function vote(e: Event) {
@ -58,7 +59,9 @@ async function vote(e: Event) {
<div text-sm> <div text-sm>
{{ $t('status.poll.count', [poll.votersCount]) }} {{ $t('status.poll.count', [poll.votersCount]) }}
&middot; &middot;
{{ $t(poll.expired ? 'status.poll.finished' : 'status.poll.ends', [expiredTimeAgo]) }} <CommonTooltip :content="expiredTimeFormatted" class="inline-block" placement="right">
<time :datetime="poll.expiresAt!">{{ $t(poll.expired ? 'status.poll.finished' : 'status.poll.ends', [expiredTimeAgo]) }}</time>
</CommonTooltip>
</div> </div>
</div> </div>
</template> </template>

View file

@ -156,8 +156,8 @@
"filter_show_anyway": "Montrer coûte que coûte", "filter_show_anyway": "Montrer coûte que coûte",
"poll": { "poll": {
"count": "{0} votes", "count": "{0} votes",
"ends": "fini {0}", "ends": "se clôt {0}",
"finished": "fini {0}" "finished": "clos {0}"
}, },
"reblogged": "{0} relayé", "reblogged": "{0} relayé",
"spoiler_show_less": "Voir moins", "spoiler_show_less": "Voir moins",