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

fix(layout/inline-title): title not shown when switching to other types of notes

Browse Source
This commit is contained in:
Elian Doran 2025-12-13 14:38:58 +02:00
parent 0bd89a659c
commit e296416a54
No known key found for this signature in database
2 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,7 @@
:root {
--title-transition: opacity 200ms ease-in;
}
.component.inline-title {
contain: none;
}
@ -9,6 +13,12 @@
& > .inline-title-row {
display: flex;
align-items: center;
transition: var(--title-transition);
&.hidden {
opacity: 0;
pointer-events: none;
}
}
&.hidden {
@ -20,28 +30,16 @@
}
}
.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;
pointer-events: none;
}
}
.title-row {
&.note-icon-widget,
&.note-title-widget {
transition: var(--title-transition);
}
&:not(.inline-title-visible) {
.inline-title .inline-title-row {
opacity: 0;
pointer-events: none;
}
&.hide-title .note-icon-widget,
&.hide-title .note-title-widget {
opacity: 0;
pointer-events: none;
}
}

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

@ -3,7 +3,7 @@ import "./InlineTitle.css";
import { NoteType } from "@triliumnext/commons";
import clsx from "clsx";
import { ComponentChild } from "preact";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
import { Trans } from "react-i18next";
import FNote from "../../entities/fnote";
@ -31,21 +31,23 @@ export default function InlineTitle() {
const { note, parentComponent, viewScope } = useNoteContext();
const type = useNoteProperty(note, "type");
const [ shown, setShown ] = useState(shouldShow(note?.noteId, type, viewScope));
const containerRef= useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [ titleHidden, setTitleHidden ] = useState(false);
useEffect(() => {
useLayoutEffect(() => {
setShown(shouldShow(note?.noteId, type, viewScope));
}, [ note, type, viewScope ]);
useEffect(() => {
useLayoutEffect(() => {
if (!shown) return;
const noteSplit = parentComponent.$widget[0].closest(".note-split");
const titleRow = noteSplit?.querySelector("&> .title-row");
if (!noteSplit || !titleRow) return;
const titleRow = parentComponent.$widget[0].closest(".note-split")?.querySelector("&> .title-row");
if (!titleRow) return;
titleRow.classList.toggle("hide-title", true);
const observer = new IntersectionObserver((entries) => {
noteSplit.classList.toggle("inline-title-visible", entries[0].isIntersecting);
titleRow.classList.toggle("hide-title", entries[0].isIntersecting);
setTitleHidden(!entries[0].isIntersecting);
}, {
threshold: 0.85
});
@ -54,7 +56,7 @@ export default function InlineTitle() {
}
return () => {
noteSplit.classList.remove("inline-title-visible");
titleRow.classList.remove("hide-title");
observer.disconnect();
};
}, [ shown, parentComponent ]);
@ -64,7 +66,7 @@ export default function InlineTitle() {
ref={containerRef}
className={clsx("inline-title", !shown && "hidden")}
>
<div class="inline-title-row">
<div class={clsx("inline-title-row", titleHidden && "hidden")}>
<NoteIcon />
<NoteTitleWidget />
</div>