feat: cleanup locale conf and add some RTL stuff (#564)

This commit is contained in:
Joaquín Sánchez 2022-12-27 22:04:52 +01:00 committed by GitHub
parent 29b7cb3838
commit 6412127283
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 47 additions and 17 deletions

View file

@ -10,7 +10,17 @@ const { notification } = defineProps<{
<article flex flex-col relative>
<template v-if="notification.type === 'follow'">
<NuxtLink :to="getAccountRoute(notification.account)">
<div flex items-center absolute pl-3 pr-4 py-3 bg-base rounded-br-3 top-0 left-0>
<div
flex items-center absolute
pl-3 pr-4 lrt-left-0
rounded-br-3
rtl="pr-3 pl-4 right-0"
rtl-rounded-bl-3
rtl-rounded-br-0
py-3 bg-base top-0
:lang="notification.status?.language ?? undefined"
:dir="notification.status?.language ? 'auto' : 'ltr'"
>
<div i-ri:user-follow-fill mr-1 color-primary />
<ContentRich
text-primary mr-1 font-bold line-clamp-1 ws-pre-wrap break-all
@ -21,7 +31,11 @@ const { notification } = defineProps<{
{{ $t('notification.followed_you') }}
</span>
</div>
<AccountBigCard :account="notification.account" />
<AccountBigCard
:account="notification.account"
:lang="notification.status?.language ?? undefined"
:dir="notification.status?.language ? 'auto' : 'ltr'"
/>
</NuxtLink>
</template>
<template v-else-if="notification.type === 'admin.sign_up'">

View file

@ -10,10 +10,16 @@ const { formatHumanReadableNumber, forSR } = useHumanReadableNumber()
const count = $computed(() => items.items.length)
const addSR = $computed(() => forSR(count))
const isExpanded = ref(false)
const lang = $computed(() => {
return count > 1 || count === 0 ? undefined : items.items[0].status?.language
})
const dir = $computed(() => {
return lang ? 'auto' : 'ltr'
})
</script>
<template>
<article flex flex-col relative>
<article flex flex-col relative :lang="lang ?? undefined" :dir="dir">
<div flex items-center top-0 left-2 pt-2 px-3>
<div i-ri:user-follow-fill mr-3 color-primary aria-hidden="true" />
<template v-if="count > 1">

View file

@ -237,7 +237,10 @@ defineExpose({
role="alert"
aria-describedby="upload-failed"
flex="~ col"
gap-1 text-sm pt-1 pl-2 pr-1 pb-2 text-red-600 dark:text-red-400
gap-1 text-sm
pt-1 pl-2 pr-1 pb-2
rtl="pl-1 pr-2"
text-red-600 dark:text-red-400
border="~ base rounded red-600 dark:red-400"
>
<head id="upload-failed" flex justify-between>

View file

@ -65,7 +65,21 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
</script>
<template>
<div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" relative flex flex-col gap-1 px-4 pt-1 class="pb-1.5" transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
<div
v-if="filter?.filterAction !== 'hide'"
:id="`status-${status.id}`"
ref="el"
relative flex flex-col gap-1 px-4 pt-1
class="pb-1.5"
transition-100
:class="{ 'hover:bg-active': hover }"
tabindex="0"
focus:outline-none focus-visible:ring="2 primary"
:lang="status.language ?? undefined"
:dir="status.language ? 'auto' : 'ltr'"
@click="onclick"
@keydown.enter="onclick"
>
<div flex justify-between>
<slot name="meta">
<div v-if="rebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center py1>
@ -79,7 +93,7 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
<div flex gap-3 :class="{ 'text-secondary': faded }">
<div relative>
<template v-if="showRebloggedByAvatarOnAvatar">
<div absolute top--3px left--0.8 z--1 w-25px h-25px rounded-full>
<div absolute top--3px lrt-left--0.8 rtl-right--0.8 z--1 w-25px h-25px rounded-full>
<AccountAvatar :account="rebloggedBy" />
</div>
</template>

View file

@ -29,7 +29,7 @@ const isDM = $computed(() => status.visibility === 'direct')
</script>
<template>
<div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 px-4 relative>
<div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 px-4 relative :lang="status.language ?? undefined" dir="auto">
<StatusActionsMore :status="status" absolute right-2 top-2 />
<NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountHoverWrapper :account="status.account">

View file

@ -33,14 +33,14 @@ export function setupPageHeader() {
}
const localeMap = (i18n.locales.value as LocaleObject[]).reduce((acc, l) => {
acc[l.code!] = l.dir ?? 'ltr'
acc[l.code!] = l.dir ?? 'auto'
return acc
}, {} as Record<string, Directions>)
useHeadFixed({
htmlAttrs: {
lang: () => i18n.locale.value,
dir: () => localeMap[i18n.locale.value] ?? 'ltr',
dir: () => localeMap[i18n.locale.value] ?? 'auto',
},
titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
link,

View file

@ -8,43 +8,36 @@ const locales: LocaleObject[] = [
code: 'en-US',
file: 'en-US.json',
name: 'English',
dir: 'ltr',
},
{
code: 'de-DE',
file: 'de-DE.json',
name: 'Deutsch',
dir: 'ltr',
},
{
code: 'zh-CN',
file: 'zh-CN.json',
name: '简体中文',
dir: 'ltr',
},
{
code: 'ja-JP',
file: 'ja-JP.json',
name: '日本語',
dir: 'ltr',
},
{
code: 'es-ES',
file: 'es-ES.json',
name: 'Español',
dir: 'ltr',
},
{
code: 'fr-FR',
file: 'fr-FR.json',
name: 'Français',
dir: 'ltr',
},
{
code: 'cs-CZ',
file: 'cs-CZ.json',
name: 'Česky',
dir: 'ltr',
},
{
code: 'ar',

View file

@ -83,7 +83,7 @@ onReactivated(() => {
@published="refreshContext()"
/>
<template v-for="comment, di of context?.descendants" :key="comment.id">
<template v-for="(comment, di) of context?.descendants" :key="comment.id">
<StatusCard
:status="comment" :actions="comment.visibility !== 'direct'" context="account"
:connect-reply="comment.id === context?.descendants[di + 1]?.inReplyToId"