feat(status_bar): language selector

This commit is contained in:
Elian Doran 2025-12-10 22:39:07 +02:00
parent 06a5298efa
commit 5a1d138f29
No known key found for this signature in database
5 changed files with 47 additions and 13 deletions

View File

@ -52,6 +52,7 @@ import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
import BreadcrumbBadges from "../widgets/BreadcrumbBadges.jsx";
import NoteTitleDetails from "../widgets/NoteTitleDetails.jsx";
import NoteStatusBar from "../widgets/NoteStatusBar.jsx";
export default class DesktopLayout {
@ -176,7 +177,11 @@ export default class DesktopLayout {
...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
...this.customWidgets.get("note-detail-pane")
)
.optChild(isNewLayout, <Ribbon />)
.optChild(isNewLayout, (
<Ribbon>
<NoteStatusBar />
</Ribbon>
))
)
)
.child(...this.customWidgets.get("center-pane"))

View File

@ -1962,7 +1962,7 @@
"unknown_widget": "Unknown widget for \"{{id}}\"."
},
"note_language": {
"not_set": "Not set",
"not_set": "No language set",
"configure-languages": "Configure languages..."
},
"content_language": {

View File

@ -0,0 +1,13 @@
.note-status-bar {
display: flex;
align-items: center;
padding-inline: 1em;
.dropdown {
font-size: 0.85em;
.dropdown-toggle {
padding: 0.1em 0.25em;
}
}
}

View File

@ -0,0 +1,11 @@
import "./NoteStatusBar.css";
import { NoteLanguageSelector } from "./ribbon/BasicPropertiesTab";
export default function NoteStatusBar() {
return (
<div className="note-status-bar">
<NoteLanguageSelector />
</div>
);
}

View File

@ -310,13 +310,25 @@ export function useShareState(note: FNote | null | undefined) {
}
function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
return (
<div className="note-language-container">
<span>{t("basic_properties.language")}:</span>
&nbsp;
<NoteLanguageSelector note={note} />
<HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
</div>
);
}
export function NoteLanguageSelector({ note }: { note?: FNote | null }) {
const [ modalShown, setModalShown ] = useState(false);
const [ languages ] = useTriliumOption("languages");
const DEFAULT_LOCALE = {
id: "",
name: t("note_language.not_set")
};
const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language");
const [ modalShown, setModalShown ] = useState(false);
const locales = useMemo(() => {
const enabledLanguages = JSON.parse(languages ?? "[]") as string[];
const filteredLanguages = getAvailableLocales().filter((l) => typeof l !== "object" || enabledLanguages.includes(l.id));
@ -324,9 +336,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
}, [ languages ]);
return (
<div className="note-language-container">
<span>{t("basic_properties.language")}:</span>
&nbsp;
<>
<LocaleSelector
locales={locales}
defaultLocale={DEFAULT_LOCALE}
@ -337,12 +347,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
icon="bx bx-cog"
>{t("note_language.configure-languages")}</FormListItem>
)}
>
</LocaleSelector>
<HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
/>
<Modal
className="content-languages-modal"
title={t("content_language.title")}
@ -351,7 +356,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
>
<ContentLanguagesList />
</Modal>
</div>
</>
);
}