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
This commit is contained in:
Paul Bottein 2024-11-05 18:58:19 +01:00 committed by GitHub
parent 9cdae4fea7
commit 6bd7788815
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 108 additions and 102 deletions

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}

View File

@ -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,
};
}