gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-17 12:54:24 +01:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

feat(layout/inline-title): add transition

Browse Source
This commit is contained in:
Elian Doran 2025-12-13 13:57:54 +02:00
parent 56570d7ba1
commit 0ada6523a8
No known key found for this signature in database
3 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/client/src/widgets/layout/InlineTitle.css
View File

@ -20,6 +20,29 @@
} }
} }
.note-split > .title-row .note-icon-widget,
.note-split > .title-row .note-title-widget,
.inline-title > .inline-title-row {
transition: opacity 200ms ease-in;
}
.note-split {
&.inline-title-visible {
&> .title-row {
.note-icon-widget,
.note-title-widget {
opacity: 0;
}
}
}
&:not(.inline-title-visible) {
.inline-title .inline-title-row {
opacity: 0;
}
}
}
.note-split.type-code:not(.mime-text-x-sqlite) .inline-title { .note-split.type-code:not(.mime-text-x-sqlite) .inline-title {
background-color: var(--main-background-color); background-color: var(--main-background-color);
} }

13
apps/client/src/widgets/layout/InlineTitle.tsx
View File

@ -40,20 +40,21 @@ export default function InlineTitle() {
useEffect(() => { useEffect(() => {
if (!shown) return; if (!shown) return;
const titleRow = parentComponent.$widget[0] const noteSplit = parentComponent.$widget[0].closest(".note-split");
.closest(".note-split") const titleRow = noteSplit?.querySelector("&> .title-row");
?.querySelector("&> .title-row"); if (!noteSplit || !titleRow) return;
if (!titleRow) return;
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
titleRow.classList.toggle("collapse", entries[0].isIntersecting); noteSplit.classList.toggle("inline-title-visible", entries[0].isIntersecting);
}, {
threshold: 0.85
}); });
if (containerRef.current) { if (containerRef.current) {
observer.observe(containerRef.current); observer.observe(containerRef.current);
} }
return () => { return () => {
titleRow.classList.remove("collapse"); noteSplit.classList.remove("inline-title-visible");
observer.disconnect(); observer.disconnect();
}; };
}, [ shown, parentComponent ]); }, [ shown, parentComponent ]);

7
apps/client/src/widgets/note_title.css
View File

@ -51,12 +51,5 @@ body.experimental-feature-new-layout {
display: none; display: none;
} }
} }
&.collapse {
.note-icon-widget,
.note-title-widget {
visibility: hidden;
}
}
} }
} }