Add fill_container for mushroom (also 1.30.0)

Fixes #104
rianadon · Feb 19, 2024 · e85830d · e85830d
1 parent 41952ee
commit e85830d
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ I've been really enjoying Paul Bottein's beautiful [Mushroom card collection](ht
 
 </td></tr></table>
 
-The card is also well tested. There are [23 tests](https://github.com/rianadon/timer-bar-card/tree/main/test), and they've helped me catch a few bugs already. 🐞
+The card is also well tested. There are [24 tests](https://github.com/rianadon/timer-bar-card/tree/main/test), and they've helped me catch a few bugs already. 🐞
 
 **You may also be interested in these other related but unaffiliated cards:**
 - @Gluwc's [Bar Card](https://github.com/custom-cards/bar-card) for numerical quantities or percentages
@@ -753,6 +753,7 @@ You can also configure these Mushroom options:
 - You can also leave these unconfigured and alternatively display custom text by editing `name` (primary info) and `format` (secondary info). Combine with [templates](#use-templates-in-configuration) to mimic mushroom-template-card.
 - `icon_type` can be `icon` (default) or `none` (no icon).
 - `icon_color` sets both bar + icon color just like the `color` option. It's there to be consistent with the original Mushroom options.
+- `fill_container` makes the card expand to the surrounding grid.
 
 ## Manual installation
 

diff --git a/src/timer-bar-card.ts b/src/timer-bar-card.ts
@@ -5,7 +5,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { HomeAssistant, hasConfigOrEntityChanged } from 'custom-card-helpers';
 
 import { fillConfig, TimerBarEntityRow } from './timer-bar-entity-row';
-import { fillMushroomConfig, TimerBarMushroomRow } from './timer-bar-mushroom-row';
+import { fillMushroomConfig, TimerBarMushroomRow, mushroomStyle } from './timer-bar-mushroom-row';
 
 import type { TimerBarConfig, TimerBarEntityConfig, AttributeConfig, Mode } from './types';
 import { findMode, gatherEntitiesFromConfig, haveEntitiesChanged } from './helpers';
@@ -56,7 +56,8 @@ export class TimerBarCard extends LitElement {
 
     if (config.entity) {
       if ('mushroom' in config)
-        return html`<timer-bar-mushroom-row .config=${config} .mushroom=${config.mushroom??{}} .hass=${this.hass}></timer-bar-mushroom-row>`
+        return html`<timer-bar-mushroom-row .config=${config} .mushroom=${config.
+mushroom??{}} style=${mushroomStyle(config.mushroom??{})} .hass=${this.hass}></timer-bar-mushroom-row>`
       else
         return html`<timer-bar-entity-row .config=${config} .hass=${this.hass}></timer-bar-entity-row>`
     } else if (config.entities && !this._filteredEntities().length) {

diff --git a/src/timer-bar-mushroom-row.ts b/src/timer-bar-mushroom-row.ts
@@ -19,6 +19,12 @@ const computeStateName = (stateObj: any): string =>
 const computeDarkMode = (hass: HomeAssistant|undefined) =>
   hass && !!(hass.themes as any).darkMode
 
+/** Style for outer timer bar card */
+export function mushroomStyle(mushroom: Mushroom) {
+  if (mushroom.fill_container) return 'height: 100%'
+  return
+}
+
 export function fillMushroomConfig(config: TimerBarEntityConfig, mushroom: Mushroom): TimerBarConfig {
   let color = 'var(--rgb-state-entity)'
   if (mushroom.icon_color) color = computeRgbColor(mushroom.icon_color)
@@ -65,7 +71,7 @@ export class TimerBarMushroomRow extends TimerBarEntityRow {
                                        this.localize(state, false), state, this.hass);
 
     return html`
-      <ha-card>
+      <ha-card class=${appearance.fill_container ? "fill-container": ""}>
         <mushroom-card ?rtl=${rtl} .appearance=${appearance}>
           <mushroom-state-item
           .appearance=${appearance}

diff --git a/...image_snapshots__/mushroom-test-ts-mushroom-fill-container-1-fill_container.png b/...image_snapshots__/mushroom-test-ts-mushroom-fill-container-1-fill_container.png
diff --git a/test/__snapshots__/mushroom.test.ts.snap b/test/__snapshots__/mushroom.test.ts.snap
@@ -217,6 +217,92 @@ exports[`Mushroom customization: infos 1`] = `
 "
 `;
 
+exports[`Mushroom fill_container: fill_container 1`] = `
+"<hui-grid-card _cards="[object HTMLElement],[object HTMLElement]" editMode="false" square="">
+  <div id="root">
+    <timer-bar-card hass="[object Object]">
+      <timer-bar-mushroom-row config="[object Object]" hass="[object Object]" mushroom="[object Object]">
+        <ha-card raised="false">
+          <slot></slot>
+          <mushroom-card appearance="[object Object]">
+            <div class="container">
+              <slot></slot>
+            </div>
+            <mushroom-state-item appearance="[object Object]">
+              <div class="container">
+                <div class="icon">
+                  <slot name="icon"></slot>
+                  <slot name="badge"></slot>
+                </div>
+                <div class="info">
+                  <slot name="info"></slot>
+                </div>
+              </div>
+              <mushroom-shape-icon disabled="true" slot="icon">
+                <div class="disabled shape">
+                  <slot></slot>
+                </div>
+                <ha-state-icon>…</ha-state-icon>
+              </mushroom-shape-icon>
+              <div class="container" slot="info">
+                <span class="primary">
+                  test4
+                </span>
+                <span class="default secondary">
+                  <div class="pointer text-content value">
+                    idle
+                  </div>
+                </span>
+              </div>
+            </mushroom-state-item>
+          </mushroom-card>
+        </ha-card>
+      </timer-bar-mushroom-row>
+    </timer-bar-card>
+    <timer-bar-card hass="[object Object]">
+      <timer-bar-mushroom-row config="[object Object]" hass="[object Object]" mushroom="[object Object]">
+        <ha-card class="fill-container" raised="false">
+          <slot></slot>
+          <mushroom-card appearance="[object Object]">
+            <div class="container">
+              <slot></slot>
+            </div>
+            <mushroom-state-item appearance="[object Object]">
+              <div class="container">
+                <div class="icon">
+                  <slot name="icon"></slot>
+                  <slot name="badge"></slot>
+                </div>
+                <div class="info">
+                  <slot name="info"></slot>
+                </div>
+              </div>
+              <mushroom-shape-icon disabled="true" slot="icon">
+                <div class="disabled shape">
+                  <slot></slot>
+                </div>
+                <ha-state-icon>…</ha-state-icon>
+              </mushroom-shape-icon>
+              <div class="container" slot="info">
+                <span class="primary">
+                  test4
+                </span>
+                <span class="default secondary">
+                  <div class="pointer text-content value">
+                    idle
+                  </div>
+                </span>
+              </div>
+            </mushroom-state-item>
+          </mushroom-card>
+        </ha-card>
+      </timer-bar-mushroom-row>
+    </timer-bar-card>
+  </div>
+</hui-grid-card>
+"
+`;
+
 exports[`Vertical mushroom: idle 1`] = `
 "<timer-bar-card hass="[object Object]">
   <timer-bar-mushroom-row config="[object Object]" hass="[object Object]" mushroom="[object Object]">

diff --git a/test/mushroom.test.ts b/test/mushroom.test.ts
@@ -77,3 +77,26 @@ it("Mushroom customization", async () => {
   await hass.callService("timer", "finish", {}, { entity_id: "timer.test3" });
   await expect(card).toMatchDualSnapshot("infos");
 });
+
+it("Mushroom fill_container", async () => {
+  const dashboard = await hass.Dashboard([{
+    type: "grid",
+    columns: 2,
+    square: true,
+    cards: [{
+      type: "custom:timer-bar-card",
+      entity: "timer.test4",
+      mushroom: {
+        fill_container: false
+      }
+    },{
+      type: "custom:timer-bar-card",
+      entity: "timer.test4",
+      mushroom: {
+        fill_container: true
+      }
+    }],
+  }]);
+  const card = dashboard.cards[0];
+  await expect(card).toMatchDualSnapshot("fill_container");
+});