gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 03:29:02 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

chore(react/collections/list): display note content

Browse Source
This commit is contained in:
Elian Doran 2025-08-30 16:01:02 +03:00
parent 09fd1c7628
commit 1c986e2bf6
No known key found for this signature in database
3 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,10 +117,6 @@
border: 1px solid transparent;
}
.note-list.grid-view .note-expander {
display: none;
}
.note-list.grid-view .note-book-card {
max-height: 300px;
}

34
apps/client/src/widgets/collections/legacy/ListView.tsx
View File

@ -1,10 +1,12 @@
import { useEffect, useMemo, useState } from "preact/hooks";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import FNote from "../../../entities/fnote";
import Icon from "../../react/Icon";
import { ViewModeProps } from "../interface";
import { useNoteLabel, useNoteLabelBoolean } from "../../react/hooks";
import { useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../../react/hooks";
import froca from "../../../services/froca";
import NoteLink from "../../react/NoteLink";
import "./ListOrGridView.css";
import content_renderer from "../../../services/content_renderer";
export default function ListView({ note, noteIds }: ViewModeProps) {
const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@ -34,6 +36,7 @@ export default function ListView({ note, noteIds }: ViewModeProps) {
}
function NoteCard({ note, expand }: { note: FNote, expand?: boolean }) {
const [ isExpanded, setExpanded ] = useState(expand);
const isSearch = note.type === "search";
const notePath = isSearch
? note.noteId // for search note parent, we want to display a non-search path
@ -41,17 +44,42 @@ function NoteCard({ note, expand }: { note: FNote, expand?: boolean }) {
return (
<div
className="note-book-card no-tooltip-preview"
className={`note-book-card no-tooltip-preview ${isExpanded ? "expanded" : ""}`}
data-note-id={note.noteId}
>
<h5 className="note-book-header">
<span
className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`}
onClick={() => setExpanded(!isExpanded)}
/>
<Icon className="note-icon" icon={note.getIcon()} />
<NoteLink notePath={notePath} noPreview showNotePath={isSearch} />
<NoteContent note={note} />
</h5>
</div>
)
}
function NoteContent({ note, trim }: { note: FNote, trim?: boolean }) {
const contentRef = useRef<HTMLDivElement>(null);
useEffect(() => {
content_renderer.getRenderedContent(note, { trim })
.then(({ $renderedContent, type }) => {
contentRef.current?.replaceChildren(...$renderedContent);
contentRef.current?.classList.add(`type-${type}`);
})
.catch(e => {
console.warn(`Caught error while rendering note '${note.noteId}' of type '${note.type}'`);
console.error(e);
contentRef.current?.replaceChildren("rendering error");
})
}, [ note ]);
return <div ref={contentRef} className="note-book-content" />;
}
function usePagination(note: FNote, noteIds: string[]) {
const [ page, setPage ] = useState(1);
const [ pageNotes, setPageNotes ] = useState<FNote[]>();

21
apps/client/src/widgets/view_widgets/list_or_grid_view.ts
View File

@ -1,6 +1,5 @@
import linkService from "../../services/link.js";
import contentRenderer from "../../services/content_renderer.js";
import froca from "../../services/froca.js";
import attributeRenderer from "../../services/attribute_renderer.js";
import treeService from "../../services/tree.js";
import utils from "../../services/utils.js";
@ -130,22 +129,12 @@ class ListOrGridView extends ViewMode<{}> {
const $expander = $card.find("> .note-book-header .note-expander");
if (expand || this.viewType === "grid") {
$card.addClass("expanded");
$expander.addClass("bx-chevron-down").removeClass("bx-chevron-right");
} else {
$card.removeClass("expanded");
$expander.addClass("bx-chevron-right").removeClass("bx-chevron-down");
}
if ((expand || this.viewType === "grid") && $card.find(".note-book-content").length === 0) {
if ((this.viewType === "grid")) {
$card.append(await this.renderNoteContent(note));
}
}
async renderNoteContent(note: FNote) {
const $content = $('<div class="note-book-content">');
try {
const { $renderedContent, type } = await contentRenderer.getRenderedContent(note, {
trim: this.viewType === "grid" // for grid only short content is needed
@ -158,14 +147,6 @@ class ListOrGridView extends ViewMode<{}> {
className: "ck-find-result"
});
}
$content.append($renderedContent);
$content.addClass(`type-${type}`);
} catch (e) {
console.warn(`Caught error while rendering note '${note.noteId}' of type '${note.type}'`);
console.error(e);
$content.append("rendering error");
}
if (this.viewType === "list") {