Improve popup card editor preview

.gitattributes

@@ -1,2 +1,3 @@
 custom_components/browser_mod/browser_mod.js binary
+custom_components/browser_mod/browser_mod_panel.js binary
 package-lock.json binary

custom_components/browser_mod/browser_mod.js

@@ -1239,7 +1239,9 @@ class BrowserModPopup extends s {
             `
             : ""}
         <style>
+          :host {
             ${this._style}
+          }
         </style>
       </ha-dialog>
     `;
@@ -1247,18 +1249,22 @@ class BrowserModPopup extends s {
     static get styles() {
         return r$2 `
       ha-dialog {
-        --mdc-dialog-min-width: 400px;
+        --mdc-dialog-min-width: var(--popup-min-width, 400px);
-        --mdc-dialog-max-width: 600px;
+        --mdc-dialog-max-width: var(--popup-max-width, 600px);
         --mdc-dialog-heading-ink-color: var(--primary-text-color);
         --mdc-dialog-content-ink-color: var(--primary-text-color);
         --justify-action-buttons: space-between;
 
-        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 2px)
+        --mdc-dialog-box-shadow: 0px 0px 0px
-          var(--ha-card-border-color, var(--divider-color, #e0e0e0));
+          var(--popup-border-width, var(--ha-card-border-width, 2px))
-        --ha-dialog-border-radius: 8px;
+          var(
+            --popup-border-color,
+            var(--ha-card-border-color, var(--divider-color, #e0e0e0))
+          );
+        --ha-dialog-border-radius: var(--popup-border-radius, 8px);
         --mdc-theme-surface: var(
-          --ha-card-background,
+          --popup-background-color,
-          var(--card-background-color, white)
+          var(--ha-card-background, var(--card-background-color, white))
         );
       }
       :host([wide]) ha-dialog {
@@ -1286,7 +1292,10 @@ class BrowserModPopup extends s {
       app-toolbar {
         flex-shrink: 0;
         color: var(--primary-text-color);
-        background-color: var(--sidebar-background-color);
+        background-color: var(
+          --popup-header-background-color,
+          var(--popup-background-color, --sidebar-background-color)
+        );
       }
       ha-icon-button > * {
         display: flex;
@@ -1315,7 +1324,7 @@ class BrowserModPopup extends s {
         --padding-y: 0px;
       }
       :host([actions]) .content {
-        border-bottom: 1px solid var(--divider-color);
+        border-bottom: 1px solid var(--popup-border-color, var(--divider-color));
         --footer-height: 54px;
       }
       :host([wide]) .content {
@@ -1374,7 +1383,8 @@ __decorate([
 __decorate([
     e$2()
 ], BrowserModPopup.prototype, "_style", void 0);
-customElements.define("browser-mod-popup", BrowserModPopup);
+if (!customElements.get("browser-mod-popup"))
+    customElements.define("browser-mod-popup", BrowserModPopup);
 const PopupMixin = (SuperClass) => {
     return class PopupMixinClass extends SuperClass {
         constructor() {
@@ -1555,6 +1565,11 @@ const configSchema = [
             },
         ],
     },
+    {
+        name: "style",
+        label: "CSS style",
+        selector: { text: { multiline: true } },
+    },
 ];
 class PopupCardEditor extends s {
     constructor() {
@@ -1800,11 +1815,48 @@ class PopupCard extends s {
         if (!this.editMode)
             return $ ``;
         return $ ` <ha-card>
-      <div>
+      <div class="app-toolbar">
-        <h2>${this._config.title}</h2>
+        ${this._config.dismissable
+            ? $ `
+              <ha-icon-button>
+                <ha-icon .icon=${"mdi:close"}></ha-icon>
+              </ha-icon-button>
+            `
+            : ""}
+        <div class="main-title">${this._config.title}</div>
       </div>
-      ${this._element}</ha-card
+      ${this._element}
-    >`;
+      <style>
+        :host {
+        ${this._config.style}
+        }
+      </style>
+      ${this._config.right_button !== undefined ||
+            this._config.left_button !== undefined
+            ? $ `
+            <footer class="mdc-dialog__actions">
+              <span>
+                ${this._config.left_button !== undefined
+                ? $ `
+                      <mwc-button
+                        .label=${this._config.left_button}
+                      ></mwc-button>
+                    `
+                : ""}
+              </span>
+              <span>
+                ${this._config.right_button !== undefined
+                ? $ `
+                      <mwc-button
+                        .label=${this._config.right_button}
+                      ></mwc-button>
+                    `
+                : ""}
+              </span>
+            </footer>
+          `
+            : ""}
+    </ha-card>`;
     }
     static get styles() {
         return r$2 `
@@ -1815,10 +1867,44 @@ class PopupCard extends s {
         display: block !important;
         border: 1px solid var(--primary-color);
       }
-      h2 {
+      ha-card {
-        padding-left: 16px;
+        background-color: var(
-        padding-top: 16px;
+          --popup-background-color,
-        margin: 0;
+          var(--ha-card-background, var(--card-background-color, white))
+        );
+      }
+      .app-toolbar {
+        color: var(--primary-text-color);
+        background-color: var(
+          --popup-header-background-color,
+          var(--popup-background-color, --sidebar-background-color)
+        );
+        display: var(--layout-horizontal_-_display);
+        flex-direction: var(--layout-horizontal_-_flex-direction);
+        align-items: var(--layout-center_-_align-items);
+        height: 64px;
+        padding: 0 16px;
+        font-size: var(--app-toolbar-font-size, 20px);
+      }
+      ha-icon-button > * {
+        display: flex;
+      }
+      .main-title {
+        margin-left: 16px;
+        line-height: 1.3em;
+        max-height: 2.6em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .mdc-dialog__actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 52px;
+        margin: 0px;
+        padding: 8px;
+        border-top: 1px solid transparent;
       }
     `;
     }

custom_components/browser_mod/services.yaml

@@ -116,7 +116,8 @@ popup:
       name: Styles
       description: CSS code to apply to the popup window
       selector:
-        object:
+        text:
+          multiline: true
 
 more_info:
   description: "Show more-info dialog"

js/plugin/popup-card-editor.ts

@@ -79,6 +79,11 @@ const configSchema = [
       },
     ],
   },
+  {
+    name: "style",
+    label: "CSS style",
+    selector: { text: { multiline: true } },
+  },
 ];
 
 class PopupCardEditor extends LitElement {

js/plugin/popup-card.ts

@@ -90,11 +90,48 @@ class PopupCard extends LitElement {
   render() {
     if (!this.editMode) return html``;
     return html` <ha-card>
-      <div>
+      <div class="app-toolbar">
-        <h2>${this._config.title}</h2>
+        ${this._config.dismissable
+          ? html`
+              <ha-icon-button>
+                <ha-icon .icon=${"mdi:close"}></ha-icon>
+              </ha-icon-button>
+            `
+          : ""}
+        <div class="main-title">${this._config.title}</div>
       </div>
-      ${this._element}</ha-card
+      ${this._element}
-    >`;
+      <style>
+        :host {
+        ${this._config.style}
+        }
+      </style>
+      ${this._config.right_button !== undefined ||
+      this._config.left_button !== undefined
+        ? html`
+            <footer class="mdc-dialog__actions">
+              <span>
+                ${this._config.left_button !== undefined
+                  ? html`
+                      <mwc-button
+                        .label=${this._config.left_button}
+                      ></mwc-button>
+                    `
+                  : ""}
+              </span>
+              <span>
+                ${this._config.right_button !== undefined
+                  ? html`
+                      <mwc-button
+                        .label=${this._config.right_button}
+                      ></mwc-button>
+                    `
+                  : ""}
+              </span>
+            </footer>
+          `
+        : ""}
+    </ha-card>`;
   }
 
   static get styles() {
@@ -106,10 +143,44 @@ class PopupCard extends LitElement {
         display: block !important;
         border: 1px solid var(--primary-color);
       }
-      h2 {
+      ha-card {
-        padding-left: 16px;
+        background-color: var(
-        padding-top: 16px;
+          --popup-background-color,
-        margin: 0;
+          var(--ha-card-background, var(--card-background-color, white))
+        );
+      }
+      .app-toolbar {
+        color: var(--primary-text-color);
+        background-color: var(
+          --popup-header-background-color,
+          var(--popup-background-color, --sidebar-background-color)
+        );
+        display: var(--layout-horizontal_-_display);
+        flex-direction: var(--layout-horizontal_-_flex-direction);
+        align-items: var(--layout-center_-_align-items);
+        height: 64px;
+        padding: 0 16px;
+        font-size: var(--app-toolbar-font-size, 20px);
+      }
+      ha-icon-button > * {
+        display: flex;
+      }
+      .main-title {
+        margin-left: 16px;
+        line-height: 1.3em;
+        max-height: 2.6em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .mdc-dialog__actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 52px;
+        margin: 0px;
+        padding: 8px;
+        border-top: 1px solid transparent;
       }
     `;
   }

js/plugin/popups.ts

@@ -157,7 +157,9 @@ class BrowserModPopup extends LitElement {
             `
           : ""}
         <style>
+          :host {
             ${this._style}
+          }
         </style>
       </ha-dialog>
     `;
@@ -166,18 +168,22 @@ class BrowserModPopup extends LitElement {
   static get styles() {
     return css`
       ha-dialog {
-        --mdc-dialog-min-width: 400px;
+        --mdc-dialog-min-width: var(--popup-min-width, 400px);
-        --mdc-dialog-max-width: 600px;
+        --mdc-dialog-max-width: var(--popup-max-width, 600px);
         --mdc-dialog-heading-ink-color: var(--primary-text-color);
         --mdc-dialog-content-ink-color: var(--primary-text-color);
         --justify-action-buttons: space-between;
 
-        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 2px)
+        --mdc-dialog-box-shadow: 0px 0px 0px
-          var(--ha-card-border-color, var(--divider-color, #e0e0e0));
+          var(--popup-border-width, var(--ha-card-border-width, 2px))
-        --ha-dialog-border-radius: 8px;
+          var(
+            --popup-border-color,
+            var(--ha-card-border-color, var(--divider-color, #e0e0e0))
+          );
+        --ha-dialog-border-radius: var(--popup-border-radius, 8px);
         --mdc-theme-surface: var(
-          --ha-card-background,
+          --popup-background-color,
-          var(--card-background-color, white)
+          var(--ha-card-background, var(--card-background-color, white))
         );
       }
       :host([wide]) ha-dialog {
@@ -205,7 +211,10 @@ class BrowserModPopup extends LitElement {
       app-toolbar {
         flex-shrink: 0;
         color: var(--primary-text-color);
-        background-color: var(--sidebar-background-color);
+        background-color: var(
+          --popup-header-background-color,
+          var(--popup-background-color, --sidebar-background-color)
+        );
       }
       ha-icon-button > * {
         display: flex;
@@ -234,7 +243,7 @@ class BrowserModPopup extends LitElement {
         --padding-y: 0px;
       }
       :host([actions]) .content {
-        border-bottom: 1px solid var(--divider-color);
+        border-bottom: 1px solid var(--popup-border-color, var(--divider-color));
         --footer-height: 54px;
       }
       :host([wide]) .content {
@@ -261,7 +270,8 @@ class BrowserModPopup extends LitElement {
   }
 }
 
-customElements.define("browser-mod-popup", BrowserModPopup);
+if (!customElements.get("browser-mod-popup"))
+  customElements.define("browser-mod-popup", BrowserModPopup);
 
 export const PopupMixin = (SuperClass) => {
   return class PopupMixinClass extends SuperClass {