Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-06 05:15:59 +01:00
Code Issues Packages Projects Releases Activity

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

Browse Source
This commit is contained in:
Elian Doran
2025-08-18 16:10:05 +03:00
parent 2ba3666e23
commit 53d97047a3
4 changed files with 35 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/widgets/type_widgets/options/code_notes.tsx
View File

@@ -12,7 +12,7 @@ import { DEFAULT_PREFIX } from "../abstract_code_type_widget";
import { MimeType } from "@triliumnext/commons"; import { MimeType } from "@triliumnext/commons";
import mime_types from "../../../services/mime_types"; import mime_types from "../../../services/mime_types";
import CheckboxList from "./components/CheckboxList"; import CheckboxList from "./components/CheckboxList";
import { CSSProperties, memo } from "preact/compat"; import AutoReadOnlySize from "./components/AutoReadOnlySize";
const SAMPLE_MIME = "application/typescript"; const SAMPLE_MIME = "application/typescript";
@@ -22,6 +22,7 @@ export default function CodeNoteSettings() {
<Editor /> <Editor />
<Appearance /> <Appearance />
<CodeMimeTypes /> <CodeMimeTypes />
<AutoReadOnlySize option="autoReadonlySizeCode" label={t("code_auto_read_only_size.label")} />
</> </>
) )
} }

33
apps/client/src/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts
View File

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

31
apps/client/src/widgets/type_widgets/options/components/AutoReadOnlySize.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { OptionNames } from "@triliumnext/commons";
import FormText from "../../../react/FormText";
import { FormTextBoxWithUnit } from "../../../react/FormTextBox";
import OptionsSection from "./OptionsSection";
import { useTriliumOption } from "../../../react/hooks";
import { t } from "../../../../services/i18n";
import FormGroup from "../../../react/FormGroup";
interface AutoReadOnlySizeProps {
label: string;
option: OptionNames;
}
export default function AutoReadOnlySize({ label, option }: AutoReadOnlySizeProps) {
const [ autoReadonlyOpt, setAutoReadonlyOpt ] = useTriliumOption(option);
return (
<OptionsSection title={t("text_auto_read_only_size.title")}>
<FormText>{t("text_auto_read_only_size.description")}</FormText>
<FormGroup label={label}>
<FormTextBoxWithUnit
name="auto-readonly-size-text"
type="number" min={0}
unit={t("text_auto_read_only_size.unit")}
currentValue={autoReadonlyOpt} onChange={setAutoReadonlyOpt}
/>
</FormGroup>
</OptionsSection>
)
}

22
apps/client/src/widgets/type_widgets/options/text_notes.tsx
View File

@@ -18,6 +18,7 @@ import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
import CheckboxList from "./components/CheckboxList"; import CheckboxList from "./components/CheckboxList";
import KeyboardShortcut from "../../react/KeyboardShortcut"; import KeyboardShortcut from "../../react/KeyboardShortcut";
import { Trans } from "react-i18next"; import { Trans } from "react-i18next";
import AutoReadOnlySize from "./components/AutoReadOnlySize";
export default function TextNoteSettings() { export default function TextNoteSettings() {
return ( return (
@@ -28,7 +29,7 @@ export default function TextNoteSettings() {
<CodeBlockStyle /> <CodeBlockStyle />
<TableOfContent /> <TableOfContent />
<HighlightsList /> <HighlightsList />
<AutoReadOnlySize /> <AutoReadOnlySize option="autoReadonlySizeText" label={t("text_auto_read_only_size.label")} />
<DateTimeFormatOptions /> <DateTimeFormatOptions />
</> </>
) )
@@ -285,25 +286,6 @@ function HighlightsList() {
) )
} }
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>
)
}
function DateTimeFormatOptions() { function DateTimeFormatOptions() {
const [ customDateTimeFormat, setCustomDateTimeFormat ] = useTriliumOption("customDateTimeFormat"); const [ customDateTimeFormat, setCustomDateTimeFormat ] = useTriliumOption("customDateTimeFormat");