gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

chore(react/settings): port formatting locale

Browse Source
This commit is contained in:
Elian Doran 2025-08-14 23:31:57 +03:00
parent 22c3de582f
commit ba19fc7cf3
No known key found for this signature in database
2 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
apps/client/src/widgets/type_widgets/options/i18n.tsx
View File

@ -4,29 +4,46 @@ import FormSelect from "../../react/FormSelect";
import OptionsRow from "./components/OptionsRow"; import OptionsRow from "./components/OptionsRow";
import OptionsSection from "./components/OptionsSection"; import OptionsSection from "./components/OptionsSection";
import { useTriliumOption } from "../../react/hooks"; import { useTriliumOption } from "../../react/hooks";
import type { Locale } from "@triliumnext/commons";
import { isElectron } from "../../../services/utils";
export default function InternationalizationOptions() { export default function InternationalizationOptions() {
return ( return (
<OptionsSection title={t("i18n.title")}> <>
<LocalizationOptions /> <LocalizationOptions />
</OptionsSection> </>
) )
} }
function LocalizationOptions() { function LocalizationOptions() {
const locales = useMemo(() => const { uiLocales, formattingLocales: contentLocales } = useMemo(() => {
getAvailableLocales().filter(locale => !locale.contentOnly) const allLocales = getAvailableLocales();
, []); return {
uiLocales: allLocales.filter(locale => !locale.contentOnly),
formattingLocales: allLocales.filter(locale => locale.electronLocale),
}
}, []);
const [ locale, setLocale ] = useTriliumOption("locale"); const [ locale, setLocale ] = useTriliumOption("locale");
const [ formattingLocale, setFormattingLocale ] = useTriliumOption("formattingLocale");
return ( return (
<OptionsRow label={t("i18n.language")}> <OptionsSection title={t("i18n.title")}>
<FormSelect <OptionsRow label={t("i18n.language")}>
values={locales} <LocaleSelector locales={uiLocales} currentValue={locale} onChange={setLocale} />
keyProperty="id" titleProperty="name" </OptionsRow>
currentValue={locale} onChange={setLocale}
/> {isElectron() && <OptionsRow label={t("i18n.formatting-locale")}>
</OptionsRow> <LocaleSelector locales={contentLocales} currentValue={formattingLocale} onChange={setFormattingLocale} />
</OptionsRow>}
</OptionsSection>
) )
}
function LocaleSelector({ locales, currentValue, onChange }: { locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) {
return <FormSelect
values={locales}
keyProperty="id" titleProperty="name"
currentValue={currentValue} onChange={onChange}
/>;
} }

11
apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
View File

@ -7,11 +7,6 @@ import type { OptionMap, Locale } from "@triliumnext/commons";
const TPL = /*html*/` const TPL = /*html*/`
<div class="options-section"> <div class="options-section">
<div class="locale-options-container"> <div class="locale-options-container">
<div class="option-row electron-only">
<label for="formatting-locale-select">${t("i18n.formatting-locale")}</label>
<select id="formatting-locale-select" class="formatting-locale-select form-select"></select>
</div>
<div class="option-row"> <div class="option-row">
<label id="first-day-of-week-label">${t("i18n.first-day-of-the-week")}</label> <label id="first-day-of-week-label">${t("i18n.first-day-of-the-week")}</label>
<div role="group" aria-labelledby="first-day-of-week-label"> <div role="group" aria-labelledby="first-day-of-week-label">
@ -116,12 +111,6 @@ export default class LocalizationOptions extends OptionsWidget {
this.$minDaysRow = this.$widget.find(".min-days-row"); this.$minDaysRow = this.$widget.find(".min-days-row");
this.$formattingLocaleSelect = this.$widget.find(".formatting-locale-select");
this.$formattingLocaleSelect.on("change", async () => {
const newLocale = this.$formattingLocaleSelect.val();
await server.put(`options/formattingLocale/${newLocale}`);
});
this.$widget.find(`input[name="first-day-of-week"]`).on("change", () => { this.$widget.find(`input[name="first-day-of-week"]`).on("change", () => {
const firstDayOfWeek = String(this.$widget.find(`input[name="first-day-of-week"]:checked`).val()); const firstDayOfWeek = String(this.$widget.find(`input[name="first-day-of-week"]:checked`).val());
this.updateOption("firstDayOfWeek", firstDayOfWeek); this.updateOption("firstDayOfWeek", firstDayOfWeek);