gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

refactor(options/i18n): use select for language selection

Browse Source
This commit is contained in:
Elian Doran 2025-10-14 18:10:54 +03:00
parent 1cc0e686ea
commit 0c2b186e50
No known key found for this signature in database
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,10 +10,16 @@
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.option-row > select { .option-row > select,
.option-row > .dropdown {
width: 60%; width: 60%;
} }
.option-row > .dropdown button {
width: 100%;
text-align: start;
}
.option-row:last-of-type { .option-row:last-of-type {
border-bottom: unset; border-bottom: unset;
} }

25
apps/client/src/widgets/type_widgets/options/i18n.tsx
View File

@ -1,4 +1,4 @@
import { useMemo } from "preact/hooks"; import { useMemo, useState } from "preact/hooks";
import { getAvailableLocales, t } from "../../../services/i18n"; import { getAvailableLocales, t } from "../../../services/i18n";
import FormSelect from "../../react/FormSelect"; import FormSelect from "../../react/FormSelect";
import OptionsRow from "./components/OptionsRow"; import OptionsRow from "./components/OptionsRow";
@ -12,6 +12,9 @@ import RawHtml from "../../react/RawHtml";
import Admonition from "../../react/Admonition"; import Admonition from "../../react/Admonition";
import Button from "../../react/Button"; import Button from "../../react/Button";
import CheckboxList from "./components/CheckboxList"; import CheckboxList from "./components/CheckboxList";
import FormDropdownList from "../../react/FormDropdownList";
import Dropdown from "../../react/Dropdown";
import { FormListItem } from "../../react/FormList";
export default function InternationalizationOptions() { export default function InternationalizationOptions() {
return ( return (
@ -57,12 +60,20 @@ function LocalizationOptions() {
} }
function LocaleSelector({ id, locales, currentValue, onChange }: { id?: string; locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) { function LocaleSelector({ id, locales, currentValue, onChange }: { id?: string; locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) {
return <FormSelect const [ activeLocale, setActiveLocale ] = useState(locales.find(l => l.id === currentValue));
id={id} return (
values={locales} <Dropdown text={activeLocale?.name}>
keyProperty="id" titleProperty="name" {locales.map(locale => (
currentValue={currentValue} onChange={onChange} <FormListItem
/>; checked={locale === activeLocale }
onClick={() => {
setActiveLocale(locale);
onChange(locale.id);
}}
>{locale.name}</FormListItem>
))}
</Dropdown>
)
} }
function DateSettings() { function DateSettings() {