mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
feat: RTL Support for RTL Languages (Hebrew, Arabic) (#2832)
* add language direction to locale generation * apply language direction when setting language --------- Co-authored-by: boc-the-git <3479092+boc-the-git@users.noreply.github.com>
This commit is contained in:
Michael Genson
GitHub
parent
d17e46ee50
commit
10ba4d2d7f
@ -1,4 +1,5 @@
|
||||
import pathlib
|
||||
from dataclasses import dataclass
|
||||
from pathlib import Path
|
||||
|
||||
import dotenv
|
||||
@ -15,38 +16,44 @@ BASE = pathlib.Path(__file__).parent.parent.parent
|
||||
API_KEY = dotenv.get_key(BASE / ".env", "CROWDIN_API_KEY")
|
||||
|
||||
|
||||
NAMES = {
|
||||
"en-US": "American English",
|
||||
"en-GB": "British English",
|
||||
"af-ZA": "Afrikaans (Afrikaans)",
|
||||
"ar-SA": "العربية (Arabic)",
|
||||
"ca-ES": "Català (Catalan)",
|
||||
"cs-CZ": "Čeština (Czech)",
|
||||
"da-DK": "Dansk (Danish)",
|
||||
"de-DE": "Deutsch (German)",
|
||||
"el-GR": "Ελληνικά (Greek)",
|
||||
"es-ES": "Español (Spanish)",
|
||||
"fi-FI": "Suomi (Finnish)",
|
||||
"fr-FR": "Français (French)",
|
||||
"he-IL": "עברית (Hebrew)",
|
||||
"hu-HU": "Magyar (Hungarian)",
|
||||
"it-IT": "Italiano (Italian)",
|
||||
"ja-JP": "日本語 (Japanese)",
|
||||
"ko-KR": "한국어 (Korean)",
|
||||
"no-NO": "Norsk (Norwegian)",
|
||||
"nl-NL": "Nederlands (Dutch)",
|
||||
"pl-PL": "Polski (Polish)",
|
||||
"pt-BR": "Português do Brasil (Brazilian Portuguese)",
|
||||
"pt-PT": "Português (Portuguese)",
|
||||
"ro-RO": "Română (Romanian)",
|
||||
"ru-RU": "Pусский (Russian)",
|
||||
"sr-SP": "српски (Serbian)",
|
||||
"sv-SE": "Svenska (Swedish)",
|
||||
"tr-TR": "Türkçe (Turkish)",
|
||||
"uk-UA": "Українська (Ukrainian)",
|
||||
"vi-VN": "Tiếng Việt (Vietnamese)",
|
||||
"zh-CN": "简体中文 (Chinese simplified)",
|
||||
"zh-TW": "繁體中文 (Chinese traditional)",
|
||||
@dataclass
|
||||
class LocaleData:
|
||||
name: str
|
||||
dir: str = "ltr"
|
||||
|
||||
|
||||
LOCALE_DATA: dict[str, LocaleData] = {
|
||||
"en-US": LocaleData(name="American English"),
|
||||
"en-GB": LocaleData(name="British English"),
|
||||
"af-ZA": LocaleData(name="Afrikaans (Afrikaans)"),
|
||||
"ar-SA": LocaleData(name="العربية (Arabic)", dir="rtl"),
|
||||
"ca-ES": LocaleData(name="Català (Catalan)"),
|
||||
"cs-CZ": LocaleData(name="Čeština (Czech)"),
|
||||
"da-DK": LocaleData(name="Dansk (Danish)"),
|
||||
"de-DE": LocaleData(name="Deutsch (German)"),
|
||||
"el-GR": LocaleData(name="Ελληνικά (Greek)"),
|
||||
"es-ES": LocaleData(name="Español (Spanish)"),
|
||||
"fi-FI": LocaleData(name="Suomi (Finnish)"),
|
||||
"fr-FR": LocaleData(name="Français (French)"),
|
||||
"he-IL": LocaleData(name="עברית (Hebrew)", dir="rtl"),
|
||||
"hu-HU": LocaleData(name="Magyar (Hungarian)"),
|
||||
"it-IT": LocaleData(name="Italiano (Italian)"),
|
||||
"ja-JP": LocaleData(name="日本語 (Japanese)"),
|
||||
"ko-KR": LocaleData(name="한국어 (Korean)"),
|
||||
"no-NO": LocaleData(name="Norsk (Norwegian)"),
|
||||
"nl-NL": LocaleData(name="Nederlands (Dutch)"),
|
||||
"pl-PL": LocaleData(name="Polski (Polish)"),
|
||||
"pt-BR": LocaleData(name="Português do Brasil (Brazilian Portuguese)"),
|
||||
"pt-PT": LocaleData(name="Português (Portuguese)"),
|
||||
"ro-RO": LocaleData(name="Română (Romanian)"),
|
||||
"ru-RU": LocaleData(name="Pусский (Russian)"),
|
||||
"sr-SP": LocaleData(name="српски (Serbian)"),
|
||||
"sv-SE": LocaleData(name="Svenska (Swedish)"),
|
||||
"tr-TR": LocaleData(name="Türkçe (Turkish)"),
|
||||
"uk-UA": LocaleData(name="Українська (Ukrainian)"),
|
||||
"vi-VN": LocaleData(name="Tiếng Việt (Vietnamese)"),
|
||||
"zh-CN": LocaleData(name="简体中文 (Chinese simplified)"),
|
||||
"zh-TW": LocaleData(name="繁體中文 (Chinese traditional)"),
|
||||
}
|
||||
|
||||
LOCALE_TEMPLATE = """// This Code is auto generated by gen_global_components.py
|
||||
@ -55,6 +62,7 @@ export const LOCALES = [{% for locale in locales %}
|
||||
name: "{{ locale.name }}",
|
||||
value: "{{ locale.locale }}",
|
||||
progress: {{ locale.progress }},
|
||||
dir: "{{ locale.dir }}",
|
||||
},{% endfor %}
|
||||
]
|
||||
|
||||
@ -65,6 +73,7 @@ class TargetLanguage(MealieModel):
|
||||
id: str
|
||||
name: str
|
||||
locale: str
|
||||
dir: str
|
||||
threeLettersCode: str
|
||||
twoLettersCode: str
|
||||
progress: float = 0.0
|
||||
@ -103,15 +112,23 @@ class CrowdinApi:
|
||||
models.insert(
|
||||
0,
|
||||
TargetLanguage(
|
||||
id="en-US", name="English", locale="en-US", threeLettersCode="en", twoLettersCode="en", progress=100
|
||||
id="en-US",
|
||||
name="English",
|
||||
locale="en-US",
|
||||
dir="ltr",
|
||||
threeLettersCode="en",
|
||||
twoLettersCode="en",
|
||||
progress=100,
|
||||
),
|
||||
)
|
||||
|
||||
progress: list[dict] = self.get_progress()["data"]
|
||||
|
||||
for model in models:
|
||||
if model.locale in NAMES:
|
||||
model.name = NAMES[model.locale]
|
||||
if model.locale in LOCALE_DATA:
|
||||
locale_data = LOCALE_DATA[model.locale]
|
||||
model.name = locale_data.name
|
||||
model.dir = locale_data.dir
|
||||
|
||||
for p in progress:
|
||||
if p["data"]["languageId"] == model.id:
|
||||
|
||||
@ -4,195 +4,234 @@ export const LOCALES = [
|
||||
name: "繁體中文 (Chinese traditional)",
|
||||
value: "zh-TW",
|
||||
progress: 28,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "简体中文 (Chinese simplified)",
|
||||
value: "zh-CN",
|
||||
progress: 65,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Tiếng Việt (Vietnamese)",
|
||||
value: "vi-VN",
|
||||
progress: 2,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Українська (Ukrainian)",
|
||||
value: "uk-UA",
|
||||
progress: 99,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Türkçe (Turkish)",
|
||||
value: "tr-TR",
|
||||
progress: 50,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Svenska (Swedish)",
|
||||
value: "sv-SE",
|
||||
progress: 71,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "српски (Serbian)",
|
||||
value: "sr-SP",
|
||||
progress: 4,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Slovenian",
|
||||
value: "sl-SI",
|
||||
progress: 49,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Slovak",
|
||||
value: "sk-SK",
|
||||
progress: 97,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Pусский (Russian)",
|
||||
value: "ru-RU",
|
||||
progress: 99,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Română (Romanian)",
|
||||
value: "ro-RO",
|
||||
progress: 32,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Português (Portuguese)",
|
||||
value: "pt-PT",
|
||||
progress: 99,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Português do Brasil (Brazilian Portuguese)",
|
||||
value: "pt-BR",
|
||||
progress: 98,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Polski (Polish)",
|
||||
value: "pl-PL",
|
||||
progress: 97,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Norsk (Norwegian)",
|
||||
value: "no-NO",
|
||||
progress: 85,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Nederlands (Dutch)",
|
||||
value: "nl-NL",
|
||||
progress: 98,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Latvian",
|
||||
value: "lv-LV",
|
||||
progress: 1,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Lithuanian",
|
||||
value: "lt-LT",
|
||||
progress: 97,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "한국어 (Korean)",
|
||||
value: "ko-KR",
|
||||
progress: 5,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "日本語 (Japanese)",
|
||||
value: "ja-JP",
|
||||
progress: 11,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Italiano (Italian)",
|
||||
value: "it-IT",
|
||||
progress: 96,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Magyar (Hungarian)",
|
||||
value: "hu-HU",
|
||||
progress: 99,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Croatian",
|
||||
value: "hr-HR",
|
||||
progress: 97,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "עברית (Hebrew)",
|
||||
value: "he-IL",
|
||||
progress: 99,
|
||||
dir: "rtl",
|
||||
},
|
||||
{
|
||||
name: "Galician",
|
||||
value: "gl-ES",
|
||||
progress: 1,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Français (French)",
|
||||
value: "fr-FR",
|
||||
progress: 99,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "French, Canada",
|
||||
value: "fr-CA",
|
||||
progress: 97,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Suomi (Finnish)",
|
||||
value: "fi-FI",
|
||||
progress: 95,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Español (Spanish)",
|
||||
value: "es-ES",
|
||||
progress: 76,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "American English",
|
||||
value: "en-US",
|
||||
progress: 100.0,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "British English",
|
||||
value: "en-GB",
|
||||
progress: 4,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Ελληνικά (Greek)",
|
||||
value: "el-GR",
|
||||
progress: 35,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Deutsch (German)",
|
||||
value: "de-DE",
|
||||
progress: 99,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Dansk (Danish)",
|
||||
value: "da-DK",
|
||||
progress: 100,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Čeština (Czech)",
|
||||
value: "cs-CZ",
|
||||
progress: 66,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Català (Catalan)",
|
||||
value: "ca-ES",
|
||||
progress: 61,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "Bulgarian",
|
||||
value: "bg-BG",
|
||||
progress: 99,
|
||||
dir: "ltr",
|
||||
},
|
||||
{
|
||||
name: "العربية (Arabic)",
|
||||
value: "ar-SA",
|
||||
progress: 16,
|
||||
dir: "rtl",
|
||||
},
|
||||
{
|
||||
name: "Afrikaans (Afrikaans)",
|
||||
value: "af-ZA",
|
||||
progress: 96,
|
||||
dir: "ltr",
|
||||
},
|
||||
]
|
||||
|
||||
@ -4,14 +4,31 @@ import { LOCALES } from "./available-locales";
|
||||
export const useLocales = () => {
|
||||
const { i18n, $vuetify } = useContext();
|
||||
|
||||
function getLocale(value: string) {
|
||||
const currentLocale = LOCALES.filter((locale) => locale.value === value);
|
||||
return currentLocale.length ? currentLocale[0] : null;
|
||||
}
|
||||
|
||||
const locale = computed<string>({
|
||||
get() {
|
||||
$vuetify.lang.current = i18n.locale; // dirty hack
|
||||
// dirty hack
|
||||
$vuetify.lang.current = i18n.locale;
|
||||
const currentLocale = getLocale(i18n.locale);
|
||||
if (currentLocale) {
|
||||
$vuetify.rtl = currentLocale.dir === "rtl";
|
||||
}
|
||||
|
||||
return i18n.locale;
|
||||
},
|
||||
set(value) {
|
||||
i18n.setLocale(value);
|
||||
$vuetify.lang.current = value; // this does not persist after window reload :-(
|
||||
|
||||
// this does not persist after window reload :-(
|
||||
$vuetify.lang.current = value;
|
||||
const currentLocale = getLocale(value);
|
||||
if (currentLocale) {
|
||||
$vuetify.rtl = currentLocale.dir === "rtl";
|
||||
}
|
||||
|
||||
// Reload the page to update the language - not all strings are reactive
|
||||
window.location.reload();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user