diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js
index e65a2c65..ebf4edd2 100644
--- a/js/comfyui-manager.js
+++ b/js/comfyui-manager.js
@@ -1249,31 +1249,124 @@ class ManagerMenuDialog extends ComfyDialog {
constructor() {
super();
- const close_button = $el("button", { id: "cm-close-button", type: "button", textContent: "Close", onclick: () => this.close() });
+ const dialog_mask = $el("div.p-dialog-mask.p-overlay-mask.p-overlay-mask-enter", {
+ parent: document.body,
+ style: {
+ position: "fixed",
+ height: "100%",
+ width: "100%",
+ left: "0px",
+ top: "0px",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ pointerEvents: "auto",
+ zIndex: "3203"
+ },
+ // [FIXME] Make clicking the mask close the dialog
+ // data-pc-section="mask"
+ });
- const content =
- $el("div.comfy-modal-content",
+ const header_actions = $el("div.p-dialog-header-actions", {
+ // [FIXME]
+ // data-pc-section="headeractions"
+ }
+ );
+
+ const close_button = $el("button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-dialog-close-button", {
+ parent: header_actions,
+ type: "button",
+ ariaLabel: "Close",
+ onclick: () => this.close(),
+ // "data-pc-name": "pcclosebutton",
+ // "data-p-disabled": "false",
+ // "data-p-severity": "secondary",
+ // "data-pc-group-section": "headericon",
+ // "data-pc-extend": "button",
+ // "data-pc-section": "root",
+ // [FIXME] Not sure how to do most of the SVG using $el
+ innerHTML: ' '
+ }
+ );
+
+ const dialog_header = $el("div.p-dialog-header", {
+ // [FIXME]
+ // data-pc-section:"header"
+ },
+ [
+ $el("div", [
+ $el("div",
+ {
+ id: "cm-manager",
+ // [FIXME]
+ // data-v-#########:""
+ },
+ [
+ $el("h2.px-4", [
+ // [TODO] Find better icon
+ $el("i.mdi.mdi-puzzle", {
+ style: {
+ "font-size": "1.25rem",
+ "margin-right": ".5rem"
+ }
+ }),
+ $el("span", { textContent: `ComfyUI Manager ${manager_version}` })
+ ])
+ ]
+ )
+ ]),
+ header_actions
+ ]
+ );
+
+ const content = $el("div.p-dialog-content",
+ [
+ $el("div.cm-menu-container",
[
- $el("tr.cm-title", {}, [
- $el("font", {size:6, color:"white"}, [`ComfyUI Manager ${manager_version}`])]
- ),
- $el("br", {}, []),
- $el("div.cm-menu-container",
- [
- $el("div.cm-menu-column", [...this.createControlsLeft()]),
- $el("div.cm-menu-column", [...this.createControlsMid()]),
- $el("div.cm-menu-column", [...this.createControlsRight()])
- ]),
+ $el("div.cm-menu-column", [...this.createControlsLeft()]),
+ $el("div.cm-menu-column", [...this.createControlsMid()]),
+ $el("div.cm-menu-column", [...this.createControlsRight()])
+ ]),
- $el("br", {}, []),
- close_button,
- ]
- );
+ $el("br", {}, []),
+ ]
+ );
content.style.width = '100%';
content.style.height = '100%';
- this.element = $el("div.comfy-modal", { id:'cm-manager-dialog', parent: document.body }, [ content ]);
+ const manager_dialog = $el("div.p-dialog.p-component.global-dialog", {
+ id:'cm-manager-dialog',
+ parent: dialog_mask,
+ style: {
+ 'display': 'flex',
+ 'flex-direction': 'column',
+ 'pointer-events': 'auto',
+ 'margin': '0px',
+ },
+ role: 'dialog',
+ ariaModal: 'true',
+ // [FIXME]
+ // ariaLabbelledby: 'cm-title',
+ // maximized: 'false',
+ // data-pc-name: 'dialog',
+ // data-pc-section: 'root',
+ // data-pd-focustrap: 'true'
+ },
+ [ dialog_header, content ]
+ );
+
+ const hidden_accessible = $el("span.p-hidden-accessible.p-hidden-focusable", {
+ parent: manager_dialog,
+ tabindex: "0",
+ role: "presentation",
+ ariaHidden: "true",
+ "data-p-hidden-accessible": "true",
+ "data-p-hidden-focusable": "true",
+ "data-pc-section": "firstfocusableelement"
+ });
+
+ this.element = dialog_mask;
}
get isVisible() {
@@ -1281,7 +1374,7 @@ class ManagerMenuDialog extends ComfyDialog {
}
show() {
- this.element.style.display = "block";
+ this.element.style.display = "flex";
}
toggleVisibility() {