fix(client/layout): content header height not properly resized when switching notes

This commit is contained in:
Elian Doran 2025-12-09 11:26:15 +02:00
parent 5770222304
commit bfcf85e0d2
No known key found for this signature in database
3 changed files with 7 additions and 24 deletions

View File

@ -498,10 +498,6 @@ type EventMappings = {
noteIds: string[]; noteIds: string[];
}; };
refreshData: { ntxId: string | null | undefined }; refreshData: { ntxId: string | null | undefined };
contentSafeMarginChanged: {
top: number;
noteContext: NoteContext;
}
}; };
export type EventListener<T extends EventNames> = { export type EventListener<T extends EventNames> = {

View File

@ -48,12 +48,6 @@ export default function FloatingButtons({ items }: FloatingButtonsProps) {
const [ visible, setVisible ] = useState(true); const [ visible, setVisible ] = useState(true);
useEffect(() => setVisible(true), [ note ]); useEffect(() => setVisible(true), [ note ]);
useTriliumEvent("contentSafeMarginChanged", (e) => {
if (e.noteContext === noteContext) {
setTop(e.top);
}
});
return ( return (
<div className="floating-buttons no-print" style={{top}}> <div className="floating-buttons no-print" style={{top}}>
<div className={`floating-buttons-children ${!visible ? "temporarily-hidden" : ""}`}> <div className={`floating-buttons-children ${!visible ? "temporarily-hidden" : ""}`}>
@ -93,9 +87,9 @@ function CloseFloatingButton({ setVisible }: { setVisible(visible: boolean): voi
className="close-floating-buttons-button" className="close-floating-buttons-button"
icon="bx bx-chevrons-right" icon="bx bx-chevrons-right"
text={t("hide_floating_buttons_button.button_title")} text={t("hide_floating_buttons_button.button_title")}
onClick={() => setVisible(false)} onClick={() => setVisible(false)}
noIconActionClass noIconActionClass
/> />
</div> </div>
); );
} }

View File

@ -59,27 +59,20 @@ export default class ContentHeader extends Container<BasicWidget> {
if (shouldFloat !== this.isFloating) { if (shouldFloat !== this.isFloating) {
this.isFloating = shouldFloat; this.isFloating = shouldFloat;
const parentEl = this.parentElement?.closest<HTMLDivElement>(".note-split");
if (shouldFloat) { if (shouldFloat) {
this.$widget.addClass("floating"); this.$widget.addClass("floating");
parentEl!.style.setProperty("--content-header-height", `${this.currentHeight}px`);
} else { } else {
this.$widget.removeClass("floating"); this.$widget.removeClass("floating");
parentEl!.style.removeProperty("--content-header-height");
} }
} }
} }
updateSafeMargin() { updateSafeMargin() {
const newSafeMargin = Math.max(this.currentHeight - this.parentElement!.scrollTop, 0); const parentEl = this.parentElement?.closest<HTMLDivElement>(".note-split");
if (this.isFloating) {
if (newSafeMargin !== this.currentSafeMargin) { parentEl!.style.setProperty("--content-header-height", `${this.currentHeight}px`);
this.currentSafeMargin = newSafeMargin; } else {
parentEl!.style.removeProperty("--content-header-height");
this.triggerEvent("contentSafeMarginChanged", {
top: newSafeMargin,
noteContext: this.noteContext!
});
} }
} }