client/quick edit dialog: make available the CSS variables with the custom color of the edited note

This commit is contained in:
Adorian Doran 2025-10-23 10:16:18 +03:00
parent be15934b22
commit a01fb39599

View File

@ -57,6 +57,7 @@ const TPL = /*html*/`\
} }
</style> </style>
<div class="quick-edit-dialog-wrapper">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -71,6 +72,7 @@ const TPL = /*html*/`\
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
`; `;
@ -79,6 +81,7 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
private noteContext: NoteContext; private noteContext: NoteContext;
private $modalHeader!: JQuery<HTMLElement>; private $modalHeader!: JQuery<HTMLElement>;
private $modalBody!: JQuery<HTMLElement>; private $modalBody!: JQuery<HTMLElement>;
private $wrapper!: JQuery<HTMLDivElement>;
constructor() { constructor() {
super(); super();
@ -93,6 +96,7 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
const $newWidget = $(TPL); const $newWidget = $(TPL);
this.$modalHeader = $newWidget.find(".modal-title"); this.$modalHeader = $newWidget.find(".modal-title");
this.$modalBody = $newWidget.find(".modal-body"); this.$modalBody = $newWidget.find(".modal-body");
this.$wrapper = $newWidget.find(".quick-edit-dialog-wrapper");
const children = this.$widget.children(); const children = this.$widget.children();
this.$modalHeader.append(children[0]); this.$modalHeader.append(children[0]);
@ -112,6 +116,15 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
} }
}); });
const colorClass = this.noteContext.note?.getColorClass();
const wrapperElement = this.$wrapper.get(0)!;
if (colorClass) {
wrapperElement.className = "quick-edit-dialog-wrapper tinted-dialog " + colorClass;
} else {
wrapperElement.className = "quick-edit-dialog-wrapper";
}
const activeEl = document.activeElement; const activeEl = document.activeElement;
if (activeEl && "blur" in activeEl) { if (activeEl && "blur" in activeEl) {
(activeEl as HTMLElement).blur(); (activeEl as HTMLElement).blur();