From 6bd7788815a47b812ed20f139eaa403354f6d006 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 5 Nov 2024 18:58:19 +0100 Subject: [PATCH] Use grid options instead of layout options for all cards. (#22676) * Use grid options for all cards * Improve min columns for some cards * Fix button and area card --- .../energy/hui-energy-date-selection-card.ts | 10 +++---- src/panels/lovelace/cards/hui-area-card.ts | 9 +++--- src/panels/lovelace/cards/hui-button-card.ts | 17 ++++++----- src/panels/lovelace/cards/hui-entity-card.ts | 12 ++++---- src/panels/lovelace/cards/hui-heading-card.ts | 9 +++--- .../lovelace/cards/hui-humidifier-card.ts | 24 ++++++++-------- src/panels/lovelace/cards/hui-iframe-card.ts | 11 ++++---- src/panels/lovelace/cards/hui-map-card.ts | 18 ++++++------ src/panels/lovelace/cards/hui-sensor-card.ts | 12 ++++---- .../lovelace/cards/hui-statistic-card.ts | 12 ++++---- .../lovelace/cards/hui-thermostat-card.ts | 24 ++++++++-------- src/panels/lovelace/cards/hui-tile-card.ts | 24 ++++++++-------- .../cards/hui-weather-forecast-card.ts | 28 +++++++++---------- 13 files changed, 108 insertions(+), 102 deletions(-) diff --git a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts index 8db4e6b44a6b..5e021d53dad3 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts @@ -1,11 +1,11 @@ import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import "../../../../components/ha-card"; import type { HomeAssistant } from "../../../../types"; import { hasConfigChanged } from "../../common/has-changed"; import "../../components/hui-energy-period-selector"; -import "../../../../components/ha-card"; -import type { LovelaceCard, LovelaceLayoutOptions } from "../../types"; +import type { LovelaceCard, LovelaceGridOptions } from "../../types"; import type { EnergyCardBaseConfig } from "../types"; @customElement("hui-energy-date-selection-card") @@ -21,10 +21,10 @@ export class HuiEnergyDateSelectionCard return 1; } - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { return { - grid_rows: 1, - grid_columns: 4, + rows: 1, + columns: 12, }; } diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts index 1e2b335ade56..e8c0eb8cea78 100644 --- a/src/panels/lovelace/cards/hui-area-card.ts +++ b/src/panels/lovelace/cards/hui-area-card.ts @@ -45,7 +45,7 @@ import "../components/hui-warning"; import type { LovelaceCard, LovelaceCardEditor, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import type { AreaCardConfig } from "./types"; @@ -534,10 +534,11 @@ export class HuiAreaCard forwardHaptic("light"); } - getLayoutOptions(): LovelaceLayoutOptions { + getGridOptions(): LovelaceGridOptions { return { - grid_columns: 4, - grid_rows: 3, + columns: 12, + rows: 3, + min_columns: 3, }; } diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 2bed7c6038e9..2fbb0adb2f9e 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -46,7 +46,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { LovelaceCard, LovelaceCardEditor, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import type { ButtonCardConfig } from "./types"; @@ -134,20 +134,23 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { ); } - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { if ( this._config?.show_icon && (this._config?.show_name || this._config?.show_state) ) { return { - grid_rows: 2, - grid_columns: 2, - grid_min_rows: 2, + rows: 2, + columns: 6, + min_columns: 2, + min_rows: 2, }; } return { - grid_rows: 1, - grid_columns: 1, + rows: 1, + columns: 3, + min_columns: 2, + min_rows: 1, }; } diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index b2b849525540..6e5b30e2b44d 100644 --- a/src/panels/lovelace/cards/hui-entity-card.ts +++ b/src/panels/lovelace/cards/hui-entity-card.ts @@ -33,8 +33,8 @@ import { createEntityNotFoundWarning } from "../components/hui-warning"; import { createHeaderFooterElement } from "../create-element/create-header-footer-element"; import type { LovelaceCard, + LovelaceGridOptions, LovelaceHeaderFooter, - LovelaceLayoutOptions, } from "../types"; import type { HuiErrorCard } from "./hui-error-card"; import type { EntityCardConfig } from "./types"; @@ -249,12 +249,12 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { fireEvent(this, "hass-more-info", { entityId: this._config!.entity }); } - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { return { - grid_columns: 2, - grid_rows: 2, - grid_min_columns: 2, - grid_min_rows: 2, + columns: 6, + rows: 2, + min_columns: 6, + min_rows: 2, }; } diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts index 6d57a1ae064c..307fc6bfdbe2 100644 --- a/src/panels/lovelace/cards/hui-heading-card.ts +++ b/src/panels/lovelace/cards/hui-heading-card.ts @@ -16,7 +16,7 @@ import "../heading-badges/hui-heading-badge"; import type { LovelaceCard, LovelaceCardEditor, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import type { HeadingCardConfig } from "./types"; @@ -65,10 +65,11 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { return 1; } - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { return { - grid_columns: "full", - grid_rows: this._config?.heading_style === "subtitle" ? "auto" : 1, + columns: "full", + rows: this._config?.heading_style === "subtitle" ? "auto" : 1, + min_columns: 3, }; } diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index c342934afc6e..15bee2a43d8f 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -19,7 +19,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { LovelaceCard, LovelaceCardEditor, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import type { HumidifierCardConfig } from "./types"; @@ -171,21 +171,21 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { `; } - public getLayoutOptions(): LovelaceLayoutOptions { - const grid_columns = 4; - let grid_rows = 5; - let grid_min_rows = 2; - const grid_min_columns = 2; + public getGridOptions(): LovelaceGridOptions { + const columns = 12; + let rows = 5; + let min_rows = 2; + const min_columns = 6; if (this._config?.features?.length) { const featureHeight = Math.ceil((this._config.features.length * 2) / 3); - grid_rows += featureHeight; - grid_min_rows += featureHeight; + rows += featureHeight; + min_rows += featureHeight; } return { - grid_columns, - grid_rows, - grid_min_rows, - grid_min_columns, + columns, + rows, + min_columns, + min_rows, }; } diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts index aa078608cebc..72188af3ba7d 100644 --- a/src/panels/lovelace/cards/hui-iframe-card.ts +++ b/src/panels/lovelace/cards/hui-iframe-card.ts @@ -11,7 +11,7 @@ import { IFRAME_SANDBOX } from "../../../util/iframe"; import type { LovelaceCard, LovelaceCardEditor, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import type { IframeCardConfig } from "./types"; @@ -113,11 +113,12 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { `; } - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { return { - grid_columns: "full", - grid_rows: 4, - grid_min_rows: 2, + columns: "full", + rows: 4, + min_columns: 3, + min_rows: 2, }; } diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 9931303f93f6..f1234225722c 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -11,8 +11,8 @@ import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { deepEqual } from "../../../common/util/deep-equal"; import parseAspectRatio from "../../../common/util/parse-aspect-ratio"; -import "../../../components/ha-card"; import "../../../components/ha-alert"; +import "../../../components/ha-card"; import "../../../components/ha-icon-button"; import "../../../components/map/ha-map"; import type { @@ -23,15 +23,15 @@ import type { } from "../../../components/map/ha-map"; import type { HistoryStates } from "../../../data/history"; import { subscribeHistoryStatesTimeWindow } from "../../../data/history"; +import type { HomeAssistant } from "../../../types"; +import { findEntities } from "../common/find-entities"; import { hasConfigChanged, hasConfigOrEntitiesChanged, } from "../common/has-changed"; -import type { HomeAssistant } from "../../../types"; -import { findEntities } from "../common/find-entities"; import { processConfigEntities } from "../common/process-config-entities"; import type { EntityConfig } from "../entity-rows/types"; -import type { LovelaceCard, LovelaceLayoutOptions } from "../types"; +import type { LovelaceCard, LovelaceGridOptions } from "../types"; import type { MapCardConfig } from "./types"; export const DEFAULT_HOURS_TO_SHOW = 0; @@ -431,12 +431,12 @@ class HuiMapCard extends LitElement implements LovelaceCard { } ); - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { return { - grid_columns: "full", - grid_rows: 4, - grid_min_columns: 2, - grid_min_rows: 2, + columns: "full", + rows: 4, + min_columns: 6, + min_rows: 2, }; } diff --git a/src/panels/lovelace/cards/hui-sensor-card.ts b/src/panels/lovelace/cards/hui-sensor-card.ts index 0bc454e3c533..db964f9e0d6b 100644 --- a/src/panels/lovelace/cards/hui-sensor-card.ts +++ b/src/panels/lovelace/cards/hui-sensor-card.ts @@ -6,7 +6,7 @@ import { computeDomain } from "../../../common/entity/compute_domain"; import type { HomeAssistant } from "../../../types"; import { findEntities } from "../common/find-entities"; import type { GraphHeaderFooterConfig } from "../header-footer/types"; -import type { LovelaceCardEditor, LovelaceLayoutOptions } from "../types"; +import type { LovelaceCardEditor, LovelaceGridOptions } from "../types"; import { HuiEntityCard } from "./hui-entity-card"; import type { EntityCardConfig, SensorCardConfig } from "./types"; @@ -73,12 +73,12 @@ class HuiSensorCard extends HuiEntityCard { super.setConfig(entityCardConfig); } - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { return { - grid_columns: 2, - grid_rows: 2, - grid_min_columns: 2, - grid_min_rows: 2, + columns: 6, + rows: 2, + min_columns: 6, + min_rows: 2, }; } diff --git a/src/panels/lovelace/cards/hui-statistic-card.ts b/src/panels/lovelace/cards/hui-statistic-card.ts index e0ee0c079e17..7fafcf8a7db3 100644 --- a/src/panels/lovelace/cards/hui-statistic-card.ts +++ b/src/panels/lovelace/cards/hui-statistic-card.ts @@ -26,7 +26,7 @@ import type { LovelaceCard, LovelaceCardEditor, LovelaceHeaderFooter, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import type { HuiErrorCard } from "./hui-error-card"; import type { EntityCardConfig, StatisticCardConfig } from "./types"; @@ -249,12 +249,12 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard { fireEvent(this, "hass-more-info", { entityId: this._config!.entity }); } - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { return { - grid_columns: 2, - grid_rows: 2, - grid_min_columns: 2, - grid_min_rows: 2, + columns: 6, + rows: 2, + min_columns: 6, + min_rows: 2, }; } diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index f96264e75eea..f33d1dbdfe50 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -19,7 +19,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { LovelaceCard, LovelaceCardEditor, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import type { ThermostatCardConfig } from "./types"; @@ -163,21 +163,21 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { `; } - public getLayoutOptions(): LovelaceLayoutOptions { - const grid_columns = 4; - let grid_rows = 5; - let grid_min_rows = 2; - const grid_min_columns = 2; + public getGridOptions(): LovelaceGridOptions { + const columns = 12; + let rows = 5; + let min_rows = 2; + const min_columns = 6; if (this._config?.features?.length) { const featureHeight = Math.ceil((this._config.features.length * 2) / 3); - grid_rows += featureHeight; - grid_min_rows += featureHeight; + rows += featureHeight; + min_rows += featureHeight; } return { - grid_columns, - grid_rows, - grid_min_rows, - grid_min_columns, + columns, + rows, + min_columns, + min_rows, }; } diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts index 820926d4bb16..457363681fd6 100644 --- a/src/panels/lovelace/cards/hui-tile-card.ts +++ b/src/panels/lovelace/cards/hui-tile-card.ts @@ -34,7 +34,7 @@ import { hasAction } from "../common/has-action"; import type { LovelaceCard, LovelaceCardEditor, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import { renderTileBadge } from "./tile/badges/tile-badge"; import type { ThermostatCardConfig, TileCardConfig } from "./types"; @@ -109,22 +109,22 @@ export class HuiTileCard extends LitElement implements LovelaceCard { ); } - public getLayoutOptions(): LovelaceLayoutOptions { - const grid_columns = 2; - let grid_min_columns = 2; - let grid_rows = 1; + public getGridOptions(): LovelaceGridOptions { + const columns = 6; + let min_columns = 6; + let rows = 1; if (this._config?.features?.length) { - grid_rows += this._config.features.length; + rows += this._config.features.length; } if (this._config?.vertical) { - grid_rows++; - grid_min_columns = 1; + rows++; + min_columns = 3; } return { - grid_columns, - grid_rows, - grid_min_rows: grid_rows, - grid_min_columns, + columns, + rows, + min_columns, + min_rows: rows, }; } diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 5fc2ec050438..ca8fc571af5e 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -34,7 +34,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { LovelaceCard, LovelaceCardEditor, - LovelaceLayoutOptions, + LovelaceGridOptions, } from "../types"; import type { WeatherForecastCardConfig } from "./types"; @@ -418,31 +418,31 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { return typeof item !== "undefined" && item !== null; } - public getLayoutOptions(): LovelaceLayoutOptions { + public getGridOptions(): LovelaceGridOptions { if ( this._config?.show_current !== false && this._config?.show_forecast !== false ) { return { - grid_columns: 4, - grid_min_columns: 2, - grid_rows: 4, - grid_min_rows: 4, + columns: 12, + rows: 4, + min_columns: 6, + min_rows: 4, }; } if (this._config?.show_forecast !== false) { return { - grid_columns: 4, - grid_min_columns: 2, - grid_rows: 3, - grid_min_rows: 3, + columns: 12, + rows: 3, + min_columns: 6, + min_rows: 3, }; } return { - grid_columns: 4, - grid_min_columns: 2, - grid_rows: 2, - grid_min_rows: 2, + columns: 12, + rows: 2, + min_columns: 6, + min_rows: 2, }; }