From 28bb4edbac81a0a20717b5d36c3281349e0d76ef Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Tue, 9 Dec 2025 19:07:50 +0200 Subject: [PATCH] chore(layout): revert work on floating panel --- apps/client/src/components/app_context.ts | 4 ++ apps/client/src/layouts/desktop_layout.tsx | 12 ++--- .../src/stylesheets/theme-next/ribbon.css | 12 ----- apps/client/src/widgets/FloatingButtons.css | 3 +- apps/client/src/widgets/FloatingButtons.tsx | 10 +++- .../src/widgets/containers/content_header.css | 16 +----- .../src/widgets/containers/content_header.ts | 53 +++++-------------- apps/client/src/widgets/react/InfoBar.css | 3 +- 8 files changed, 34 insertions(+), 79 deletions(-) diff --git a/apps/client/src/components/app_context.ts b/apps/client/src/components/app_context.ts index bd6f0473a..5cd4eecbe 100644 --- a/apps/client/src/components/app_context.ts +++ b/apps/client/src/components/app_context.ts @@ -498,6 +498,10 @@ type EventMappings = { noteIds: string[]; }; refreshData: { ntxId: string | null | undefined }; + contentSafeMarginChanged: { + top: number; + noteContext: NoteContext; + } }; export type EventListener = { diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index f35e55269..d1f35ec62 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -138,21 +138,21 @@ export default class DesktopLayout { .child() .child() ) + .child(new FlexContainer("row") + .class("title-row") + .child() + .child() + ) + .child() .child(new WatchedFileUpdateStatusWidget()) .child() .child( new ScrollingContainer() .filling() .child(new ContentHeader() - .child(new FlexContainer("row") - .class("title-row") - .child() - .child() - ) .child() .child() ) - .child() .child() .child() .child() diff --git a/apps/client/src/stylesheets/theme-next/ribbon.css b/apps/client/src/stylesheets/theme-next/ribbon.css index a518e05dc..556b5cd4e 100644 --- a/apps/client/src/stylesheets/theme-next/ribbon.css +++ b/apps/client/src/stylesheets/theme-next/ribbon.css @@ -178,15 +178,3 @@ ul.editability-dropdown li.dropdown-item > div { .note-info-widget { container: info-section / inline-size; } - -/* - * Styling as a floating toolbar - */ -.ribbon-container { - position: sticky; - top: 0; - left: 0; - right: 0; - background: var(--main-background-color); - z-index: 997; -} diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css index 46ed6dd80..b61df46da 100644 --- a/apps/client/src/widgets/FloatingButtons.css +++ b/apps/client/src/widgets/FloatingButtons.css @@ -6,12 +6,11 @@ .floating-buttons-children, .show-floating-buttons { position: absolute; - top: calc(var(--floating-buttons-vert-offset, 14px) + var(--ribbon-height, 0px) + var(--content-header-height, 0px)); + top: var(--floating-buttons-vert-offset, 14px); inset-inline-end: var(--floating-buttons-horiz-offset, 10px); display: flex; flex-direction: row; z-index: 100; - transition: top 0.3s ease; } .note-split.rtl .floating-buttons-children, diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx index 85b6d5817..f38039afd 100644 --- a/apps/client/src/widgets/FloatingButtons.tsx +++ b/apps/client/src/widgets/FloatingButtons.tsx @@ -48,6 +48,12 @@ export default function FloatingButtons({ items }: FloatingButtonsProps) { const [ visible, setVisible ] = useState(true); useEffect(() => setVisible(true), [ note ]); + useTriliumEvent("contentSafeMarginChanged", (e) => { + if (e.noteContext === noteContext) { + setTop(e.top); + } + }); + return (
@@ -87,9 +93,9 @@ function CloseFloatingButton({ setVisible }: { setVisible(visible: boolean): voi className="close-floating-buttons-button" icon="bx bx-chevrons-right" text={t("hide_floating_buttons_button.button_title")} - onClick={() => setVisible(false)} + onClick={() => setVisible(false)} noIconActionClass />
); -} +} \ No newline at end of file diff --git a/apps/client/src/widgets/containers/content_header.css b/apps/client/src/widgets/containers/content_header.css index 8a21bf7e7..768f8afda 100644 --- a/apps/client/src/widgets/containers/content_header.css +++ b/apps/client/src/widgets/containers/content_header.css @@ -1,15 +1 @@ -.content-header-widget { - position: relative; - z-index: 998; - background-color: var(--main-background-color); -} - -.note-split.bgfx .content-header-widget { - background-color: transparent; -} - -.content-header-widget.floating { - position: sticky; - top: 0; - background-color: var(--main-background-color, #fff) !important; -} +/** Intentionally left empty for now **/ diff --git a/apps/client/src/widgets/containers/content_header.ts b/apps/client/src/widgets/containers/content_header.ts index 18e864c67..ac001d40a 100644 --- a/apps/client/src/widgets/containers/content_header.ts +++ b/apps/client/src/widgets/containers/content_header.ts @@ -2,19 +2,15 @@ import { EventData } from "../../components/app_context"; import BasicWidget from "../basic_widget"; import Container from "./container"; import NoteContext from "../../components/note_context"; -import "./content_header.css"; export default class ContentHeader extends Container { - + noteContext?: NoteContext; thisElement?: HTMLElement; parentElement?: HTMLElement; resizeObserver: ResizeObserver; currentHeight: number = 0; currentSafeMargin: number = NaN; - previousScrollTop: number = 0; - isFloating: boolean = false; - scrollThreshold: number = 10; // pixels before triggering float constructor() { super(); @@ -39,44 +35,19 @@ export default class ContentHeader extends Container { this.thisElement = this.$widget.get(0)!; this.resizeObserver.observe(this.thisElement); - this.parentElement.addEventListener("scroll", this.updateScrollState.bind(this), { passive: true }); - } - - updateScrollState() { - const currentScrollTop = this.parentElement!.scrollTop; - const isScrollingUp = currentScrollTop < this.previousScrollTop; - const hasDropdownOpen = this.thisElement!.querySelector(".dropdown-menu.show") !== null; - const hasMovedEnough = Math.abs(currentScrollTop - this.previousScrollTop) > this.scrollThreshold; - - if (hasDropdownOpen) { - this.setFloating(true); - } else if (currentScrollTop === 0) { - this.setFloating(false); - } else if (hasMovedEnough) { - this.setFloating(isScrollingUp); - } - this.previousScrollTop = currentScrollTop; - this.updateSafeMargin(); - } - - setFloating(shouldFloat: boolean) { - if (shouldFloat !== this.isFloating) { - this.isFloating = shouldFloat; - - if (shouldFloat) { - this.$widget.addClass("floating"); - } else { - this.$widget.removeClass("floating"); - } - } + this.parentElement.addEventListener("scroll", this.updateSafeMargin.bind(this)); } updateSafeMargin() { - const parentEl = this.parentElement?.closest(".note-split"); - if (this.isFloating || this.parentElement!.scrollTop === 0) { - parentEl!.style.setProperty("--content-header-height", `${this.currentHeight}px`); - } else { - parentEl!.style.removeProperty("--content-header-height"); + const newSafeMargin = Math.max(this.currentHeight - this.parentElement!.scrollTop, 0); + + if (newSafeMargin !== this.currentSafeMargin) { + this.currentSafeMargin = newSafeMargin; + + this.triggerEvent("contentSafeMarginChanged", { + top: newSafeMargin, + noteContext: this.noteContext! + }); } } @@ -89,4 +60,4 @@ export default class ContentHeader extends Container { } } -} +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/InfoBar.css b/apps/client/src/widgets/react/InfoBar.css index 4a7a859db..cf9774e0b 100644 --- a/apps/client/src/widgets/react/InfoBar.css +++ b/apps/client/src/widgets/react/InfoBar.css @@ -17,6 +17,7 @@ .info-bar-subtle { color: var(--muted-text-color); background: var(--main-background-color); + border-bottom: 1px solid var(--main-border-color); margin-block: 0; padding-inline: 22px; -} +} \ No newline at end of file