gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-15 11:54:24 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(status_bar): integrate note paths widget

Browse Source
This commit is contained in:
Elian Doran 2025-12-13 00:05:33 +02:00
parent 738fa6fd0e
commit eb02330fdf
No known key found for this signature in database
4 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/client/src/widgets/layout/StatusBar.css
View File

@ -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 {

24
apps/client/src/widgets/layout/StatusBar.tsx
View File

@ -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<DropdownProps, "hideToggleArrow" | "title" | "titlePosition"> & {
function StatusBarDropdown({ children, icon, text, buttonClassName, titleOptions, dropdownOptions, ...dropdownProps }: Omit<DropdownProps, "hideToggleArrow" | "title" | "titlePosition"> & {
title: string;
icon?: string;
}) {
@ -79,6 +80,10 @@ function StatusBarDropdown({ children, icon, text, buttonClassName, titleOptions
strategy: "fixed"
}
}}
dropdownOptions={{
...dropdownOptions,
autoClose: "outside"
}}
text={<>
{icon && (<><Icon icon={icon} />&nbsp;</>)}
{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" }}
>
<ul>
<NoteInfoValue text={t("note_info_widget.created")} value={formatDateTime(metadata?.dateCreated)} />
@ -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 (
<StatusBarDropdown
title={t("status_bar.note_paths_title")}
dropdownContainerClassName="dropdown-note-paths"
icon="bx bx-link-alt"
text={sortedNotePaths?.length}
>
<NotePathsWidget
sortedNotePaths={sortedNotePaths}
currentNotePath={notePath}
/>
</StatusBarDropdown>
)
);
}
//#endregion

8
apps/client/src/widgets/ribbon/NotePathsTab.tsx
View File

@ -11,7 +11,13 @@ import { TabContext } from "./ribbon-interface";
export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) {
const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId);
return <NotePathsWidget sortedNotePaths={sortedNotePaths} currentNotePath={notePath} />;
}
export function NotePathsWidget({ sortedNotePaths, currentNotePath }: {
sortedNotePaths: NotePathRecord[] | undefined;
currentNotePath?: string | null | undefined;
}) {
return (
<div class="note-paths-widget">
<>
@ -23,7 +29,7 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte
{sortedNotePaths?.length ? sortedNotePaths.map(sortedNotePath => (
<NotePath
key={sortedNotePath.notePath}
currentNotePath={notePath}
currentNotePath={currentNotePath}
notePathRecord={sortedNotePath}
/>
)) : undefined}

2
apps/client/src/widgets/ribbon/RibbonDefinition.ts
View File

@ -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"
},
{