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): 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
No known key found for this signature in database
4 changed files with 5 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/services/css_class_manager.ts
View File

@ -38,7 +38,7 @@ function createClassForColor(colorString: string | null) {
registeredClasses.add(className);
}
return className;
return `color ${className}`;
}
function parseColor(color: string) {

2
apps/client/src/stylesheets/theme-next-dark.css
View File

@ -300,7 +300,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
border-color: var(--muted-text-color) !important;
}
.tinted-quick-edit-dialog {
.quick-edit-dialog-wrapper.color {
--modal-background-color: hsl(var(--custom-color-hue), 8.8%, 11.2%);
--modal-border-color: hsl(var(--custom-color-hue), 9.4%, 25.1%);
--promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);

2
apps/client/src/stylesheets/theme-next-light.css
View File

@ -276,7 +276,7 @@
--custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
}
.tinted-quick-edit-dialog {
.quick-edit-dialog-wrapper.color {
--modal-background-color: hsl(var(--custom-color-hue), 56%, 96%);
--modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
--promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);

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>
)