zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat(i18n): use compact number format on actions (#683)

Browse source
This commit is contained in:
Joaquín Sánchez 2023-01-01 22:45:46 +01:00 • committed by GitHub
parent d4268cfff8
commit b8c7ed8157
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

14
components/status/StatusActionButton.vue
View file

@ -17,6 +17,10 @@ defineOptions({
inheritAttrs: false,
})
defineSlots<{
text: {}
}>()
const el = ref<HTMLDivElement>()
useCommand({
@ -58,10 +62,14 @@ useCommand({
</div>
</CommonTooltip>
<CommonAnimateNumber v-if="text !== undefined" :increased="active" text-sm>
<span text-secondary-light>{{ text }}</span>
<CommonAnimateNumber v-if="text !== undefined || $slots.text" :increased="active" text-sm>
<span text-secondary-light>
<slot name="text">{{ text }}</slot>
</span>
<template #next>
<span :class="[color]">{{ text }}</span>
<span :class="[color]">
<slot name="text">{{ text }}</slot>
</span>
</template>
</CommonAnimateNumber>
</component>

38
components/status/StatusActions.vue
View file

@ -19,6 +19,8 @@ const {
toggleReblog,
} = $(useStatusActions(props))
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
const reply = () => {
if (!checkLogin())
return
@ -42,7 +44,17 @@ const reply = () => {
icon="i-ri:chat-3-line"
:command="command"
@click="reply"
/>
>
<template v-if="status.repliesCount" #text>
<i18n-t keypath="action.reply_count" :plural="status.repliesCount">
<CommonTooltip v-if="forSR(status.repliesCount)" :content="formatNumber(status.repliesCount)" placement="bottom">
<span aria-hidden="true">{{ formatHumanReadableNumber(status.repliesCount) }}</span>
<span sr-only>{{ formatNumber(status.repliesCount) }}</span>
</CommonTooltip>
<span v-else>{{ formatHumanReadableNumber(status.repliesCount) }}</span>
</i18n-t>
</template>
</StatusActionButton>
</div>
<div flex-1>
@ -56,7 +68,17 @@ const reply = () => {
:disabled="isLoading.reblogged"
:command="command"
@click="toggleReblog()"
/>
>
<template v-if="status.reblogsCount" #text>
<i18n-t keypath="action.boost_count" :plural="status.reblogsCount">
<CommonTooltip v-if="forSR(status.repliesCount)" :content="formatNumber(status.repliesCount)" placement="bottom">
<span aria-hidden="true">{{ formatHumanReadableNumber(status.repliesCount) }}</span>
<span sr-only>{{ formatNumber(status.repliesCount) }}</span>
</CommonTooltip>
<span v-else>{{ formatHumanReadableNumber(status.repliesCount) }}</span>
</i18n-t>
</template>
</StatusActionButton>
</div>
<div flex-1>
@ -70,7 +92,17 @@ const reply = () => {
:disabled="isLoading.favourited"
:command="command"
@click="toggleFavourite()"
/>
>
<template v-if="status.favouritesCount" #text>
<i18n-t keypath="action.favourite_count" :plural="status.favouritesCount">
<CommonTooltip v-if="forSR(status.favouritesCount)" :content="formatNumber(status.favouritesCount)" placement="bottom">
<span aria-hidden="true">{{ formatHumanReadableNumber(status.favouritesCount) }}</span>
<span sr-only>{{ formatNumber(status.favouritesCount) }}</span>
</CommonTooltip>
<span v-else>{{ formatHumanReadableNumber(status.favouritesCount) }}</span>
</i18n-t>
</template>
</StatusActionButton>
</div>
<div flex-none>