mirror of
https://github.com/zadam/trilium.git
synced 2025-12-20 14:24:27 +01:00
feat(breadcrumb): add context menu on last item
This commit is contained in:
Elian Doran
parent
7c85fe1c37
commit
15f9b2cadf
@ -4,6 +4,7 @@ import { useContext, useRef, useState } from "preact/hooks";
|
||||
import { Fragment } from "preact/jsx-runtime";
|
||||
|
||||
import appContext from "../../components/app_context";
|
||||
import Component from "../../components/component";
|
||||
import NoteContext from "../../components/note_context";
|
||||
import FNote from "../../entities/fnote";
|
||||
import contextMenu, { MenuItem } from "../../menus/context_menu";
|
||||
@ -33,6 +34,7 @@ const FINAL_ITEMS = 2;
|
||||
|
||||
export default function Breadcrumb({ note, noteContext }: { note: FNote, noteContext: NoteContext }) {
|
||||
const notePath = buildNotePaths(noteContext);
|
||||
const parentComponent = useContext(ParentComponent);
|
||||
|
||||
return (
|
||||
<div className="breadcrumb">
|
||||
@ -40,7 +42,7 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
|
||||
<>
|
||||
{notePath.slice(0, INITIAL_ITEMS).map((item, index) => (
|
||||
<Fragment key={item}>
|
||||
<BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} />
|
||||
<BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} />
|
||||
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index + 1]} noteContext={noteContext} />
|
||||
</Fragment>
|
||||
))}
|
||||
@ -48,7 +50,7 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
|
||||
{notePath.slice(-FINAL_ITEMS).map((item, index) => (
|
||||
<Fragment key={item}>
|
||||
<BreadcrumbSeparator notePath={notePath[notePath.length - FINAL_ITEMS - (1 - index)]} activeNotePath={item} noteContext={noteContext} />
|
||||
<BreadcrumbItem index={notePath.length - FINAL_ITEMS + index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} />
|
||||
<BreadcrumbItem index={notePath.length - FINAL_ITEMS + index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} />
|
||||
</Fragment>
|
||||
))}
|
||||
</>
|
||||
@ -57,7 +59,7 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
|
||||
<Fragment key={item}>
|
||||
{index === 0
|
||||
? <BreadcrumbRoot noteContext={noteContext} />
|
||||
: <BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} />
|
||||
: <BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} />
|
||||
}
|
||||
{(index < notePath.length - 1 || note?.hasChildren()) &&
|
||||
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index + 1]} noteContext={noteContext} />}
|
||||
@ -121,7 +123,7 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbLastItem({ notePath }: { notePath: string }) {
|
||||
function BreadcrumbLastItem({ notePath, parentComponent }: { notePath: string, parentComponent: Component | null }) {
|
||||
const linkRef = useRef<HTMLAnchorElement>(null);
|
||||
const noteId = notePath.split("/").at(-1);
|
||||
const [ note ] = useState(() => froca.getNoteFromCache(noteId!));
|
||||
@ -143,27 +145,127 @@ function BreadcrumbLastItem({ notePath }: { notePath: string }) {
|
||||
const scrollingContainer = document.querySelector(`[data-ntx-id="${activeNtxId}"] .scrolling-container`);
|
||||
scrollingContainer?.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
onContextMenu={buildContextMenu(notePath, parentComponent)}
|
||||
>{title}</a>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { index: number, notePathLength: number, notePath: string, noteContext: NoteContext | undefined }) {
|
||||
const parentComponent = useContext(ParentComponent);
|
||||
|
||||
function BreadcrumbItem({ index, notePath, noteContext, notePathLength, parentComponent }: { index: number, notePathLength: number, notePath: string, noteContext: NoteContext | undefined, parentComponent: Component | null }) {
|
||||
if (index === 0) {
|
||||
return <BreadcrumbRoot noteContext={noteContext} />;
|
||||
}
|
||||
|
||||
if (index === notePathLength - 1) {
|
||||
return <>
|
||||
<BreadcrumbLastItem notePath={notePath} />
|
||||
<BreadcrumbLastItem notePath={notePath} parentComponent={parentComponent} />
|
||||
</>;
|
||||
}
|
||||
|
||||
return <NoteLink
|
||||
notePath={notePath}
|
||||
noContextMenu
|
||||
onContextMenu={async (e) => {
|
||||
onContextMenu={buildContextMenu(notePath, parentComponent)}
|
||||
/>;
|
||||
}
|
||||
|
||||
function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
|
||||
return (
|
||||
<Dropdown
|
||||
text={<Icon icon="bx bx-chevron-right" />}
|
||||
noSelectButtonStyle
|
||||
buttonClassName="icon-action"
|
||||
hideToggleArrow
|
||||
dropdownOptions={{ popperConfig: { strategy: "fixed", placement: "top" } }}
|
||||
>
|
||||
<BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} activeNotePath={activeNotePath} />
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
|
||||
const notePathComponents = notePath.split("/");
|
||||
const parentNoteId = notePathComponents.at(-1);
|
||||
const childNotes = useChildNotes(parentNoteId);
|
||||
|
||||
return (
|
||||
<ul className="breadcrumb-child-list">
|
||||
{childNotes.map((note) => {
|
||||
if (note.noteId === "_hidden") return;
|
||||
|
||||
const childNotePath = `${notePath}/${note.noteId}`;
|
||||
return <li key={note.noteId}>
|
||||
<FormListItem
|
||||
icon={note.getIcon()}
|
||||
onClick={() => noteContext?.setNote(childNotePath)}
|
||||
>
|
||||
{childNotePath !== activeNotePath
|
||||
? <span>{note.title}</span>
|
||||
: <strong>{note.title}</strong>}
|
||||
</FormListItem>
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteContext: NoteContext | undefined }) {
|
||||
return (
|
||||
<Dropdown
|
||||
text={<Icon icon="bx bx-dots-horizontal-rounded" />}
|
||||
noSelectButtonStyle
|
||||
buttonClassName="icon-action"
|
||||
hideToggleArrow
|
||||
dropdownOptions={{ popperConfig: { strategy: "fixed" } }}
|
||||
>
|
||||
<ul className="breadcrumb-child-list">
|
||||
{items.map((notePath) => {
|
||||
const notePathComponents = notePath.split("/");
|
||||
const noteId = notePathComponents[notePathComponents.length - 1];
|
||||
const note = froca.getNoteFromCache(noteId);
|
||||
if (!note) return null;
|
||||
|
||||
return <li key={note.noteId}>
|
||||
<FormListItem
|
||||
icon={note.getIcon()}
|
||||
onClick={() => noteContext?.setNote(notePath)}
|
||||
>
|
||||
<span>{note.title}</span>
|
||||
</FormListItem>
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
function buildNotePaths(noteContext: NoteContext) {
|
||||
const notePathArray = noteContext.notePathArray;
|
||||
if (!notePathArray) return [];
|
||||
|
||||
let prefix = "";
|
||||
let output: string[] = [];
|
||||
let pos = 0;
|
||||
let hoistedNotePos = -1;
|
||||
for (const notePath of notePathArray) {
|
||||
if (noteContext.hoistedNoteId !== "root" && notePath === noteContext.hoistedNoteId) {
|
||||
hoistedNotePos = pos;
|
||||
}
|
||||
output.push(`${prefix}${notePath}`);
|
||||
prefix += `${notePath}/`;
|
||||
pos++;
|
||||
}
|
||||
|
||||
// When hoisted, display only the path starting with the hoisted note.
|
||||
if (noteContext.hoistedNoteId !== "root" && hoistedNotePos > -1) {
|
||||
output = output.slice(hoistedNotePos);
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
//#region Context menu
|
||||
function buildContextMenu(notePath: string, parentComponent: Component | null) {
|
||||
return async (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const notePathComponents = notePath.split("/");
|
||||
@ -281,101 +383,6 @@ function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { inde
|
||||
}
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
|
||||
function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
|
||||
return (
|
||||
<Dropdown
|
||||
text={<Icon icon="bx bx-chevron-right" />}
|
||||
noSelectButtonStyle
|
||||
buttonClassName="icon-action"
|
||||
hideToggleArrow
|
||||
dropdownOptions={{ popperConfig: { strategy: "fixed", placement: "top" } }}
|
||||
>
|
||||
<BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} activeNotePath={activeNotePath} />
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
|
||||
const notePathComponents = notePath.split("/");
|
||||
const parentNoteId = notePathComponents.at(-1);
|
||||
const childNotes = useChildNotes(parentNoteId);
|
||||
|
||||
return (
|
||||
<ul className="breadcrumb-child-list">
|
||||
{childNotes.map((note) => {
|
||||
if (note.noteId === "_hidden") return;
|
||||
|
||||
const childNotePath = `${notePath}/${note.noteId}`;
|
||||
return <li key={note.noteId}>
|
||||
<FormListItem
|
||||
icon={note.getIcon()}
|
||||
onClick={() => noteContext?.setNote(childNotePath)}
|
||||
>
|
||||
{childNotePath !== activeNotePath
|
||||
? <span>{note.title}</span>
|
||||
: <strong>{note.title}</strong>}
|
||||
</FormListItem>
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteContext: NoteContext | undefined }) {
|
||||
return (
|
||||
<Dropdown
|
||||
text={<Icon icon="bx bx-dots-horizontal-rounded" />}
|
||||
noSelectButtonStyle
|
||||
buttonClassName="icon-action"
|
||||
hideToggleArrow
|
||||
dropdownOptions={{ popperConfig: { strategy: "fixed" } }}
|
||||
>
|
||||
<ul className="breadcrumb-child-list">
|
||||
{items.map((notePath) => {
|
||||
const notePathComponents = notePath.split("/");
|
||||
const noteId = notePathComponents[notePathComponents.length - 1];
|
||||
const note = froca.getNoteFromCache(noteId);
|
||||
if (!note) return null;
|
||||
|
||||
return <li key={note.noteId}>
|
||||
<FormListItem
|
||||
icon={note.getIcon()}
|
||||
onClick={() => noteContext?.setNote(notePath)}
|
||||
>
|
||||
<span>{note.title}</span>
|
||||
</FormListItem>
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
function buildNotePaths(noteContext: NoteContext) {
|
||||
const notePathArray = noteContext.notePathArray;
|
||||
if (!notePathArray) return [];
|
||||
|
||||
let prefix = "";
|
||||
let output: string[] = [];
|
||||
let pos = 0;
|
||||
let hoistedNotePos = -1;
|
||||
for (const notePath of notePathArray) {
|
||||
if (noteContext.hoistedNoteId !== "root" && notePath === noteContext.hoistedNoteId) {
|
||||
hoistedNotePos = pos;
|
||||
}
|
||||
output.push(`${prefix}${notePath}`);
|
||||
prefix += `${notePath}/`;
|
||||
pos++;
|
||||
}
|
||||
|
||||
// When hoisted, display only the path starting with the hoisted note.
|
||||
if (noteContext.hoistedNoteId !== "root" && hoistedNotePos > -1) {
|
||||
output = output.slice(hoistedNotePos);
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user