Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-21 23:59:59 +01:00
Code Issues Packages Projects Releases Activity

feat(quick_edit): seamless transition between color changes

Browse Source
This commit is contained in:
Elian Doran
2025-11-29 17:19:37 +02:00
parent 81a9e06b23
commit 453349be26
4 changed files with 5 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -89,18 +89,10 @@ export default function PopupEditor() {
export function DialogWrapper({ children }: { children: ComponentChildren }) {
const { note } = useNoteContext();
const wrapperRef = useRef<HTMLDivElement>(null);
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
useEffect(() => {
if (!wrapperRef.current) return;
const customHue = getComputedStyle(wrapperRef.current).getPropertyValue("--custom-color-hue");
setHasTint(!!customHue);
}, [ note, color ]);
useNoteLabel(note, "color"); // to update color class
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() ?? ""}`}>
{children}
</div>
)