Add compatibility with Home Assistant 2024.8 (#1471)

* Use 56px height for all cards * Simplify theme variable * Add dev command
piitaya · Jul 18, 2024 · db0cfe1 · db0cfe1
1 parent 5257c75
commit db0cfe1
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 94 deletions.
diff --git a/hacs.json b/hacs.json
@@ -1,6 +1,6 @@
 {
     "name": "Mushroom",
     "filename": "mushroom.js",
-    "homeassistant": "2024.3.0",
+    "homeassistant": "2024.8",
     "render_readme": true
 }
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
     "build": "rollup -c --bundleConfigAsCjs",
     "format": "prettier --write .",
     "start:hass": "docker run --rm -p8123:8123 -v ${PWD}/.hass_dev:/config homeassistant/home-assistant:beta",
-    "start:hass-cmd": "docker run --rm -p8123:8123 -v  %cd%/.hass_dev:/config homeassistant/home-assistant:beta"
+    "start:hass-cmd": "docker run --rm -p8123:8123 -v  %cd%/.hass_dev:/config homeassistant/home-assistant:beta",
+    "start:hass-dev": "docker run --rm -p8123:8123 -v ${PWD}/.hass_dev:/config homeassistant/home-assistant:dev",
+    "start:hass-dev-cmd": "docker run --rm -p8123:8123 -v  %cd%/.hass_dev:/config homeassistant/home-assistant:dev"
   },
   "author": "Paul Bottein",
   "repository": {

diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
@@ -155,22 +155,24 @@ export class AlarmControlPanelCard
           </mushroom-state-item>
           ${actions.length > 0
             ? html`
-                <mushroom-button-group
-                  .fill="${appearance.layout !== "horizontal"}"
-                  ?rtl=${rtl}
-                >
-                  ${actions.map(
-                    (action) => html`
-                      <mushroom-button
-                        @click=${(e) => this._onTap(e, action.mode)}
-                        .disabled=${!isActionEnabled}
-                      >
-                        <ha-icon .icon=${ALARM_MODES[action.mode].icon}>
-                        </ha-icon>
-                      </mushroom-button>
-                    `
-                  )}
-                </mushroom-button-group>
+                <div class="actions">
+                  <mushroom-button-group
+                    .fill="${appearance.layout !== "horizontal"}"
+                    ?rtl=${rtl}
+                  >
+                    ${actions.map(
+                      (action) => html`
+                        <mushroom-button
+                          @click=${(e) => this._onTap(e, action.mode)}
+                          .disabled=${!isActionEnabled}
+                        >
+                          <ha-icon .icon=${ALARM_MODES[action.mode].icon}>
+                          </ha-icon>
+                        </mushroom-button>
+                      `
+                    )}
+                  </mushroom-button-group>
+                </div>
               `
             : nothing}
         </mushroom-card>

diff --git a/src/cards/select-card/controls/select-option-control.ts b/src/cards/select-card/controls/select-option-control.ts
@@ -66,8 +66,13 @@ export class SelectOptionControl extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        display: flex;
+        height: 100%;
+        align-items: center;
+      }
       mushroom-select {
-        --select-height: 42px;
+        --select-height: var(--control-height);
         width: 100%;
       }
     `;

diff --git a/src/cards/template-card/template-card.ts b/src/cards/template-card/template-card.ts
@@ -87,10 +87,6 @@ export class TemplateCard extends MushroomBaseElement implements LovelaceCard {
   @property({ reflect: true, type: String })
   public layout: string | undefined;
 
-  // For backward compatibility (version < 2024.7)
-  @property({ attribute: "in-grid", reflect: true, type: Boolean })
-  protected _inGrid = false;
-
   public getCardSize(): number | Promise<number> {
     let height = 1;
     if (!this._config) return height;
@@ -101,14 +97,7 @@ export class TemplateCard extends MushroomBaseElement implements LovelaceCard {
     return height;
   }
 
-  // For backward compatibility
-  public getGridSize(): [number | undefined, number | undefined] {
-    const { grid_columns, grid_rows } = this.getLayoutOptions();
-    return [grid_columns, grid_rows];
-  }
-
   public getLayoutOptions(): LovelaceLayoutOptions {
-    this._inGrid = true;
     const options: LovelaceLayoutOptions = {
       grid_columns: 2,
       grid_rows: 1,

diff --git a/src/shared/card.ts b/src/shared/card.ts
@@ -16,7 +16,6 @@ export class Card extends LitElement {
           "no-info":
             this.appearance?.primary_info === "none" &&
             this.appearance?.secondary_info === "none",
-          "no-icon": this.appearance?.icon_type === "none",
         })}
       >
         <slot></slot>
@@ -26,6 +25,12 @@ export class Card extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin: calc(-1 * var(--ha-card-border-width, 1px));
+      }
       .container {
         display: flex;
         flex-direction: column;
@@ -35,32 +40,25 @@ export class Card extends LitElement {
         justify-content: space-between;
         height: 100%;
       }
-      .container > ::slotted(*:not(:last-child)) {
-        margin-bottom: var(--spacing);
-      }
       .container.horizontal {
         flex-direction: row;
       }
       .container.horizontal > ::slotted(*) {
         flex: 1;
         min-width: 0;
       }
-      .container.no-info > ::slotted(mushroom-state-item) {
-        flex: none;
-      }
-      .container.no-info.no-icon > ::slotted(mushroom-state-item) {
-        margin-right: 0;
-        margin-left: 0;
-        margin-bottom: 0;
+      .container.horizontal > ::slotted(*.actions) {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        padding-left: 0 !important;
+        --control-spacing: var(--spacing);
+        --control-height: var(--icon-size);
       }
-      .container.horizontal > ::slotted(*:not(:last-child)) {
-        margin-right: var(--spacing);
-        margin-bottom: 0;
+      .container > ::slotted(mushroom-state-item) {
+        flex: 1;
       }
-      :host([rtl]) .container.horizontal > ::slotted(*:not(:last-child)) {
-        margin-right: initial;
-        margin-left: var(--spacing);
-        margin-bottom: 0;
+      .container.no-info > ::slotted(mushroom-state-item) {
+        flex: none;
       }
     `;
   }

diff --git a/src/shared/state-item.ts b/src/shared/state-item.ts
@@ -45,18 +45,19 @@ export class StateItem extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        display: block;
+        height: 100%;
+      }
       .container {
+        height: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
-        justify-content: flex-start;
-      }
-      .container > *:not(:last-child) {
-        margin-right: var(--spacing);
-      }
-      :host([rtl]) .container > *:not(:last-child) {
-        margin-right: initial;
-        margin-left: var(--spacing);
+        justify-content: center;
+        box-sizing: border-box;
+        padding: var(--spacing);
+        gap: var(--spacing);
       }
       .icon {
         position: relative;
@@ -79,15 +80,6 @@ export class StateItem extends LitElement {
       .container.vertical {
         flex-direction: column;
       }
-      .container.vertical > *:not(:last-child) {
-        margin-bottom: var(--spacing);
-        margin-right: 0;
-        margin-left: 0;
-      }
-      :host([rtl]) .container.vertical > *:not(:last-child) {
-        margin-right: initial;
-        margin-left: initial;
-      }
       .container.vertical .info {
         text-align: center;
       }

diff --git a/src/utils/base-card.ts b/src/utils/base-card.ts
@@ -41,10 +41,6 @@ export class MushroomBaseCard<
   @property({ reflect: true, type: String })
   public layout: string | undefined;
 
-  // For backward compatibility (version < 2024.7)
-  @property({ attribute: "in-grid", reflect: true, type: Boolean })
-  protected _inGrid = false;
-
   protected get _stateObj(): E | undefined {
     if (!this._config || !this.hass || !this._config.entity) return undefined;
 
@@ -68,12 +64,6 @@ export class MushroomBaseCard<
     };
   }
 
-  // For backward compatibility
-  public getGridSize(): [number | undefined, number | undefined] {
-    const { grid_columns, grid_rows } = this.getLayoutOptions();
-    return [grid_columns, grid_rows];
-  }
-
   public getCardSize(): number | Promise<number> {
     let height = 1;
     if (!this._config) return height;
@@ -95,7 +85,6 @@ export class MushroomBaseCard<
   }
 
   public getLayoutOptions(): LovelaceLayoutOptions {
-    this._inGrid = true;
     const options = {
       grid_columns: 2,
       grid_rows: 1,

diff --git a/src/utils/card-styles.ts b/src/utils/card-styles.ts
@@ -3,44 +3,37 @@ import { css } from "lit";
 export const cardStyle = css`
   ha-card {
     box-sizing: border-box;
-    padding: var(--spacing);
     display: flex;
     flex-direction: column;
     justify-content: var(--layout-align);
     height: auto;
+    display: flex;
+    flex-direction: column;
   }
   ha-card.fill-container {
     height: 100%;
   }
-  :host([layout="grid"]) ha-card,
-  :host([in-grid]) ha-card {
-    height: 100%;
-  }
-  :host([layout="grid"]) ha-card mushroom-card,
-  :host([in-grid]) ha-card mushroom-card {
+  :host([layout="grid"]) ha-card {
     height: 100%;
   }
   .actions {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: center;
     justify-content: flex-start;
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE 10+ */
+    padding: var(--control-spacing);
+    padding-top: 0;
+    box-sizing: border-box;
+    gap: var(--control-spacing);
   }
   .actions::-webkit-scrollbar {
     background: transparent; /* Chrome/Safari/Webkit */
     height: 0px;
   }
-  .actions *:not(:last-child) {
-    margin-right: var(--spacing);
-  }
-  .actions[rtl] *:not(:last-child) {
-    margin-right: initial;
-    margin-left: var(--spacing);
-  }
   .unavailable {
     --main-color: rgb(var(--rgb-warning));
   }

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -1,7 +1,7 @@
 import { css } from "lit";
 
 export const themeVariables = css`
-  --spacing: var(--mush-spacing, 12px);
+  --spacing: var(--mush-spacing, 10px);
 
   /* Title */
   --title-padding: var(--mush-title-padding, 24px 12px 8px);
@@ -66,9 +66,10 @@ export const themeVariables = css`
   );
   /* Controls */
   --control-border-radius: var(--mush-control-border-radius, 12px);
-  --control-height: var(--mush-control-height, 40px);
+  --control-height: var(--mush-control-height, 42px);
   --control-button-ratio: var(--mush-control-button-ratio, 1);
   --control-icon-size: var(--mush-control-icon-size, 0.5em);
+  --control-spacing: var(--mush-control-spacing, 12px);
 
   /* Slider */
   --slider-threshold: var(--mush-slider-threshold);
@@ -86,7 +87,7 @@ export const themeVariables = css`
 
   /* Icon */
   --icon-border-radius: var(--mush-icon-border-radius, 50%);
-  --icon-size: var(--mush-icon-size, 40px);
+  --icon-size: var(--mush-icon-size, 36px);
   --icon-symbol-size: var(--mush-icon-symbol-size, 0.6em);
 `;