diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index e3415bf4b..d50486750 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -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, ) + .optChild(isNewLayout, ( + + + + )) ) ) .child(...this.customWidgets.get("center-pane")) diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 2298f2f2b..fa133d3df 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -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": { diff --git a/apps/client/src/widgets/NoteStatusBar.css b/apps/client/src/widgets/NoteStatusBar.css new file mode 100644 index 000000000..c43f13daf --- /dev/null +++ b/apps/client/src/widgets/NoteStatusBar.css @@ -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; + } + } +} diff --git a/apps/client/src/widgets/NoteStatusBar.tsx b/apps/client/src/widgets/NoteStatusBar.tsx new file mode 100644 index 000000000..fb51587f0 --- /dev/null +++ b/apps/client/src/widgets/NoteStatusBar.tsx @@ -0,0 +1,11 @@ +import "./NoteStatusBar.css"; + +import { NoteLanguageSelector } from "./ribbon/BasicPropertiesTab"; + +export default function NoteStatusBar() { + return ( +
+ +
+ ); +} diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 9c6f656d4..fcdd44082 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -310,13 +310,25 @@ export function useShareState(note: FNote | null | undefined) { } function NoteLanguageSwitch({ note }: { note?: FNote | null }) { + return ( +
+ {t("basic_properties.language")}: +   + + + +
+ ); +} + +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 ( -
- {t("basic_properties.language")}: -   + <> {t("note_language.configure-languages")} )} - > - - - - - + /> -
+ ); }