Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 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
Show stats 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>

3
locales/en-US.json
View file

@ -42,6 +42,7 @@
"bookmark": "Bookmark",
"bookmarked": "Bookmarked",
"boost": "Boost",
"boost_count": "{0}",
"boosted": "Boosted",
"clear_upload_failed": "Clear file upload errors",
"close": "Close",
@ -50,12 +51,14 @@
"edit": "Edit",
"enter_app": "Enter App",
"favourite": "Favorite",
"favourite_count": "{0}",
"favourited": "Favorited",
"more": "More",
"next": "Next",
"prev": "Prev",
"publish": "Publish!",
"reply": "Reply",
"reply_count": "{0}",
"save": "Save",
"save_changes": "Save changes",
"sign_in": "Sign in",