feat(settings): display option to adjust formatting locale

This commit is contained in:
Elian Doran 2025-03-25 19:48:07 +02:00
parent 90ab31329e
commit c4559749f1
No known key found for this signature in database
3 changed files with 34 additions and 6 deletions

View File

@ -3,6 +3,7 @@ import server from "../../../../services/server.js";
import utils from "../../../../services/utils.js";
import { getAvailableLocales, t } from "../../../../services/i18n.js";
import type { OptionMap } from "../../../../../../services/options_interface.js";
import type { Locale } from "../../../../../../services/i18n.js";
const TPL = `
<div class="options-section">
@ -14,6 +15,13 @@ const TPL = `
<select id="locale-select" class="locale-select form-select"></select>
</div>
<div class="col-6">
<label for="formatting-locale-select">${t("i18n.formatting-locale")}</label>
<select id="formatting-locale-select" class="formatting-locale-select form-select"></select>
</div>
</div>
<div class="form-group row">
<div class="col-6">
<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" style="margin-top: .33em;">
@ -35,6 +43,7 @@ const TPL = `
export default class LocalizationOptions extends OptionsWidget {
private $localeSelect!: JQuery<HTMLElement>;
private $formattingLocaleSelect!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
@ -46,6 +55,8 @@ export default class LocalizationOptions extends OptionsWidget {
utils.reloadFrontendApp("locale change");
});
this.$formattingLocaleSelect = this.$widget.find(".formatting-locale-select");
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);
@ -53,14 +64,27 @@ export default class LocalizationOptions extends OptionsWidget {
}
async optionsLoaded(options: OptionMap) {
const availableLocales = getAvailableLocales().filter(l => !l.contentOnly);
this.$localeSelect.empty();
const allLocales = getAvailableLocales();
for (const locale of availableLocales) {
this.$localeSelect.append($("<option>").attr("value", locale.id).text(locale.name));
function buildLocaleItem(locale: Locale) {
return $("<option>")
.attr("value", locale.id)
.text(locale.name)
}
// Build list of UI locales.
this.$localeSelect.empty();
for (const locale of allLocales.filter(l => !l.contentOnly)) {
this.$localeSelect.append(buildLocaleItem(locale));
}
this.$localeSelect.val(options.locale);
// Build list of Electron locales.
this.$formattingLocaleSelect.empty();
for (const locale of allLocales.filter(l => l.electronLocale)) {
this.$formattingLocaleSelect.append(buildLocaleItem(locale));
}
this.$widget.find(`input[name="first-day-of-week"][value="${options.firstDayOfWeek}"]`)
.prop("checked", "true");
}

View File

@ -1242,7 +1242,8 @@
"language": "Language",
"first-day-of-the-week": "First day of the week",
"sunday": "Sunday",
"monday": "Monday"
"monday": "Monday",
"formatting-locale": "Formats (date, numbers)"
},
"backup": {
"automatic_backup": "Automatic backup",

View File

@ -13,12 +13,15 @@ export interface Locale {
rtl?: boolean;
/** `true` if the language is not supported by the application as a display language, but it is selectable by the user for the content. */
contentOnly?: boolean;
/** The value to pass to `--lang` for the Electron instance in order to set it as a locale. Not setting it will hide it from the list of supported locales. */
electronLocale?: string;
}
const LOCALES: Locale[] = [
{
id: "en",
name: "English"
name: "English",
electronLocale: "en"
},
{
id: "de",