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

feat(quick_edit): basic reactivity to color changes

Browse Source
This commit is contained in:
Elian Doran 2025-11-29 17:00:43 +02:00
parent 7d8af0f252
commit 81a9e06b23
No known key found for this signature in database
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/dialogs/PopupEditor.tsx
View File

@ -1,7 +1,7 @@
import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
import Modal from "../react/Modal"; import Modal from "../react/Modal";
import "./PopupEditor.css"; import "./PopupEditor.css";
import { useNoteContext, useTriliumEvent } from "../react/hooks"; import { useNoteContext, useNoteLabel, useTriliumEvent } from "../react/hooks";
import NoteTitleWidget from "../note_title"; import NoteTitleWidget from "../note_title";
import NoteIcon from "../note_icon"; import NoteIcon from "../note_icon";
import NoteContext from "../../components/note_context"; import NoteContext from "../../components/note_context";
@ -90,13 +90,14 @@ export function DialogWrapper({ children }: { children: ComponentChildren }) {
const { note } = useNoteContext(); const { note } = useNoteContext();
const wrapperRef = useRef<HTMLDivElement>(null); const wrapperRef = useRef<HTMLDivElement>(null);
const [ hasTint, setHasTint ] = useState(false); const [ hasTint, setHasTint ] = useState(false);
const [ color ] = useNoteLabel(note, "color");
// Apply the tinted-dialog class only if the custom color CSS class specifies a hue // Apply the tinted-dialog class only if the custom color CSS class specifies a hue
useEffect(() => { useEffect(() => {
if (!wrapperRef.current) return; if (!wrapperRef.current) return;
const customHue = getComputedStyle(wrapperRef.current).getPropertyValue("--custom-color-hue"); const customHue = getComputedStyle(wrapperRef.current).getPropertyValue("--custom-color-hue");
setHasTint(!!customHue); setHasTint(!!customHue);
}, [ note ]); }, [ note, color ]);
return ( return (
<div ref={wrapperRef} class={`quick-edit-dialog-wrapper ${note?.getColorClass() ?? ""} ${hasTint ? "tinted-quick-edit-dialog" : ""}`}> <div ref={wrapperRef} class={`quick-edit-dialog-wrapper ${note?.getColorClass() ?? ""} ${hasTint ? "tinted-quick-edit-dialog" : ""}`}>