gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-27 17:49:02 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

chore(react/settings): port date settings

Browse Source
This commit is contained in:
Elian Doran 2025-08-14 23:50:08 +03:00
parent f524e99290
commit cce3d3bce8
No known key found for this signature in database
3 changed files with 40 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/react/FormSelect.tsx
View File

@ -65,7 +65,7 @@ function FormSelectGroup<T>({ values, keyProperty, titleProperty, currentValue }
return (
<option
value={item[keyProperty] as any}
selected={item[keyProperty] === currentValue}
selected={item[keyProperty] == currentValue} // triple equal is intentionally not used here, for comparisons with numeric values
>
{item[titleProperty ?? keyProperty] ?? item[keyProperty] as any}
</option>

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

@ -27,7 +27,6 @@ function LocalizationOptions() {
const [ locale, setLocale ] = useTriliumOption("locale");
const [ formattingLocale, setFormattingLocale ] = useTriliumOption("formattingLocale");
const [ firstDayOfWeek, setFirstDayOfWeek ] = useTriliumOption("firstDayOfWeek");
return (
<OptionsSection title={t("i18n.title")}>
@ -39,16 +38,7 @@ function LocalizationOptions() {
<LocaleSelector locales={contentLocales} currentValue={formattingLocale} onChange={setFormattingLocale} />
</OptionsRow>}
<OptionsRow label={t("i18n.first-day-of-the-week")}>
<FormRadioGroup
name="first-day-of-week"
values={[
{ value: "0", label: t("i18n.sunday") },
{ value: "1", label: t("i18n.monday") }
]}
currentValue={firstDayOfWeek} onChange={setFirstDayOfWeek}
/>
</OptionsRow>
<DateSettings />
</OptionsSection>
)
}
@ -61,10 +51,44 @@ function LocaleSelector({ locales, currentValue, onChange }: { locales: Locale[]
/>;
}
function FirstDayOfWeekSettings() {
function DateSettings() {
const [ firstDayOfWeek, setFirstDayOfWeek ] = useTriliumOption("firstDayOfWeek");
const [ firstWeekOfYear, setFirstWeekOfYear ] = useTriliumOption("firstWeekOfYear");
const [ minDaysInFirstWeek, setMinDaysInFirstWeek ] = useTriliumOption("minDaysInFirstWeek");
return (
<>
<OptionsRow label={t("i18n.first-day-of-the-week")}>
<FormRadioGroup
name="first-day-of-week"
values={[
{ value: "0", label: t("i18n.sunday") },
{ value: "1", label: t("i18n.monday") }
]}
currentValue={firstDayOfWeek} onChange={setFirstDayOfWeek}
/>
</OptionsRow>
<OptionsRow label={t("i18n.first-week-of-the-year")}>
<FormRadioGroup
name="first-week-of-year"
currentValue={firstWeekOfYear} onChange={setFirstWeekOfYear}
values={[
{ value: "0", label: t("i18n.first-week-contains-first-day") },
{ value: "1", label: t("i18n.first-week-contains-first-thursday") },
{ value: "2", label: t("i18n.first-week-has-minimum-days") }
]}
/>
</OptionsRow>
{firstWeekOfYear === "2" && <OptionsRow label={t("i18n.min-days-in-first-week")}>
<FormSelect
keyProperty="days"
currentValue={minDaysInFirstWeek} onChange={setMinDaysInFirstWeek}
values={Array.from(
{ length: 7 },
(_, i) => ({ days: i + 1 }))} />
</OptionsRow>}
</>
)
}

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

@ -7,45 +7,10 @@ import type { OptionMap, Locale } from "@triliumnext/commons";
const TPL = /*html*/`
<div class="options-section">
<div class="locale-options-container">
<div class="option-row">
<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">
<label class="tn-radio">
<input name="first-day-of-week" type="radio" value="0" />
${t("i18n.sunday")}
</label>
<label class="tn-radio">
<input name="first-day-of-week" type="radio" value="1" />
${t("i18n.monday")}
</label>
</div>
</div>
<div class="option-row">
<label id="first-week-of-year-label">${t("i18n.first-week-of-the-year")}</label>
<div role="group" aria-labelledby="first-week-of-year-label">
<label class="tn-radio">
<input name="first-week-of-year" type="radio" value="0" />
${t("i18n.first-week-contains-first-day")}
</label>
<label class="tn-radio">
<input name="first-week-of-year" type="radio" value="1" />
${t("i18n.first-week-contains-first-thursday")}
</label>
<label class="tn-radio">
<input name="first-week-of-year" type="radio" value="2" />
${t("i18n.first-week-has-minimum-days")}
</label>
</div>
</div>
<div class="option-row min-days-row" style="display: none;">
<label for="min-days-in-first-week">${t("i18n.min-days-in-first-week")}</label>
<label for="min-days-in-first-week">${}</label>
<select id="min-days-in-first-week" class="form-select">
${Array.from({ length: 7 }, (_, i) => i + 1)
${
.map(num => `<option value="${num}">${num}</option>`)
.join('')}
</select>
@ -102,7 +67,6 @@ const TPL = /*html*/`
export default class LocalizationOptions extends OptionsWidget {
private $localeSelect!: JQuery<HTMLElement>;
private $formattingLocaleSelect!: JQuery<HTMLElement>;
private $minDaysRow!: JQuery<HTMLElement>;
@ -111,57 +75,13 @@ export default class LocalizationOptions extends OptionsWidget {
this.$minDaysRow = this.$widget.find(".min-days-row");
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());
this.updateOption("firstDayOfWeek", firstDayOfWeek);
});
this.$widget.find('input[name="first-week-of-year"]').on('change', (e) => {
const target = e.target as HTMLInputElement;
const value = parseInt(target.value);
if (value === 2) {
this.$minDaysRow.show();
} else {
this.$minDaysRow.hide();
}
this.updateOption("firstWeekOfYear", value);
});
const currentValue = this.$widget.find('input[name="first-week-of-year"]:checked').val();
if (currentValue === 2) {
this.$minDaysRow.show();
}
this.$widget.find("#min-days-in-first-week").on("change", () => {
const minDays = this.$widget.find("#min-days-in-first-week").val();
this.updateOption("minDaysInFirstWeek", minDays);
});
this.$widget.find(".restart-app-button").on("click", utils.restartDesktopApp);
}
async optionsLoaded(options: OptionMap) {
const allLocales = getAvailableLocales();
// Build list of Electron locales.
this.$formattingLocaleSelect.empty();
for (const locale of allLocales.filter(l => l.electronLocale)) {
this.$formattingLocaleSelect.append(buildLocaleItem(locale, locale.electronLocale as string));
}
this.$formattingLocaleSelect.val(options.formattingLocale);
this.$widget.find(`input[name="first-day-of-week"][value="${options.firstDayOfWeek}"]`)
.prop("checked", "true");
this.$widget.find(`input[name="first-week-of-year"][value="${options.firstWeekOfYear}"]`)
.prop("checked", "true");
if (parseInt(options.firstWeekOfYear) === 2) {
this.$minDaysRow.show();
}
this.$widget.find("#min-days-in-first-week").val(options.minDaysInFirstWeek);
}
}