gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-18 13:24:25 +01:00
Code Issues Actions 8 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

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

@ -1,3 +1,7 @@
:root {
--title-transition: opacity 200ms ease-in;
}
.component.inline-title { .component.inline-title {
contain: none; contain: none;
} }
@ -9,6 +13,12 @@
& > .inline-title-row { & > .inline-title-row {
display: flex; display: flex;
align-items: center; align-items: center;
transition: var(--title-transition);
&.hidden {
opacity: 0;
pointer-events: none;
}
} }
&.hidden { &.hidden {
@ -20,29 +30,17 @@
} }
} }
.note-split > .title-row .note-icon-widget, .title-row {
.note-split > .title-row .note-title-widget, &.note-icon-widget,
.inline-title > .inline-title-row { &.note-title-widget {
transition: opacity 200ms ease-in; transition: var(--title-transition);
}
.note-split {
&.inline-title-visible {
&> .title-row {
.note-icon-widget,
.note-title-widget {
opacity: 0;
pointer-events: none;
}
}
} }
&:not(.inline-title-visible) { &.hide-title .note-icon-widget,
.inline-title .inline-title-row { &.hide-title .note-title-widget {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
}
} }
.note-split.type-code:not(.mime-text-x-sqlite) .inline-title { .note-split.type-code:not(.mime-text-x-sqlite) .inline-title {

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

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