From 617a1b30062efc60c75792617a90b7edee7506e9 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 17 Jul 2024 14:54:26 +0200 Subject: [PATCH] Use layout property for panel view --- src/panels/lovelace/cards/hui-card.ts | 13 +++++++------ src/panels/lovelace/cards/hui-entity-filter-card.ts | 4 ++-- src/panels/lovelace/cards/hui-iframe-card.ts | 5 +---- src/panels/lovelace/cards/hui-map-card.ts | 8 ++------ src/panels/lovelace/cards/hui-stack-card.ts | 7 +++++-- src/panels/lovelace/types.ts | 1 - src/panels/lovelace/views/hui-panel-view.ts | 2 +- 7 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/panels/lovelace/cards/hui-card.ts b/src/panels/lovelace/cards/hui-card.ts index 5e2d832a4a95..e8347d0854d7 100644 --- a/src/panels/lovelace/cards/hui-card.ts +++ b/src/panels/lovelace/cards/hui-card.ts @@ -25,8 +25,6 @@ declare global { export class HuiCard extends ReactiveElement { @property({ type: Boolean }) public preview = false; - @property({ attribute: false }) public isPanel = false; - @property({ attribute: false }) public config?: LovelaceCardConfig; @property({ attribute: false }) public hass?: HomeAssistant; @@ -178,11 +176,14 @@ export class HuiCard extends ReactiveElement { this._loadElement(createErrorCardConfig(e.message, null)); } } - if (changedProps.has("isPanel")) { - this._element.isPanel = this.isPanel; - } if (changedProps.has("layout")) { - this._element.layout = this.layout; + try { + this._element.layout = this.layout; + // For backwards compatibility + (this._element as any).isPanel = this.layout === "panel"; + } catch (e: any) { + this._loadElement(createErrorCardConfig(e.message, null)); + } } } diff --git a/src/panels/lovelace/cards/hui-entity-filter-card.ts b/src/panels/lovelace/cards/hui-entity-filter-card.ts index d79e88ad0daf..804801cc3fae 100644 --- a/src/panels/lovelace/cards/hui-entity-filter-card.ts +++ b/src/panels/lovelace/cards/hui-entity-filter-card.ts @@ -53,7 +53,7 @@ export class HuiEntityFilterCard @property({ attribute: false }) public hass?: HomeAssistant; - @property({ type: Boolean }) public isPanel = false; + @property({ attribute: false }) public layout?: string; @property({ type: Boolean }) public preview = false; @@ -118,7 +118,7 @@ export class HuiEntityFilterCard if (this._element) { this._element.hass = this.hass; this._element.preview = this.preview; - this._element.isPanel = this.isPanel; + this._element.layout = this.layout; } if (changedProps.has("_config")) { diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts index 48113e02d6d8..cc2cdeade595 100644 --- a/src/panels/lovelace/cards/hui-iframe-card.ts +++ b/src/panels/lovelace/cards/hui-iframe-card.ts @@ -29,9 +29,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { }; } - @property({ type: Boolean, reflect: true }) - public isPanel = false; - @property({ attribute: false }) public layout?: string; @@ -63,7 +60,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { } let padding = ""; - const ignoreAspectRatio = this.isPanel || this.layout === "grid"; + const ignoreAspectRatio = this.layout === "panel" || this.layout === "grid"; if (!ignoreAspectRatio) { if (this._config.aspect_ratio) { const ratio = parseAspectRatio(this._config.aspect_ratio); diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 0c810280c29c..17e6df279fa7 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -54,11 +54,7 @@ interface MapEntityConfig extends EntityConfig { class HuiMapCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass!: HomeAssistant; - @property({ type: Boolean, reflect: true }) - public isPanel = false; - - @property({ attribute: false }) - public layout?: string; + @property({ attribute: false }) public layout?: string; @state() private _stateHistory?: HistoryStates; @@ -301,7 +297,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { private _computePadding(): void { const root = this.shadowRoot!.getElementById("root"); - const ignoreAspectRatio = this.isPanel || this.layout === "grid"; + const ignoreAspectRatio = this.layout === "panel" || this.layout === "grid"; if (!this._config || ignoreAspectRatio || !root) { return; } diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index 93bc5c4931f9..76239b6b118f 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/src/panels/lovelace/cards/hui-stack-card.ts @@ -29,8 +29,7 @@ export abstract class HuiStackCard @state() protected _config?: T; - @property({ type: Boolean, reflect: true }) - public isPanel = false; + @property({ attribute: false }) public layout?: string; public getCardSize(): number | Promise { return 1; @@ -62,6 +61,10 @@ export abstract class HuiStackCard }); } } + + if (changedProperties.has("layout")) { + this.toggleAttribute("ispanel", this.layout === "panel"); + } } private _createCardElement(cardConfig: LovelaceCardConfig) { diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index 4c7ae4d164bc..b8531f755ffd 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -51,7 +51,6 @@ export type LovelaceLayoutOptions = { export interface LovelaceCard extends HTMLElement { hass?: HomeAssistant; - isPanel?: boolean; preview?: boolean; layout?: string; getCardSize(): number | Promise; diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index 99d5f05a911d..0346eda50d19 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -105,7 +105,7 @@ export class PanelView extends LitElement implements LovelaceViewElement { } const card: HuiCard = this.cards[0]; - card.isPanel = true; + card.layout = "panel"; if (this.isStrategy || !this.lovelace?.editMode) { card.preview = false;