Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 10:26:08 +01:00
Code Issues Packages Projects Releases Activity

chore(react/settings): use FormGroup for labels

Browse Source
This commit is contained in:
Elian Doran
2025-08-19 22:32:20 +03:00
parent 53eda46043
commit 59ba6a0b1e
3 changed files with 29 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,20 +145,20 @@ function ApplicationTheme() {
return (
<OptionsSection title={t("theme.title")}>
<Column>
<label>{t("theme.theme_label")}</label>
<div className="row">
<FormGroup name="theme" label={t("theme.theme_label")} className="col-md-6" style={{ marginBottom: 0 }}>
<FormSelect
values={themes} currentValue={theme} onChange={setTheme}
keyProperty="val" titleProperty="title"
/>
</Column>
</FormGroup>
<Column className="side-checkbox">
<FormGroup className="side-checkbox col-md-6" name="override-theme-fonts">
<FormCheckbox
name="override-theme-fonts"
label={t("theme.override_theme_fonts_label")}
currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} />
</Column>
</FormGroup>
</div>
</OptionsSection>
)
}
@@ -189,24 +189,22 @@ function Font({ title, fontFamilyOption, fontSizeOption }: { title: string, font
<>
<h5>{title}</h5>
<div className="row">
<Column md={4}>
<label>{t("fonts.font_family")}</label>
<FormGroup className="col-md-4" label={t("fonts.font_family")}>
<FormSelectWithGroups
values={FONT_FAMILIES}
currentValue={fontFamily} onChange={setFontFamily}
keyProperty="value" titleProperty="label"
/>
</Column>
</FormGroup>
<Column md={6}>
<label>{t("fonts.size")}</label>
<FormGroup className="col-md-6" label={t("fonts.size")}>
<FormTextBoxWithUnit
name="tree-font-size"
type="number" min={50} max={200} step={10}
currentValue={fontSize} onChange={setFontSize}
unit={t("units.percentage")}
/>
</Column>
</FormGroup>
</div>
</>
);

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

@@ -56,15 +56,14 @@ function Appearance() {
return (
<OptionsSection title={t("code_theme.title")}>
<FormGroup className="row">
<Column>
<label>{t("code_theme.color-scheme")}</label>
<div className="row" style={{ marginBottom: "15px" }}>
<FormGroup label={t("code_theme.color-scheme")} className="col-md-6" style={{ marginBottom: 0 }}>
<FormSelect
values={themes}
keyProperty="id" titleProperty="name"
currentValue={codeNoteTheme} onChange={setCodeNoteTheme}
/>
</Column>
</FormGroup>
<Column className="side-checkbox">
<FormCheckbox
@@ -73,7 +72,7 @@ function Appearance() {
currentValue={codeLineWrapEnabled} onChange={setCodeLineWrapEnabled}
/>
</Column>
</FormGroup>
</div>
<CodeNotePreview wordWrapping={codeLineWrapEnabled} themeName={codeNoteTheme} />
</OptionsSection>

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

@@ -153,9 +153,8 @@ function CodeBlockStyle() {
return (
<OptionsSection title={t("highlighting.title")}>
<FormGroup className="row">
<Column md={6}>
<label>{t("highlighting.color-scheme")}</label>
<div className="row" style={{ marginBottom: "15px" }}>
<FormGroup className="col-md-6" label={t("highlighting.color-scheme")} style={{ marginBottom: 0 }}>
<FormSelectWithGroups
values={themes}
keyProperty="val" titleProperty="title"
@@ -164,7 +163,7 @@ function CodeBlockStyle() {
setCodeBlockTheme(newTheme);
}}
/>
</Column>
</FormGroup>
<Column md={6} className="side-checkbox">
<FormCheckbox
@@ -173,7 +172,7 @@ function CodeBlockStyle() {
currentValue={codeBlockWordWrap} onChange={setCodeBlockWordWrap}
/>
</Column>
</FormGroup>
</div>
<CodeBlockPreview theme={codeBlockTheme} wordWrap={codeBlockWordWrap} />
</OptionsSection>
@@ -302,21 +301,19 @@ function DateTimeFormatOptions() {
</FormText>
<FormGroup className="row align-items-center">
<Column>
<label>{t("custom_date_time_format.format_string")}</label>
<FormGroup className="col-md-6" label={t("custom_date_time_format.format_string")}>
<FormTextBox
name="custom-date-time-format"
placeholder="YYYY-MM-DD HH:mm"
currentValue={customDateTimeFormat || "YYYY-MM-DD HH:mm"} onChange={setCustomDateTimeFormat}
/>
</Column>
</FormGroup>
<Column>
<label>{t("custom_date_time_format.formatted_time")}</label>
<FormGroup className="col-md-6" label={t("custom_date_time_format.formatted_time")}>
<div className="formatted-date">
{formatDateTime(new Date(), customDateTimeFormat)}
</div>
</Column>
</FormGroup>
</FormGroup>
</OptionsSection>
)