diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index 9ad8d2ba93..3e3e8840e4 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/src/panels/lovelace/cards/hui-stack-card.ts @@ -7,6 +7,7 @@ import { TemplateResult, } from "lit"; import { property, state } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import { LovelaceCardConfig } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { createCardElement } from "../create-element/create-card-element"; @@ -28,7 +29,7 @@ export abstract class HuiStackCard @property({ attribute: false }) public hass?: HomeAssistant; - @property() public editMode?: boolean; + @property() public editMode?: any; @property() protected _cards?: LovelaceCard[]; @@ -43,8 +44,16 @@ export abstract class HuiStackCard throw new Error("Invalid configuration"); } this._config = config; - this._cards = config.cards.map((card) => { + this._cards = config.cards.map((card, idx) => { const element = this._createCardElement(card) as LovelaceCard; + if (this.editMode !== undefined) { + if (this.editMode?.selected === idx) { + element.classList.add("selected"); + element.editMode = this.editMode.data; + } else { + element.editMode = true; + } + } return element; }); } @@ -58,12 +67,18 @@ export abstract class HuiStackCard return; } - for (const element of this._cards) { + for (const [idx, element] of this._cards.entries()) { if (this.hass) { element.hass = this.hass; } if (this.editMode !== undefined) { - element.editMode = this.editMode; + if (this.editMode.selected === idx) { + element.editMode = this.editMode.data ?? true; + element.classList.add("selected"); + } else { + element.editMode = true; + element.classList.remove("selected"); + } } } } @@ -77,7 +92,12 @@ export abstract class HuiStackCard ${this._config.title ? html`

${this._config.title}

` : ""} -
${this._cards}
+
+ ${this._cards} +
`; } @@ -95,6 +115,12 @@ export abstract class HuiStackCard display: block; padding: 24px 16px 16px; } + #root.highlight > *.selected { + opacity: 1; + } + #root.highlight > * { + opacity: 0.5; + } `; } diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts index 8ae7b3797b..a9d822bcd1 100644 --- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts @@ -144,6 +144,7 @@ export class HuiStackCardEditor .lovelace=${this.lovelace} @config-changed=${this._handleConfigChanged} @GUImode-changed=${this._handleGUIModeChanged} + @edit-mode-changed=${this._handleEditModeChanged} > ` : html` @@ -226,6 +227,14 @@ export class HuiStackCardEditor this._guiModeAvailable = ev.detail.guiModeAvailable; } + protected _handleEditModeChanged(ev: HASSDomEvent) { + ev.stopPropagation(); + fireEvent(this, "edit-mode-changed", { + selected: this._selectedCard, + data: ev.detail, + }); + } + protected _toggleMode(): void { this._cardEditorEl?.toggleMode(); } @@ -237,6 +246,13 @@ export class HuiStackCardEditor } } + protected updated(changedProperties) { + if (changedProperties.has("_selectedCard")) + fireEvent(this, "edit-mode-changed", { + selected: this._selectedCard, + }); + } + static get styles(): CSSResultGroup { return [ configElementStyle,