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

fix(type_widgets): code background leaking when switching types

Browse Source
This commit is contained in:
Elian Doran 2025-11-09 13:37:31 +02:00
parent c772430dd0
commit b36ef54507
No known key found for this signature in database
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/widgets/containers/scrolling_container.css Normal file
View File

@ -0,0 +1,9 @@
.scrolling-container {
overflow: auto;
scroll-behavior: smooth;
position: relative;
}
.note-split.type-code > .scrolling-container {
background-color: var(--code-background-color);
}

4
apps/client/src/widgets/containers/scrolling_container.ts
View File

@ -2,6 +2,7 @@ import type { CommandListenerData, EventData, EventNames } from "../../component
import type NoteContext from "../../components/note_context.js"; import type NoteContext from "../../components/note_context.js";
import type BasicWidget from "../basic_widget.js"; import type BasicWidget from "../basic_widget.js";
import Container from "./container.js"; import Container from "./container.js";
import "./scrolling_container.css";
export default class ScrollingContainer extends Container<BasicWidget> { export default class ScrollingContainer extends Container<BasicWidget> {
@ -11,9 +12,6 @@ export default class ScrollingContainer extends Container<BasicWidget> {
super(); super();
this.class("scrolling-container"); this.class("scrolling-container");
this.css("overflow", "auto");
this.css("scroll-behavior", "smooth");
this.css("position", "relative");
} }
setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) { setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {

5
apps/client/src/widgets/type_widgets/code/Code.tsx
View File

@ -144,10 +144,7 @@ export function CodeEditor({ parentComponent, ntxId, containerRef: externalConta
const [ backgroundColor, setBackgroundColor ] = useState<string>(); const [ backgroundColor, setBackgroundColor ] = useState<string>();
useEffect(() => { useEffect(() => {
if (!backgroundColor || noBackgroundChange) return; if (!backgroundColor || noBackgroundChange) return;
parentComponent?.$widget.closest(".scrolling-container").css("background-color", backgroundColor); parentComponent?.$widget.closest(".scrolling-container").css("--code-background-color", backgroundColor);
return () => {
parentComponent?.$widget.closest(".scrolling-container").css("background-color", "unset");
};
}, [ backgroundColor ]); }, [ backgroundColor ]);
// React to theme changes. // React to theme changes.