gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-19 22:58:52 +02:00
Code Issues Actions 119 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;
}
.option-row > select {
.option-row > select,
.option-row > .dropdown {
width: 60%;
}
.option-row > .dropdown button {
width: 100%;
text-align: start;
}
.option-row:last-of-type {
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 FormSelect from "../../react/FormSelect";
import OptionsRow from "./components/OptionsRow";
@ -12,6 +12,9 @@ import RawHtml from "../../react/RawHtml";
import Admonition from "../../react/Admonition";
import Button from "../../react/Button";
import CheckboxList from "./components/CheckboxList";
import FormDropdownList from "../../react/FormDropdownList";
import Dropdown from "../../react/Dropdown";
import { FormListItem } from "../../react/FormList";
export default function InternationalizationOptions() {
return (
@ -57,12 +60,20 @@ function LocalizationOptions() {
}
function LocaleSelector({ id, locales, currentValue, onChange }: { id?: string; locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) {
return <FormSelect
id={id}
values={locales}
keyProperty="id" titleProperty="name"
currentValue={currentValue} onChange={onChange}
/>;
const [ activeLocale, setActiveLocale ] = useState(locales.find(l => l.id === currentValue));
return (
<Dropdown text={activeLocale?.name}>
{locales.map(locale => (
<FormListItem
checked={locale === activeLocale }
onClick={() => {
setActiveLocale(locale);
onChange(locale.id);
}}
>{locale.name}</FormListItem>
))}
</Dropdown>
)
}
function DateSettings() {