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 25 Packages Projects Releases Wiki 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
No known key found for this signature in database
3 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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