Use 56px height for all cards

piitaya · Jul 16, 2024 · 350a7b2 · 350a7b2
1 parent 1eedaf1
commit 350a7b2
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 97 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
@@ -7,8 +7,8 @@
     "start": "rollup -c --watch --bundleConfigAsCjs",
     "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": "docker run --rm -p8123:8123 -v ${PWD}/.hass_dev:/config homeassistant/home-assistant:dev",
+    "start:hass-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
@@ -13,7 +13,11 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "../../ha";
-import { ALARM_MODES, AlarmMode, setProtectedAlarmControlPanelMode } from "../../ha/data/alarm_control_panel";
+import {
+    ALARM_MODES,
+    AlarmMode,
+    setProtectedAlarmControlPanelMode,
+} from "../../ha/data/alarm_control_panel";
 import "../../shared/badge-icon";
 import "../../shared/button";
 import "../../shared/button-group";
@@ -130,22 +134,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
@@ -73,10 +73,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;
@@ -87,14 +83,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
@@ -38,18 +38,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;
@@ -72,15 +73,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
@@ -38,10 +38,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;
 
@@ -65,12 +61,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;
@@ -89,7 +79,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);
@@ -51,9 +51,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);
@@ -71,8 +72,8 @@ export const themeVariables = css`
 
     /* Icon */
     --icon-border-radius: var(--mush-icon-border-radius, 50%);
-    --icon-size: var(--mush-icon-size, 40px);
-    --icon-symbol-size: var(--mush-icon-symbol-size, 0.6em);
+    --icon-size: var(--mush-icon-size, 36px);
+    --icon-symbol-size: var(--mush-icon-symbol-size, 0.6112em);
 `;
 
 export const themeColorCss = css`