feat(react/settings): port auto read-only size

This commit is contained in:
Elian Doran
2025-08-18 12:14:38 +03:00
parent 4ef6169041
commit 16939e9fd5
2 changed files with 20 additions and 33 deletions

View File

@@ -26,6 +26,7 @@ export default function TextNoteSettings() {
<CodeBlockStyle />
<TableOfContent />
<HighlightsList />
<AutoReadOnlySize />
</>
)
}
@@ -279,4 +280,23 @@ function HighlightsList() {
<FormText>{t("highlights_list.shortcut_info")}</FormText>
</OptionsSection>
)
}
function AutoReadOnlySize() {
const [ autoReadonlySizeText, setAutoReadonlySizeText ] = useTriliumOption("autoReadonlySizeText");
return (
<OptionsSection title={t("text_auto_read_only_size.title")}>
<FormText>{t("text_auto_read_only_size.description")}</FormText>
<FormGroup label={t("text_auto_read_only_size.label")}>
<FormTextBoxWithUnit
name="auto-readonly-size-text"
type="number" min={0}
unit={t("text_auto_read_only_size.unit")}
currentValue={autoReadonlySizeText} onChange={setAutoReadonlySizeText}
/>
</FormGroup>
</OptionsSection>
)
}

View File

@@ -1,33 +0,0 @@
import OptionsWidget from "../options_widget.js";
import { t } from "../../../../services/i18n.js";
import type { OptionMap } from "@triliumnext/commons";
const TPL = /*html*/`
<div class="options-section">
<h4>${t("text_auto_read_only_size.title")}</h4>
<p class="form-text">${t("text_auto_read_only_size.description")}</p>
<div class="form-group">
<label for="auto-readonly-size-text">${t("text_auto_read_only_size.label")}</label>
<label class="input-group tn-number-unit-pair">
<input id="auto-readonly-size-text" class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
<span class="input-group-text">${t("text_auto_read_only_size.unit")}</span>
</label>
</div>
</div>`;
export default class TextAutoReadOnlySizeOptions extends OptionsWidget {
private $autoReadonlySizeText!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
this.$autoReadonlySizeText = this.$widget.find(".auto-readonly-size-text");
this.$autoReadonlySizeText.on("change", () => this.updateOption("autoReadonlySizeText", this.$autoReadonlySizeText.val()));
}
async optionsLoaded(options: OptionMap) {
this.$autoReadonlySizeText.val(options.autoReadonlySizeText);
}
}