Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 18:37:12 +02:00
Code Issues Packages Projects Releases Activity

feat(options/spellcheck): merge into single card

Browse Source
This commit is contained in:
Elian Doran
2026-04-06 21:44:49 +03:00
parent 467be38bd1
commit 7b056fe1af
3 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
View File

@@ -45,3 +45,12 @@
.option-row.centered {
justify-content: center;
}
.option-row.full-width {
flex-direction: column;
align-items: stretch;
}
.option-row.full-width .option-row-input {
flex-shrink: unset;
}

5
apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
View File

@@ -8,14 +8,15 @@ interface OptionsRowProps {
description?: string;
children: VNode;
centered?: boolean;
fullWidth?: boolean;
}
export default function OptionsRow({ name, label, description, children, centered }: OptionsRowProps) {
export default function OptionsRow({ name, label, description, children, centered, fullWidth }: OptionsRowProps) {
const id = useUniqueName(name);
const childWithId = cloneElement(children, { id });
return (
<div className={`option-row ${centered ? "centered" : ""}`}>
<div className={`option-row ${centered ? "centered" : ""} ${fullWidth ? "full-width" : ""}`}>
<div className="option-row-label">
{label && <label for={id}>{label}</label>}
{description && <small className="option-row-description">{description}</small>}

26
apps/client/src/widgets/type_widgets/options/spellcheck.tsx
View File

@@ -25,21 +25,19 @@ function ElectronSpellcheckSettings() {
const [ spellCheckEnabled, setSpellCheckEnabled ] = useTriliumOptionBool("spellCheckEnabled");
return (
<>
<OptionsSection title={t("spellcheck.title")}>
<FormText>{t("spellcheck.restart-required")}</FormText>
<OptionsSection title={t("spellcheck.title")}>
<FormText>{t("spellcheck.restart-required")}</FormText>
<OptionsRow name="spell-check-enabled" label={t("spellcheck.enable")}>
<FormToggle
switchOnName="" switchOffName=""
currentValue={spellCheckEnabled}
onChange={setSpellCheckEnabled}
/>
</OptionsRow>
</OptionsSection>
<OptionsRow name="spell-check-enabled" label={t("spellcheck.enable")}>
<FormToggle
switchOnName="" switchOffName=""
currentValue={spellCheckEnabled}
onChange={setSpellCheckEnabled}
/>
</OptionsRow>
{spellCheckEnabled && <SpellcheckLanguages />}
</>
</OptionsSection>
);
}
@@ -74,7 +72,7 @@ function SpellcheckLanguages() {
}, []);
return (
<OptionsSection title={t("spellcheck.language_code_label")}>
<OptionsRow name="spell-check-languages" label={t("spellcheck.language_code_label")} fullWidth>
<CheckboxList
values={availableLanguages}
keyProperty="code" titleProperty="name"
@@ -82,7 +80,7 @@ function SpellcheckLanguages() {
onChange={setSelectedCodes}
columnWidth="200px"
/>
</OptionsSection>
</OptionsRow>
);
}