gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-27 09:03:36 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

ui/grid view: fade out overflowing content

Browse Source
This commit is contained in:
Adorian Doran 2026-02-25 09:40:05 +02:00
parent 9651ca99f3
commit b3c397e847
2 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -355,7 +355,15 @@
.note-book-card .note-book-content {
padding: 0;
flex: 1;
overflow: hidden;
font-size: 0.8rem;
&.note-book-content-overflowing {
mask-image: linear-gradient(to bottom, black calc(100% - 75px), transparent 100%);
mask-repeat: no-repeat;
mask-size: 100% 100%;
}
.ck-content p {
margin-bottom: 0.5em;

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

@ -21,6 +21,8 @@ import ActionButton from "../../react/ActionButton";
import linkContextMenuService from "../../../menus/link_context_menu";
import { ComponentChildren, TargetedMouseEvent } from "preact";
const contentSizeObserver = new ResizeObserver(onContentResized);
export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
const expandDepth = useExpansionDepth(note);
const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
@ -212,6 +214,17 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
const [ready, setReady] = useState(false);
const [noteType, setNoteType] = useState<string>("none");
useEffect(() => {
const contentElement = contentRef.current;
if (!contentElement) return;
contentSizeObserver.observe(contentElement);
return () => {
contentSizeObserver.unobserve(contentElement);
}
}, []);
useEffect(() => {
content_renderer.getRenderedContent(note, {
trim,
@ -298,4 +311,11 @@ function useExpansionDepth(note: FNote) {
}
return parseInt(expandDepth, 10);
}
function onContentResized(entries: ResizeObserverEntry[], observer: ResizeObserver): void {
for (const contentElement of entries) {
const isOverflowing = ((contentElement.target.scrollHeight > contentElement.target.clientHeight))
contentElement.target.classList.toggle("note-book-content-overflowing", isOverflowing);
}
}