More styling options

thomasloven · Sep 5, 2022 · e7d5a55 · e7d5a55
1 parent ee31415
commit e7d5a55
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 18 deletions.
diff --git a/documentation/popups.md b/documentation/popups.md
@@ -158,4 +158,41 @@ data:
               value: 12
 ```
 
-![Screenshot of a popup allowing the user to choose which rooms to vacuum](https://user-images.githubusercontent.com/1299821/182713714-ef4149b1-217a-4d41-9737-714f5320c25c.png)
+![Screenshot of a popup allowing the user to choose which rooms to vacuum](https://user-images.githubusercontent.com/1299821/182713714-ef4149b1-217a-4d41-9737-714f5320c25c.png)
+
+
+## Styling popups
+
+The default value for the `style` parameter is as follows:
+
+```yaml
+style: |
+  --popup-min-width: 400px;
+  --popup-max-width: 600px;
+  --popup-border-width: var(--ha-card-border-width, 2px);
+  --popup-border-color: var(--ha-card-border-color, var(--divider-color, #eee));
+  --popup-border-radius: 28px;
+  --popup-background-color: var(--ha-card-background, var(--card-background-color, white));
+  --popup-padding-x: 0px;
+  --popup-padding-y: 0px;
+```
+
+The same variables can also be set by a theme.
+
+Those variables should be enough for mostly everything, really. Try it.
+
+Otherwise, [card-mod](https://github.com/thomasloven/lovelace-card-mod) can also be used to style popups by adding a `card_mod:` parameter to the service call:
+
+```yaml
+service: browser_mod.popup
+data:
+  title: Teal background
+  content: Where did the dashboard go?
+  card_mod:
+    style:
+      ha-dialog$: |
+        div.mdc-dialog div.mdc-dialog__scrim {
+          background: rgba(0, 128, 128, 0.9);
+        }
+```
+Or through `card-mod-more-info` or `card-mod-more-info-yaml` in a card-mod theme.
diff --git a/documentation/services.md b/documentation/services.md
@@ -186,22 +186,6 @@ data:
 | `timeout_action` | An action to perform if the dialog is closed by timeout. |
 | `style` | CSS styles to apply to the dialog. |
 
-The default value for `style` is as follows:
-
-```yaml
-style: |
-  --popup-min-width: 400px;
-  --popup-max-width: 600px;
-  --popup-border-width: var(--ha-card-border-width, 2px);
-  --popup-border-color: var(--ha-card-border-color, var(--divider-color, #eee));
-  --popup-border-radius: 28px;
-  --popup-background-color: var(--ha-card-background, var(--card-background-color, white));
-  --popup-padding-x: 0px;
-  --popup-padding-y: 0px;
-```
-
-The same variables can also be set by a theme.
-
 Note that any Browser Mod services performed as `_action`s here will be performed only on the same Browser as initiated the action unless `browser_id` is given.
 
 If a ha-form schema is used for `content` the resulting data will be inserted into the `data` for any `_action`.

diff --git a/js/plugin/popups.ts b/js/plugin/popups.ts
@@ -25,6 +25,7 @@ class BrowserModPopup extends LitElement {
   _timeoutTimer;
   _resolveClosed;
   _formdata;
+  card_mod;
 
   async closeDialog() {
     this.open = false;
@@ -68,7 +69,8 @@ class BrowserModPopup extends LitElement {
     customElements.whenDefined("card-mod").then(() => {
       (customElements.get("card-mod") as any)?.applyToElement?.(
         this,
-        "more-info"
+        "more-info",
+        this.card_mod?.style ?? ""
       );
     });
   }
@@ -104,11 +106,13 @@ class BrowserModPopup extends LitElement {
       size = undefined,
       style = undefined,
       autoclose = false,
+      card_mod = undefined,
     } = {}
   ) {
     this._formdata = undefined;
     this.title = title;
     this.card = undefined;
+    this.card_mod = card_mod;
     if (content && content instanceof HTMLElement) {
       this.content = content;
     } else if (content && Array.isArray(content)) {