gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat(react/settings): port max content width

Browse Source
This commit is contained in:
Elian Doran 2025-08-14 21:55:16 +03:00
parent 81ac390eab
commit 64bffb82b1
No known key found for this signature in database
3 changed files with 38 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/widgets/react/FormTextBox.tsx
View File

@ -9,6 +9,15 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
}
export default function FormTextBox({ inputRef, className, type, currentValue, onChange, ...rest}: FormTextBoxProps) {
if (type === "number" && currentValue) {
const { min, max } = rest;
if (min && currentValue < min) {
currentValue = String(min);
} else if (max && currentValue > max) {
currentValue = String(max);
}
}
return (
<input
ref={inputRef}

30
apps/client/src/widgets/type_widgets/options/appearance.tsx
View File

@ -14,6 +14,8 @@ import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
import FormText from "../../react/FormText";
import Button from "../../react/Button";
const MIN_CONTENT_WIDTH = 640;
interface Theme {
val: string;
title: string;
@ -85,6 +87,7 @@ export default function AppearanceSettings() {
<ApplicationTheme />
{overrideThemeFonts === "true" && <Fonts />}
{isElectron() && <ElectronIntegration /> }
<MaxContentWidth />
</div>
)
}
@ -159,7 +162,7 @@ function Fonts() {
<FormText>{t("fonts.not_all_fonts_available")}</FormText>
<p>
{t("fonts.apply_font_changes")} <Button text={t("fonts.reload_frontend")} size="micro" />
{t("fonts.apply_font_changes")} <Button text={t("fonts.reload_frontend")} size="micro" onClick={reloadFrontendApp} />
</p>
</OptionsSection>
);
@ -229,4 +232,29 @@ function ElectronIntegration() {
<Button text={t("electron_integration.restart-app-button")} onClick={restartDesktopApp} />
</OptionsSection>
)
}
function MaxContentWidth() {
const [ maxContentWidth, setMaxContentWidth ] = useTriliumOption("maxContentWidth");
return (
<OptionsSection title={t("max_content_width.title")}>
<FormText>{t("max_content_width.default_description")}</FormText>
<Column md={6}>
<FormGroup label={t("max_content_width.max_width_label")}>
<FormTextBoxWithUnit
name="max-content-width"
type="number" min={MIN_CONTENT_WIDTH} step="10"
currentValue={maxContentWidth} onChange={setMaxContentWidth}
unit={t("max_content_width.max_width_unit")}
/>
</FormGroup>
</Column>
<p>
{t("max_content_width.apply_changes_description")} <Button text={t("max_content_width.reload_button")} size="micro" onClick={reloadFrontendApp} />
</p>
</OptionsSection>
)
}

47
apps/client/src/widgets/type_widgets/options/appearance/max_content_width.ts
View File

@ -1,47 +0,0 @@
import OptionsWidget from "../options_widget.js";
import utils from "../../../../services/utils.js";
import { t } from "../../../../services/i18n.js";
import type { OptionMap } from "@triliumnext/commons";
const MIN_VALUE = 640;
const TPL = /*html*/`
<div class="options-section">
<h4>${t("max_content_width.title")}</h4>
<p class="form-text">${t("max_content_width.default_description")}</p>
<div class="form-group row">
<div class="col-md-6">
<label for="max-content-width">${t("max_content_width.max_width_label")}</label>
<label class="input-group tn-number-unit-pair">
<input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
<span class="input-group-text">${t("max_content_width.max_width_unit")}</span>
</label>
</div>
</div>
<p>
${t("max_content_width.apply_changes_description")}
<button class="btn btn-secondary btn-micro reload-frontend-button">${t("max_content_width.reload_button")}</button>
</p>
</div>`;
export default class MaxContentWidthOptions extends OptionsWidget {
private $maxContentWidth!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
this.$maxContentWidth = this.$widget.find(".max-content-width");
this.$maxContentWidth.on("change", async () => this.updateOption("maxContentWidth", String(this.$maxContentWidth.val())));
this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp(t("max_content_width.reload_description")));
}
async optionsLoaded(options: OptionMap) {
this.$maxContentWidth.val(Math.max(MIN_VALUE, parseInt(options.maxContentWidth, 10)));
}
}