Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-06 07:32:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

client/options/text notes: convert the "Heading Style" combo box into radio buttons

Browse Source
This commit is contained in:
Adorian Doran 2025-03-08 03:21:32 +02:00
parent a694017c87
commit 15d3285a90
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/public/app/widgets/type_widgets/options/text_notes/heading_style.ts
View File

@ -6,24 +6,33 @@ const TPL = `
<div class="options-section"> <div class="options-section">
<h4>${t("heading_style.title")}</h4> <h4>${t("heading_style.title")}</h4>
<select class="heading-style form-select"> <div role="group">
<option value="plain">${t("heading_style.plain")}</option> <label class="tn-radio">
<option value="underline">${t("heading_style.underline")}</option> <input name="heading-style" type="radio" value="plain" />
<option value="markdown">${t("heading_style.markdown")}</option> ${t("heading_style.plain")}
</select> </label>
<label class="tn-radio">
<input name="heading-style" type="radio" value="underline" />
${t("heading_style.underline")}
</label>
<label class="tn-radio">
<input name="heading-style" type="radio" value="markdown" />
${t("heading_style.markdown")}
</label>
</div>
</div>`; </div>`;
export default class HeadingStyleOptions extends OptionsWidget { export default class HeadingStyleOptions extends OptionsWidget {
private $body!: JQuery<HTMLElement>; private $body!: JQuery<HTMLElement>;
private $headingStyle!: JQuery<HTMLElement>;
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$body = $("body"); this.$body = $("body");
this.$headingStyle = this.$widget.find(".heading-style"); this.$widget.find(`input[name="heading-style"]`).on("change", () => {
this.$headingStyle.on("change", () => { const newHeadingStyle = String(this.$widget.find(`input[name="heading-style"]:checked`).val());
const newHeadingStyle = String(this.$headingStyle.val());
this.toggleBodyClass("heading-style-", newHeadingStyle); this.toggleBodyClass("heading-style-", newHeadingStyle);
@ -32,7 +41,8 @@ export default class HeadingStyleOptions extends OptionsWidget {
} }
async optionsLoaded(options: OptionMap) { async optionsLoaded(options: OptionMap) {
this.$headingStyle.val(options.headingStyle); this.$widget.find(`input[name="heading-style"][value="${options.headingStyle}"]`)
.prop("checked", "true");
} }
toggleBodyClass(prefix: string, value: string) { toggleBodyClass(prefix: string, value: string) {