diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index b18db5004..2ad525dca 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -44,7 +44,6 @@ import NoteDetail from "../widgets/NoteDetail.jsx"; import PromotedAttributes from "../widgets/PromotedAttributes.jsx"; import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx"; import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx"; -import Breadcrumb from "../widgets/layout/Breadcrumb.jsx"; import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx"; import { isExperimentalFeatureEnabled } from "../services/experimental_features.js"; import NoteActions from "../widgets/ribbon/NoteActions.jsx"; @@ -52,7 +51,6 @@ 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"; import StatusBar from "../widgets/layout/StatusBar.jsx"; export default class DesktopLayout { @@ -153,11 +151,7 @@ export default class DesktopLayout { ) .optChild(!isFloatingTitlebar, titleRow) .optChild(!isNewLayout, ) - .optChild(isNewLayout, ( - - - - )) + .optChild(isNewLayout, ) .child(new WatchedFileUpdateStatusWidget()) .child() .child( diff --git a/apps/client/src/widgets/NoteStatusBar.css b/apps/client/src/widgets/NoteStatusBar.css deleted file mode 100644 index c43f13daf..000000000 --- a/apps/client/src/widgets/NoteStatusBar.css +++ /dev/null @@ -1,13 +0,0 @@ -.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 deleted file mode 100644 index 3b686ff84..000000000 --- a/apps/client/src/widgets/NoteStatusBar.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import "./NoteStatusBar.css"; - -import { t } from "../services/i18n"; -import { openInAppHelpFromUrl } from "../services/utils"; -import { FormListItem } from "./react/FormList"; -import { useNoteContext } from "./react/hooks"; -import { NoteLanguageSelector } from "./ribbon/BasicPropertiesTab"; - -export default function NoteStatusBar() { - const { note } = useNoteContext(); - - return ( -
- openInAppHelpFromUrl("veGu4faJErEM")} - icon="bx bx-help-circle" - >{t("note_language.help-on-languages")} - )} - /> -
- ); -} diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css index 8ece8cc27..ca916e1d1 100644 --- a/apps/client/src/widgets/layout/StatusBar.css +++ b/apps/client/src/widgets/layout/StatusBar.css @@ -1,5 +1,20 @@ .component.status-bar { contain: none; border-top: 1px solid var(--main-border-color); - background-color: var(--left-pane-background-color) + background-color: var(--left-pane-background-color); + display: flex; + align-items: center; + padding-inline: 0.25em; + + > .breadcrumb-row { + flex-grow: 1; + } + + .dropdown { + font-size: 0.85em; + + .dropdown-toggle { + padding: 0.1em 0.25em; + } + } } diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx index 987ad99ff..e017728de 100644 --- a/apps/client/src/widgets/layout/StatusBar.tsx +++ b/apps/client/src/widgets/layout/StatusBar.tsx @@ -1,12 +1,46 @@ -import Breadcrumb from "./Breadcrumb"; import "./StatusBar.css"; +import FNote from "../../entities/fnote"; +import { t } from "../../services/i18n"; +import { openInAppHelpFromUrl } from "../../services/utils"; +import { FormListItem } from "../react/FormList"; +import { useNoteContext } from "../react/hooks"; +import { NoteLanguageSelector } from "../ribbon/BasicPropertiesTab"; +import Breadcrumb from "./Breadcrumb"; + +interface StatusBarContext { + note: FNote; +} + export default function StatusBar() { + const { note } = useNoteContext(); + const context = note && { note } satisfies StatusBarContext; + return (
-
- -
+ {context && <> +
+ +
+ +
+ +
+ }
); } + +function LanguageSwitcher({ note }: StatusBarContext) { + return ( + openInAppHelpFromUrl("veGu4faJErEM")} + icon="bx bx-help-circle" + >{t("note_language.help-on-languages")} + )} + /> + ); +}