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

chore(quick_edit): bring back coloring

Browse Source
This commit is contained in:
Elian Doran
2025-11-22 20:08:37 +02:00
parent 2f440eba37
commit 8001d940eb
3 changed files with 49 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,47 +1,71 @@
import { useContext, useEffect, useState } from "preact/hooks";
import { useContext, useEffect, useRef, useState } from "preact/hooks";
import Modal from "../react/Modal";
import "./PopupEditor.css";
import { useTriliumEvent } from "../react/hooks";
import { useNoteContext, useNoteLabel, useTriliumEvent } from "../react/hooks";
import NoteTitleWidget from "../note_title";
import NoteIcon from "../note_icon";
import NoteContext from "../../components/note_context";
import { NoteContextContext, ParentComponent } from "../react/react_utils";
import NoteDetail from "../NoteDetail";
const noteContext = new NoteContext("_popup-editor");
import { ComponentChildren } from "preact";
export default function PopupEditor() {
const [ shown, setShown ] = useState(false);
const parentComponent = useContext(ParentComponent);
const [ noteContext, setNoteContext ] = useState(new NoteContext("_popup-editor"));
useTriliumEvent("openInPopup", async ({ noteIdOrPath }) => {
const noteContext = new NoteContext("_popup-editor");
await noteContext.setNote(noteIdOrPath, {
viewScope: {
readOnlyTemporarilyDisabled: true
}
});
setNoteContext(noteContext);
setShown(true);
});
return (
<NoteContextContext.Provider value={noteContext}>
<Modal
title={<TitleRow />}
className="popup-editor-dialog"
size="lg"
show={shown}
onShown={() => {
parentComponent?.handleEvent("focusOnDetail", { ntxId: noteContext.ntxId });
}}
onHidden={() => setShown(false)}
>
<NoteDetail />
</Modal>
<DialogWrapper>
<Modal
title={<TitleRow />}
className="popup-editor-dialog"
size="lg"
show={shown}
onShown={() => {
parentComponent?.handleEvent("focusOnDetail", { ntxId: noteContext.ntxId });
}}
onHidden={() => setShown(false)}
>
<NoteDetail />
</Modal>
</DialogWrapper>
</NoteContextContext.Provider>
)
}
export function DialogWrapper({ children }: { children: ComponentChildren }) {
const { note, ntxId } = useNoteContext();
const wrapperRef = useRef<HTMLDivElement>(null);
const colorClass = note?.getColorClass();
const [ hasTint, setHasTint ] = useState(false);
// 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, colorClass ]);
return (
<div ref={wrapperRef} class={`quick-edit-dialog-wrapper ${note?.getColorClass()} ${hasTint ? "tinted-quick-edit-dialog" : ""}`}>
{children}
</div>
)
}
export function TitleRow() {
return (
<div className="title-row">