diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css index a2415fee1..deea2af02 100644 --- a/apps/client/src/widgets/layout/StatusBar.css +++ b/apps/client/src/widgets/layout/StatusBar.css @@ -49,11 +49,13 @@ .dropdown-toggle { padding: 0.1em 0.25em; } + + .dropdown-menu { + width: max-content; + } } .dropdown-note-info { - width: max-content; - ul { list-style-type: none; padding: 0.5em; @@ -76,6 +78,17 @@ } } } + + .dropdown-note-paths { + .note-paths-widget { + padding: 0.5em; + } + + .note-path-list { + margin: 1em; + padding: 0; + } + } } > .attribute-list { diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx index 3b0450021..aaecd9b09 100644 --- a/apps/client/src/widgets/layout/StatusBar.tsx +++ b/apps/client/src/widgets/layout/StatusBar.tsx @@ -24,22 +24,23 @@ import { ContentLanguagesModal, useLanguageSwitcher } from "../ribbon/BasicPrope import AttributeEditor, { AttributeEditorImperativeHandlers } from "../ribbon/components/AttributeEditor"; import InheritedAttributesTab from "../ribbon/InheritedAttributesTab"; import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab"; +import { NotePathsWidget, useSortedNotePaths } from "../ribbon/NotePathsTab"; import { useAttachments } from "../type_widgets/Attachment"; import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector"; import Breadcrumb from "./Breadcrumb"; -import NotePathsTab, { useSortedNotePaths } from "../ribbon/NotePathsTab"; interface StatusBarContext { note: FNote; + notePath: string | null | undefined; noteContext: NoteContext; viewScope?: ViewScope; hoistedNoteId?: string; } export default function StatusBar() { - const { note, noteContext, viewScope, hoistedNoteId } = useActiveNoteContext(); + const { note, notePath, noteContext, viewScope, hoistedNoteId } = useActiveNoteContext(); const [ attributesShown, setAttributesShown ] = useState(false); - const context: StatusBarContext | undefined | null = note && noteContext && { note, noteContext, viewScope, hoistedNoteId }; + const context: StatusBarContext | undefined | null = note && noteContext && { note, notePath, noteContext, viewScope, hoistedNoteId }; const attributesContext: AttributesProps | undefined | null = context && { ...context, attributesShown, setAttributesShown }; return ( @@ -64,7 +65,7 @@ export default function StatusBar() { ); } -function StatusBarDropdown({ children, icon, text, buttonClassName, titleOptions, ...dropdownProps }: Omit & { +function StatusBarDropdown({ children, icon, text, buttonClassName, titleOptions, dropdownOptions, ...dropdownProps }: Omit & { title: string; icon?: string; }) { @@ -79,6 +80,10 @@ function StatusBarDropdown({ children, icon, text, buttonClassName, titleOptions strategy: "fixed" } }} + dropdownOptions={{ + ...dropdownOptions, + autoClose: "outside" + }} text={<> {icon && (<> )} {text} @@ -192,7 +197,6 @@ export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) { icon="bx bx-info-circle" title={t("status_bar.note_info_title")} dropdownContainerClassName="dropdown-note-info" - dropdownOptions={{ autoClose: "outside" }} >
    @@ -312,17 +316,21 @@ function AttributesPane({ note, noteContext, attributesShown, setAttributesShown //#endregion //#region Note paths -function NotePaths({ note, hoistedNoteId }: StatusBarContext) { +function NotePaths({ note, hoistedNoteId, notePath }: StatusBarContext) { const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId); return ( - + - ) + ); } //#endregion diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx index da1a5c248..d639a8928 100644 --- a/apps/client/src/widgets/ribbon/NotePathsTab.tsx +++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx @@ -11,7 +11,13 @@ import { TabContext } from "./ribbon-interface"; export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) { const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId); + return ; +} +export function NotePathsWidget({ sortedNotePaths, currentNotePath }: { + sortedNotePaths: NotePathRecord[] | undefined; + currentNotePath?: string | null | undefined; +}) { return (
    <> @@ -23,7 +29,7 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte {sortedNotePaths?.length ? sortedNotePaths.map(sortedNotePath => ( )) : undefined} diff --git a/apps/client/src/widgets/ribbon/RibbonDefinition.ts b/apps/client/src/widgets/ribbon/RibbonDefinition.ts index dbb275586..7813c06d8 100644 --- a/apps/client/src/widgets/ribbon/RibbonDefinition.ts +++ b/apps/client/src/widgets/ribbon/RibbonDefinition.ts @@ -112,7 +112,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [ title: t("note_paths.title"), icon: "bx bx-collection", content: NotePathsTab, - show: true, + show: !isNewLayout, toggleCommand: "toggleRibbonTabNotePaths" }, {