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

feat(react/widgets): port scroll padding

Browse Source
This commit is contained in:
Elian Doran 2025-08-28 22:12:39 +03:00
parent 4fd02db079
commit fa66e50193
No known key found for this signature in database
3 changed files with 44 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/layouts/desktop_layout.tsx
View File

@ -32,7 +32,7 @@ import LauncherContainer from "../widgets/containers/launcher_container.js";
import ApiLogWidget from "../widgets/api_log.js";
import MovePaneButton from "../widgets/buttons/move_pane_button.js";
import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
import ScrollPaddingWidget from "../widgets/scroll_padding.js";
import ScrollPadding from "../widgets/scroll_padding.js";
import options from "../services/options.js";
import utils from "../services/utils.js";
import CloseZenButton from "../widgets/close_zen_button.js";
@ -141,7 +141,7 @@ export default class DesktopLayout {
.child(new NoteListWidget(false))
.child(new SearchResultWidget())
.child(new SqlResultWidget())
.child(new ScrollPaddingWidget())
.child(<ScrollPadding />)
)
.child(new ApiLogWidget())
.child(new FindWidget())

33
apps/client/src/widgets/scroll_padding.ts
View File

@ -1,33 +0,0 @@
import NoteContextAwareWidget from "./note_context_aware_widget.js";
const TPL = /*html*/`<div class="scroll-padding-widget"></div>`;
export default class ScrollPaddingWidget extends NoteContextAwareWidget {
private $scrollingContainer!: JQuery<HTMLElement>;
isEnabled() {
return super.isEnabled() && ["text", "code"].includes(this.note?.type ?? "");
}
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$widget.on("click", () => this.triggerCommand("scrollToEnd", { ntxId: this.ntxId }));
}
initialRenderCompleteEvent() {
this.$scrollingContainer = this.$widget.closest(".scrolling-container");
new ResizeObserver(() => this.refreshHeight()).observe(this.$scrollingContainer[0]);
this.refreshHeight();
}
refreshHeight() {
const containerHeight = this.$scrollingContainer.height();
this.$widget.css("height", Math.round((containerHeight ?? 0) / 2));
}
}

42
apps/client/src/widgets/scroll_padding.tsx Normal file
View File

@ -0,0 +1,42 @@
import { useEffect, useRef, useState } from "preact/hooks";
import { useNoteContext } from "./react/hooks";
export default function ScrollPadding() {
const { note, parentComponent, ntxId } = useNoteContext();
const ref = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState<number>(10);
const isEnabled = ["text", "code"].includes(note?.type ?? "");
const refreshHeight = () => {
if (!ref.current) return;
const container = ref.current.closest(".scrolling-container") as HTMLElement | null;
if (!container) return;
setHeight(Math.round(container.offsetHeight / 2));
};
useEffect(() => {
if (!isEnabled) return;
const container = ref.current?.closest(".scrolling-container") as HTMLElement | null;
if (!container) return;
// Observe container resize
const observer = new ResizeObserver(() => refreshHeight());
observer.observe(container);
// Initial resize
refreshHeight();
return () => observer.disconnect();
}, [note]); // re-run when note changes
return (isEnabled ?
<div
ref={ref}
className="scroll-padding-widget"
style={{ height }}
onClick={() => parentComponent.triggerCommand("scrollToEnd", { ntxId })}
/>
: <div></div>
)
}