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..38854aef 100644
--- 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
index 682510e6..166f1073 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
@@ -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
${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 dc42dd85..b9387bf0 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 ff2151ae..95033d1c 100644
--- 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 {
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
index cca62383..b14556c3 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 6e43fadf..4c336ccf 100644
--- 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
index 9490cb4c..3912ead8 100644
--- 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 {
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
index 6b54841a..4dee6db7 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 16071a8f..33b5c638 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);
@@ -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`