teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/notification/NotificationCard.vue
View file

@ -10,7 +10,17 @@ const { notification } = defineProps<{
<article flex flex-col relative> <article flex flex-col relative>
<template v-if="notification.type === 'follow'"> <template v-if="notification.type === 'follow'">
<NuxtLink :to="getAccountRoute(notification.account)"> <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 /> <div i-ri:user-follow-fill mr-1 color-primary />
<ContentRich <ContentRich
text-primary mr-1 font-bold line-clamp-1 ws-pre-wrap break-all 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') }} {{ $t('notification.followed_you') }}
</span> </span>
</div> </div>
<AccountBigCard :account="notification.account" /> <AccountBigCard
:account="notification.account"
:lang="notification.status?.language ?? undefined"
:dir="notification.status?.language ? 'auto' : 'ltr'"
/>
</NuxtLink> </NuxtLink>
</template> </template>
<template v-else-if="notification.type === 'admin.sign_up'"> <template v-else-if="notification.type === 'admin.sign_up'">

8
components/notification/NotificationGroupedFollow.vue
View file

@ -10,10 +10,16 @@ const { formatHumanReadableNumber, forSR } = useHumanReadableNumber()
const count = $computed(() => items.items.length) const count = $computed(() => items.items.length)
const addSR = $computed(() => forSR(count)) const addSR = $computed(() => forSR(count))
const isExpanded = ref(false) 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> </script>
<template> <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 flex items-center top-0 left-2 pt-2 px-3>
<div i-ri:user-follow-fill mr-3 color-primary aria-hidden="true" /> <div i-ri:user-follow-fill mr-3 color-primary aria-hidden="true" />
<template v-if="count > 1"> <template v-if="count > 1">

5
components/publish/PublishWidget.vue
View file

@ -237,7 +237,10 @@ defineExpose({
role="alert" role="alert"
aria-describedby="upload-failed" aria-describedby="upload-failed"
flex="~ col" 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" border="~ base rounded red-600 dark:red-400"
> >
<head id="upload-failed" flex justify-between> <head id="upload-failed" flex justify-between>

18
components/status/StatusCard.vue
View file

@ -65,7 +65,21 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
</script> </script>
<template> <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> <div flex justify-between>
<slot name="meta"> <slot name="meta">
<div v-if="rebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center py1> <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 flex gap-3 :class="{ 'text-secondary': faded }">
<div relative> <div relative>
<template v-if="showRebloggedByAvatarOnAvatar"> <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" /> <AccountAvatar :account="rebloggedBy" />
</div> </div>
</template> </template>

2
components/status/StatusDetails.vue
View file

@ -29,7 +29,7 @@ const isDM = $computed(() => status.visibility === 'direct')
</script> </script>
<template> <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 /> <StatusActionsMore :status="status" absolute right-2 top-2 />
<NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a> <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountHoverWrapper :account="status.account"> <AccountHoverWrapper :account="status.account">

4
composables/setups.ts
View file

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

7
config/i18n.ts
View file

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

2
pages/[[server]]/@[account]/[status].vue
View file

@ -83,7 +83,7 @@ onReactivated(() => {
@published="refreshContext()" @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 <StatusCard
:status="comment" :actions="comment.visibility !== 'direct'" context="account" :status="comment" :actions="comment.visibility !== 'direct'" context="account"
:connect-reply="comment.id === context?.descendants[di + 1]?.inReplyToId" :connect-reply="comment.id === context?.descendants[di + 1]?.inReplyToId"