From db0cfe1f7db7c5070525c50d0ccebcaa0ad47a8f Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 18 Jul 2024 12:06:41 +0200 Subject: [PATCH] Add compatibility with Home Assistant 2024.8 (#1471) * Use 56px height for all cards * Simplify theme variable * Add dev command --- hacs.json | 2 +- package.json | 4 ++- .../alarm-control-panel-card.ts | 34 ++++++++++--------- .../controls/select-option-control.ts | 7 +++- src/cards/template-card/template-card.ts | 11 ------ src/shared/card.ts | 34 +++++++++---------- src/shared/state-item.ts | 26 +++++--------- src/utils/base-card.ts | 11 ------ src/utils/card-styles.ts | 23 +++++-------- src/utils/theme.ts | 7 ++-- 10 files changed, 65 insertions(+), 94 deletions(-) diff --git a/hacs.json b/hacs.json index 8f06e611..881753e7 100644 --- 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 index fc2790ae..3a1673ce 100644 --- 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 index 127db3d6..fa3ed310 100644 --- 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 ${actions.length > 0 ? html` - - ${actions.map( - (action) => html` - this._onTap(e, action.mode)} - .disabled=${!isActionEnabled} - > - - - - ` - )} - +
+ + ${actions.map( + (action) => html` + this._onTap(e, action.mode)} + .disabled=${!isActionEnabled} + > + + + + ` + )} + +
` : nothing} diff --git a/src/cards/select-card/controls/select-option-control.ts b/src/cards/select-card/controls/select-option-control.ts index dd4cf1b6..56110b03 100644 --- 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 index fb462c41..72105829 100644 --- 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 { 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 index ced39ac3..7a725bed 100644 --- 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", })} > @@ -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,9 +40,6 @@ 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; } @@ -45,22 +47,18 @@ export class Card extends LitElement { 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 index f62db4c0..17a9a1a2 100644 --- 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 index 0276a0cc..42421397 100644 --- 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 { 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 index 8a472870..b497f9f9 100644 --- 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 index 6307cfa5..de6da970 100644 --- 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); `;