gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-26 08:33:36 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

ui/list & grid view: refactor

Browse Source
This commit is contained in:
Adorian Doran 2026-02-23 12:21:07 +02:00
parent d7339ff14d
commit fec929dfee
2 changed files with 53 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/collections/Pagination.tsx
View File

@ -9,7 +9,7 @@ import Button from "../react/Button";
import "./Pagination.css";
import clsx from "clsx";
interface PaginationContext {
export interface PaginationContext {
className?: string;
page: number;
setPage: Dispatch<StateUpdater<number>>;

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

@ -13,13 +13,13 @@ import { useImperativeSearchHighlighlighting, useNoteLabel, useNoteLabelBoolean,
import Icon from "../../react/Icon";
import NoteLink from "../../react/NoteLink";
import { ViewModeProps } from "../interface";
import { Pager, usePagination } from "../Pagination";
import { Pager, usePagination, PaginationContext } from "../Pagination";
import { filterChildNotes, useFilteredNoteIds } from "./utils";
import { JSX } from "preact/jsx-runtime";
import { clsx } from "clsx";
import ActionButton from "../../react/ActionButton";
import linkContextMenuService from "../../../menus/link_context_menu";
import { TargetedMouseEvent } from "preact";
import { ComponentChildren, TargetedMouseEvent } from "preact";
export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
const expandDepth = useExpansionDepth(note);
@ -27,32 +27,18 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
const { pageNotes, ...pagination } = usePagination(note, noteIds);
const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived");
const noteType = useNoteProperty(note, "type");
const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? "");
return (
<div className="note-list list-view">
<CollectionProperties
note={note}
centerChildren={<Pager className="note-list-top-pager" {...pagination} />}
/>
{ noteIds.length > 0 && <div className="note-list-wrapper">
{!hasCollectionProperties && <Pager {...pagination} />}
<Card className={clsx("nested-note-list", {"search-results": (noteType === "search")})}>
{pageNotes?.map(childNote => (
<ListNoteCard
key={childNote.noteId}
note={childNote} parentNote={note}
expandDepth={expandDepth} highlightedTokens={highlightedTokens}
currentLevel={1} includeArchived={includeArchived} />
))}
</Card>
<Pager className="note-list-bottom-pager" {...pagination} />
</div>}
</div>
);
return <NoteList note={note} viewMode="list" noteIds={noteIds} pagination={pagination}>
<Card className={clsx("nested-note-list", {"search-results": (noteType === "search")})}>
{pageNotes?.map(childNote => (
<ListNoteCard
key={childNote.noteId}
note={childNote} parentNote={note}
expandDepth={expandDepth} highlightedTokens={highlightedTokens}
currentLevel={1} includeArchived={includeArchived} />
))}
</Card>
</NoteList>;
}
export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
@ -60,32 +46,47 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
const { pageNotes, ...pagination } = usePagination(note, noteIds);
const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived");
const noteType = useNoteProperty(note, "type");
const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? "");
return (
<div className="note-list grid-view">
<CollectionProperties
note={note}
centerChildren={<Pager className="note-list-top-pager" {...pagination} />}
/>
<div className="note-list-wrapper">
{!hasCollectionProperties && <Pager {...pagination} />}
<div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
{pageNotes?.map(childNote => (
<GridNoteCard key={childNote.noteId}
note={childNote}
parentNote={note}
highlightedTokens={highlightedTokens}
includeArchived={includeArchived} />
))}
</div>
<Pager className="note-list-bottom-pager" {...pagination} />
</div>
return <NoteList note={note} viewMode="grid-view" noteIds={noteIds} pagination={pagination}>
<div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
{pageNotes?.map(childNote => (
<GridNoteCard key={childNote.noteId}
note={childNote}
parentNote={note}
highlightedTokens={highlightedTokens}
includeArchived={includeArchived} />
))}
</div>
);
</NoteList>
}
interface NoteListProps {
note: FNote,
viewMode: "list" | "grid-view",
noteIds: string[],
pagination: PaginationContext,
children: ComponentChildren
}
function NoteList(props: NoteListProps) {
const noteType = useNoteProperty(props.note, "type");
const hasCollectionProperties = ["book", "search"].includes(noteType ?? "");
return <div className={"note-list " + props.viewMode}>
<CollectionProperties
note={props.note}
centerChildren={<Pager className="note-list-top-pager" {...props.pagination} />}
/>
{props.noteIds.length > 0 && <div className="note-list-wrapper">
{!hasCollectionProperties && <Pager {...props.pagination} />}
{props.children}
<Pager className="note-list-bottom-pager" {...props.pagination} />
</div>}
</div>
}
function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expandDepth, includeArchived }: {