mirror of
https://github.com/zadam/trilium.git
synced 2025-12-12 18:34:24 +01:00
feat(status_bar): language selector
This commit is contained in:
parent
06a5298efa
commit
5a1d138f29
@ -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"))
|
||||
|
||||
@ -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": {
|
||||
|
||||
13
apps/client/src/widgets/NoteStatusBar.css
Normal file
13
apps/client/src/widgets/NoteStatusBar.css
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
11
apps/client/src/widgets/NoteStatusBar.tsx
Normal file
11
apps/client/src/widgets/NoteStatusBar.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user