diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 4c3a555ef1..2fafb19ed0 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -1505,7 +1505,8 @@ "custom_dictionary_description": "Words added to the dictionary are synced across all your devices.", "custom_dictionary_edit": "Custom words", "custom_dictionary_edit_description": "Edit the list of words that should not be flagged by the spell checker. Changes will be visible after a restart.", - "custom_dictionary_open": "Edit dictionary" + "custom_dictionary_open": "Edit dictionary", + "related_description": "Configure spell check languages and custom dictionary." }, "sync_2": { "config_title": "Sync Configuration", diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css index a811aaa720..c565d54f47 100644 --- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css +++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css @@ -45,3 +45,15 @@ .option-row.centered { justify-content: center; } + +.option-row-link.use-tn-links { + text-decoration: none; + color: inherit; + margin-inline: calc(-1 * var(--options-card-padding, 15px)); + padding-inline: var(--options-card-padding, 15px); + transition: background-color 250ms ease-in-out; +} + +.option-row-link:hover { + background: var(--hover-item-background-color); +} diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx index 92f0c04315..d72ba77d04 100644 --- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx +++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx @@ -1,5 +1,7 @@ -import { cloneElement, VNode } from "preact"; import "./OptionsRow.css"; + +import { cloneElement, VNode } from "preact"; + import { useUniqueName } from "../../../react/hooks"; interface OptionsRowProps { @@ -25,4 +27,24 @@ export default function OptionsRow({ name, label, description, children, centere ); -} \ No newline at end of file +} + +interface OptionsRowLinkProps { + label: string; + description?: string; + href: string; +} + +export function OptionsRowLink({ label, description, href }: OptionsRowLinkProps) { + return ( + +
+ + {description && {description}} +
+
+ +
+
+ ); +} diff --git a/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx b/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx index fea1e9add9..5a26f51fd0 100644 --- a/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx +++ b/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx @@ -1,24 +1,29 @@ -import OptionsSection from "./OptionsSection"; -import type { OptionPages } from "../../ContentWidget"; import { t } from "../../../../services/i18n"; +import type { OptionPages } from "../../ContentWidget"; +import { OptionsRowLink } from "./OptionsRow"; +import OptionsSection from "./OptionsSection"; + +interface RelatedSettingsItem { + title: string; + description?: string; + targetPage: OptionPages; +} interface RelatedSettingsProps { - items: { - title: string; - targetPage: OptionPages; - }[]; + items: RelatedSettingsItem[]; } export default function RelatedSettings({ items }: RelatedSettingsProps) { return ( - + {items.map((item) => ( + + ))} ); } diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx index 2804f25e5f..5f65993021 100644 --- a/apps/client/src/widgets/type_widgets/options/i18n.tsx +++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx @@ -5,13 +5,14 @@ import OptionsRow from "./components/OptionsRow"; import OptionsSection from "./components/OptionsSection"; import { useTriliumOption, useTriliumOptionJson } from "../../react/hooks"; import type { Locale } from "@triliumnext/commons"; -import { restartDesktopApp } from "../../../services/utils"; +import { isElectron, restartDesktopApp } from "../../../services/utils"; import FormRadioGroup from "../../react/FormRadioGroup"; import FormText from "../../react/FormText"; import RawHtml from "../../react/RawHtml"; import Admonition from "../../react/Admonition"; import Button from "../../react/Button"; import CheckboxList from "./components/CheckboxList"; +import RelatedSettings from "./components/RelatedSettings"; import { LocaleSelector } from "./components/LocaleSelector"; export default function InternationalizationOptions() { @@ -19,8 +20,17 @@ export default function InternationalizationOptions() { <> + {isElectron() && ( + + )} - ) + ); } function LocalizationOptions() {