feat(react/ribbon): edit content languages in modal

This commit is contained in:
Elian Doran 2025-08-27 19:56:14 +03:00
parent cbdfa9079c
commit e328f18558
No known key found for this signature in database
2 changed files with 27 additions and 13 deletions

View File

@ -15,11 +15,11 @@ import FormDropdownList from "../react/FormDropdownList";
import toast from "../../services/toast";
import branches from "../../services/branches";
import sync from "../../services/sync";
import appContext from "../../components/app_context";
import HelpButton from "../react/HelpButton";
import { TabContext } from "./ribbon-interface";
import Modal from "../react/Modal";
import { CodeMimeTypesList } from "../type_widgets/options/code_notes";
import { ContentLanguagesList } from "../type_widgets/options/i18n";
export default function BasicPropertiesTab({ note }: TabContext) {
return (
@ -292,6 +292,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
};
const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language");
const [ modalShown, setModalShown ] = useState(false);
const locales = useMemo(() => {
const enabledLanguages = JSON.parse(languages ?? "[]") as string[];
@ -348,14 +349,20 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
})}
<FormListItem
onClick={(e) => {
e.stopPropagation();
appContext.tabManager.openContextWithNote("_optionsLocalization", { activate: true });
}}
onClick={() => setModalShown(true)}
>{t("note_language.configure-languages")}</FormListItem>
</Dropdown>
<HelpButton helpPage="B0lcI9xz1r8K" style={{ marginLeft: "4px" }} />
<Modal
className="content-languages-modal"
title={t("content_language.title")}
show={modalShown} onHidden={() => setModalShown(false)}
size="lg" scrollable
>
<ContentLanguagesList />
</Modal>
</div>
)
}

View File

@ -118,18 +118,25 @@ function DateSettings() {
}
function ContentLanguages() {
const locales = useMemo(() => getAvailableLocales(), []);
const [ languages, setLanguages ] = useTriliumOptionJson<string[]>("languages");
return (
<OptionsSection title={t("content_language.title")}>
<FormText>{t("content_language.description")}</FormText>
<CheckboxList
values={locales}
keyProperty="id" titleProperty="name"
currentValue={languages} onChange={setLanguages}
/>
<ContentLanguagesList />
</OptionsSection>
);
}
export function ContentLanguagesList() {
const locales = useMemo(() => getAvailableLocales(), []);
const [ languages, setLanguages ] = useTriliumOptionJson<string[]>("languages");
return (
<CheckboxList
values={locales}
keyProperty="id" titleProperty="name"
currentValue={languages} onChange={setLanguages}
columnWidth="300px"
/>
);
}