Add styling to popups

custom_components/browser_mod/browser_mod.js

@@ -1131,7 +1131,7 @@ class BrowserModPopup extends s {
             }, 10);
         }
     }
-    async setupDialog(title, content, { right_button = undefined, right_button_action = undefined, left_button = undefined, left_button_action = undefined, dismissable = true, dismiss_action = undefined, timeout = undefined, timeout_action = undefined, size = undefined, } = {}) {
+    async setupDialog(title, content, { right_button = undefined, right_button_action = undefined, left_button = undefined, left_button_action = undefined, dismissable = true, dismiss_action = undefined, timeout = undefined, timeout_action = undefined, size = undefined, style = undefined, } = {}) {
         this.title = title;
         if (content && typeof content === "object") {
             // Create a card from config in content
@@ -1160,6 +1160,7 @@ class BrowserModPopup extends s {
         };
         this.wide = size === "wide" ? "" : undefined;
         this.fullscreen = size === "fullscreen" ? "" : undefined;
+        this._style = style;
     }
     _primary() {
         var _a, _b, _c;
@@ -1237,6 +1238,9 @@ class BrowserModPopup extends s {
               ></mwc-button>
             `
             : ""}
+        <style>
+          ${this._style}
+        </style>
       </ha-dialog>
     `;
     }
@@ -1367,6 +1371,9 @@ __decorate([
 __decorate([
     e$2({ reflect: true })
 ], BrowserModPopup.prototype, "fullscreen", void 0);
+__decorate([
+    e$2()
+], BrowserModPopup.prototype, "_style", void 0);
 customElements.define("browser-mod-popup", BrowserModPopup);
 const PopupMixin = (SuperClass) => {
     return class PopupMixinClass extends SuperClass {
@@ -1408,8 +1415,7 @@ const PopupMixin = (SuperClass) => {
             //   },
             //   ""
             // );
-            this._popupEl.setupDialog(...args);
-            this._popupEl.openDialog();
+            this._popupEl.setupDialog(...args).then(() => this._popupEl.openDialog());
         }
         closePopup(...args) {
             this._popupEl.closeDialog();
@@ -1989,7 +1995,7 @@ const BrowserIDMixin = (SuperClass) => {
     x Device -> Browser
   - Popups
     X Basic popups
-    - Card-mod integration
+    x Styling
     X Timeout
     X Fullscreen
     x Popup-card

custom_components/browser_mod/services.yaml

@@ -112,6 +112,11 @@ popup:
       description: Action to perform when popup is closed by timeout
       selector:
         object:
+    style:
+      name: Styles
+      description: CSS code to apply to the popup window
+      selector:
+        object:
 
 more_info:
   description: "Show more-info dialog"

js/plugin/main.ts

@@ -24,7 +24,7 @@ import { BrowserIDMixin } from "./browserID";
     x Device -> Browser
   - Popups
     X Basic popups
-    - Card-mod integration
+    x Styling
     X Timeout
     X Fullscreen
     x Popup-card

js/plugin/popups.ts

@@ -18,6 +18,7 @@ class BrowserModPopup extends LitElement {
   timeout;
   _timeoutStart;
   _timeoutTimer;
+  @property() _style;
 
   closeDialog() {
     this.open = false;
@@ -50,6 +51,7 @@ class BrowserModPopup extends LitElement {
       timeout = undefined,
       timeout_action = undefined,
       size = undefined,
+      style = undefined,
     } = {}
   ) {
     this.title = title;
@@ -81,6 +83,7 @@ class BrowserModPopup extends LitElement {
     };
     this.wide = size === "wide" ? "" : undefined;
     this.fullscreen = size === "fullscreen" ? "" : undefined;
+    this._style = style;
   }
 
   _primary() {
@@ -153,6 +156,9 @@ class BrowserModPopup extends LitElement {
               ></mwc-button>
             `
           : ""}
+        <style>
+          ${this._style}
+        </style>
       </ha-dialog>
     `;
   }
@@ -303,8 +309,7 @@ export const PopupMixin = (SuperClass) => {
       //   },
       //   ""
       // );
-      this._popupEl.setupDialog(...args);
-      this._popupEl.openDialog();
+      this._popupEl.setupDialog(...args).then(() => this._popupEl.openDialog());
     }
 
     closePopup(...args) {