client/options/appearance: convert the "First day of the week" combo box into radio buttons

This commit is contained in:
Adorian Doran 2025-03-08 03:18:42 +02:00
parent e74de6105a
commit 2cfb83a93c

View File

@ -15,11 +15,18 @@ const TPL = `
</div> </div>
<div class="col-6"> <div class="col-6">
<label for="first-day-of-week-select">${t("i18n.first-day-of-the-week")}</label> <label id="first-day-of-week-label">${t("i18n.first-day-of-the-week")}</label>
<select id="first-day-of-week-select" class="first-day-of-week-select form-select"> <div role="group" aria-labelledby="first-day-of-week-label" style="margin-top: .33em;">
<option value="0">${t("i18n.sunday")}</option> <label class="tn-radio">
<option value="1">${t("i18n.monday")}</option> <input name="first-day-of-week" type="radio" value="0" />
</select> ${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>
</div> </div>
</div> </div>
@ -28,7 +35,6 @@ const TPL = `
export default class LocalizationOptions extends OptionsWidget { export default class LocalizationOptions extends OptionsWidget {
private $localeSelect!: JQuery<HTMLElement>; private $localeSelect!: JQuery<HTMLElement>;
private $firstDayOfWeek!: JQuery<HTMLElement>;
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
@ -40,9 +46,9 @@ export default class LocalizationOptions extends OptionsWidget {
utils.reloadFrontendApp("locale change"); utils.reloadFrontendApp("locale change");
}); });
this.$firstDayOfWeek = this.$widget.find(".first-day-of-week-select"); this.$widget.find(`input[name="first-day-of-week"]`).on("change", () => {
this.$firstDayOfWeek.on("change", () => { const firstDayOfWeek = String(this.$widget.find(`input[name="first-day-of-week"]:checked`).val());
this.updateOption("firstDayOfWeek", String(this.$firstDayOfWeek.val())); this.updateOption("firstDayOfWeek", firstDayOfWeek);
}); });
} }
@ -55,6 +61,7 @@ export default class LocalizationOptions extends OptionsWidget {
} }
this.$localeSelect.val(options.locale); this.$localeSelect.val(options.locale);
this.$firstDayOfWeek.val(options.firstDayOfWeek); this.$widget.find(`input[name="first-day-of-week"][value="${options.firstDayOfWeek}"]`)
.prop("checked", "true");
} }
} }