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

fix: layout fixes for RTL languages (#591)

Browse source 
* fix: rtl arrows on settings page

* fix: border on settings page for RTL languages

* fix: RTL fixes for logo, search box and logout icon

* fix: RTL layout bugs in conversations

* chore: remove rtl setting icon

* improve arabic locale

* add new entries to arabic locale

* chore: include number format

* fix: RTL layout on several pages

* fix: RTL layout of account header and sign in modal

* fix: always display account handle in LTR

* fix: move character counter in publish widget to left side for RTL

* fix: remove border-ss-none unocss rule

* fix: many RTL fixes

* fix: RTL fixes for many pages

* fix: use viewer's direction in all content

* chore: use new arabic plural rules

* chore: flip arrow on main content header

* chore: fix StatusPoll and show_new_items for zh-TW

* chore: StatusPoll tooltip on bottom

* chore: add `en` variants to i18n conf

* chore: update entry to use new plural rule

* fix: automatic content direction for status

* fix: direction for account handle

* fix: direction of polls

Co-authored-by: userquin <userquin@gmail.com>
Co-authored-by: Jean-Paul Khawam <jeanpaulkhawam@protonmail.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Vjacheslav Trushkin 2023-01-01 16:29:11 +02:00 • committed by GitHub
parent c5304be775
commit 727d05915f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
50 changed files with 347 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

76
composables/i18n.ts
View file

@ -3,46 +3,30 @@ import type { MaybeComputedRef, UseTimeAgoOptions } from '@vueuse/core'
const formatter = Intl.NumberFormat()
const humanReadableNumber = (
num: number,
{ k, m }: { k: string; m: string } = { k: 'K', m: 'M' },
useFormatter: Intl.NumberFormat = formatter,
) => {
if (num < 10000)
return useFormatter.format(num)
// show 1 decimal: we cannot use toFixed(1), it is a string
if (num < 1000000)
return `${useFormatter.format(Math.floor(num / 100) / 10)}${k}`
// show 2 decimals: we cannot use toFixed(2), it is a string
return `${useFormatter.format(Math.floor(num / 10000) / 100)}${m}`
}
export const formattedNumber = (num: number, useFormatter: Intl.NumberFormat = formatter) => {
return useFormatter.format(num)
}
export const useHumanReadableNumber = () => {
const i18n = useI18n()
const numberFormatter = $computed(() => Intl.NumberFormat(i18n.locale.value))
const { t, n, locale } = useI18n()
const fn = (num: number) => {
if (num < 10000)
return n(num, 'smallCounting', locale.value)
// show 1 decimal: we cannot use toFixed(1), it is a string
if (num < 1000000)
return `${n(Math.floor(num / 100) / 10, 'kiloCounting', locale.value)}${t('common.kiloSuffix')}`
// show 2 decimals: we cannot use toFixed(2), it is a string
return `${n(Math.floor(num / 10000) / 100, 'millionCounting', locale.value)}${t('common.megaSuffix')}`
}
return {
formatHumanReadableNumber: (num: MaybeRef<number>) => {
return humanReadableNumber(
unref(num),
{ k: i18n.t('common.kiloSuffix'), m: i18n.t('common.megaSuffix') },
numberFormatter,
)
},
formatNumber: (num: MaybeRef<number>) => {
return formattedNumber(
unref(num),
numberFormatter,
)
},
forSR: (num: MaybeRef<number>) => {
return unref(num) > 10000
},
formatHumanReadableNumber: (num: MaybeRef<number>) => fn(unref(num)),
formatNumber: (num: MaybeRef<number>) => n(unref(num), 'smallCounting', locale.value),
formatPercentage: (num: MaybeRef<number>) => n(unref(num), 'percentage', locale.value),
forSR: (num: MaybeRef<number>) => unref(num) > 10000,
}
}
@ -59,9 +43,17 @@ export const useFormattedDateTime = (
}
export const useTimeAgoOptions = (short = false): UseTimeAgoOptions<false> => {
const { d, t } = useI18n()
const { d, t, n: fnf, locale } = useI18n()
const prefix = short ? 'short_' : ''
const fn = (n: number, past: boolean, key: string) => {
return t(`time_ago_options.${prefix}${key}_${past ? 'past' : 'future'}`, n, {
named: {
v: fnf(n, 'smallCounting', locale.value),
},
})
}
return {
rounding: 'floor',
showSecond: !short,
@ -72,13 +64,13 @@ export const useTimeAgoOptions = (short = false): UseTimeAgoOptions<false> => {
past: n => n,
// just return the value
future: n => n,
second: (n, p) => t(`time_ago_options.${prefix}second_${p ? 'past' : 'future'}`, n),
minute: (n, p) => t(`time_ago_options.${prefix}minute_${p ? 'past' : 'future'}`, n),
hour: (n, p) => t(`time_ago_options.${prefix}hour_${p ? 'past' : 'future'}`, n),
day: (n, p) => t(`time_ago_options.${prefix}day_${p ? 'past' : 'future'}`, n),
week: (n, p) => t(`time_ago_options.${prefix}week_${p ? 'past' : 'future'}`, n),
month: (n, p) => t(`time_ago_options.${prefix}month_${p ? 'past' : 'future'}`, n),
year: (n, p) => t(`time_ago_options.${prefix}year_${p ? 'past' : 'future'}`, n),
second: (n, p) => fn(n, p, 'second'),
minute: (n, p) => fn(n, p, 'minute'),
hour: (n, p) => fn(n, p, 'hour'),
day: (n, p) => fn(n, p, 'day'),
week: (n, p) => fn(n, p, 'week'),
month: (n, p) => fn(n, p, 'month'),
year: (n, p) => fn(n, p, 'year'),
invalid: '',
},
fullDateFormatter(date) {