gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 20:24:28 +01:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

ui/grid view: add a menu button for grid items

Browse Source
This commit is contained in:
Adorian Doran 2026-02-18 09:51:18 +02:00
parent 2a424f8dc4
commit e006550b9f
2 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/client/src/widgets/collections/legacy/ListOrGridView.css
View File

@ -119,6 +119,11 @@
color: inherit;
font-weight: normal;
}
.note-book-item-menu {
margin-inline-start: 8px;
flex-shrink: 0;
}
}
/* #region List view */
@ -167,11 +172,6 @@
opacity: .75;
}
.nested-note-list-item-menu {
margin-inline-start: 8px;
flex-shrink: 0;
}
&.archived {
span.tn-icon + span,
.tn-icon {
@ -307,6 +307,17 @@
/* #endregion */
/* #region Grid view */
.note-book-card {
h5 {
.tn-icon + span {
flex-grow: 1;
}
}
}
.note-list.grid-view .note-list-container {
display: flex;
flex-wrap: wrap;

27
apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
View File

@ -1,7 +1,7 @@
import "./ListOrGridView.css";
import { Card, CardSection } from "../../react/Card";
import { useEffect, useRef, useState } from "preact/hooks";
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import FNote from "../../../entities/fnote";
import attribute_renderer from "../../../services/attribute_renderer";
@ -139,10 +139,7 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
showNotePath={parentNote.type === "search"}
highlightedTokens={highlightedTokens} />
<NoteAttributes note={note} />
<ActionButton className="nested-note-list-item-menu"
icon="bx bx-dots-vertical-rounded" text=""
onClick={(e) => openNoteMenu(notePath, e)}
/>
<NoteMenuButton notePath={notePath} />
</h5>
</CardSection>
);
@ -174,6 +171,7 @@ function GridNoteCard(props: GridNoteCardProps) {
showNotePath={props.parentNote.type === "search"}
highlightedTokens={props.highlightedTokens}
/>
<NoteMenuButton notePath={notePath} />
</h5>
<NoteContent note={props.note}
trim
@ -261,6 +259,18 @@ function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expan
/>);
}
function NoteMenuButton(props: {notePath: string}) {
const openMenu = useCallback((e: TargetedMouseEvent<HTMLElement>) => {
linkContextMenuService.openContextMenu(props.notePath, e);
e.stopPropagation()
}, [props.notePath]);
return <ActionButton className="note-book-item-menu"
icon="bx bx-dots-vertical-rounded" text=""
onClick={openMenu}
/>
}
function getNotePath(parentNote: FNote, childNote: FNote) {
if (parentNote.type === "search") {
// for search note parent, we want to display a non-search path
@ -282,9 +292,4 @@ function useExpansionDepth(note: FNote) {
}
return parseInt(expandDepth, 10);
}
function openNoteMenu(notePath, e: TargetedMouseEvent<HTMLElement>) {
linkContextMenuService.openContextMenu(notePath, e);
e.stopPropagation()
}
}