mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 10:16:46 +00:00
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:
parent
9cdae4fea7
commit
6bd7788815
@ -1,11 +1,11 @@
|
|||||||
import type { CSSResultGroup, PropertyValues } from "lit";
|
import type { CSSResultGroup, PropertyValues } from "lit";
|
||||||
import { LitElement, css, html, nothing } from "lit";
|
import { LitElement, css, html, nothing } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
|
import "../../../../components/ha-card";
|
||||||
import type { HomeAssistant } from "../../../../types";
|
import type { HomeAssistant } from "../../../../types";
|
||||||
import { hasConfigChanged } from "../../common/has-changed";
|
import { hasConfigChanged } from "../../common/has-changed";
|
||||||
import "../../components/hui-energy-period-selector";
|
import "../../components/hui-energy-period-selector";
|
||||||
import "../../../../components/ha-card";
|
import type { LovelaceCard, LovelaceGridOptions } from "../../types";
|
||||||
import type { LovelaceCard, LovelaceLayoutOptions } from "../../types";
|
|
||||||
import type { EnergyCardBaseConfig } from "../types";
|
import type { EnergyCardBaseConfig } from "../types";
|
||||||
|
|
||||||
@customElement("hui-energy-date-selection-card")
|
@customElement("hui-energy-date-selection-card")
|
||||||
@ -21,10 +21,10 @@ export class HuiEnergyDateSelectionCard
|
|||||||
return 1;
|
return 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
return {
|
return {
|
||||||
grid_rows: 1,
|
rows: 1,
|
||||||
grid_columns: 4,
|
columns: 12,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -45,7 +45,7 @@ import "../components/hui-warning";
|
|||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { AreaCardConfig } from "./types";
|
import type { AreaCardConfig } from "./types";
|
||||||
|
|
||||||
@ -534,10 +534,11 @@ export class HuiAreaCard
|
|||||||
forwardHaptic("light");
|
forwardHaptic("light");
|
||||||
}
|
}
|
||||||
|
|
||||||
getLayoutOptions(): LovelaceLayoutOptions {
|
getGridOptions(): LovelaceGridOptions {
|
||||||
return {
|
return {
|
||||||
grid_columns: 4,
|
columns: 12,
|
||||||
grid_rows: 3,
|
rows: 3,
|
||||||
|
min_columns: 3,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,7 +46,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning";
|
|||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { ButtonCardConfig } 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 (
|
if (
|
||||||
this._config?.show_icon &&
|
this._config?.show_icon &&
|
||||||
(this._config?.show_name || this._config?.show_state)
|
(this._config?.show_name || this._config?.show_state)
|
||||||
) {
|
) {
|
||||||
return {
|
return {
|
||||||
grid_rows: 2,
|
rows: 2,
|
||||||
grid_columns: 2,
|
columns: 6,
|
||||||
grid_min_rows: 2,
|
min_columns: 2,
|
||||||
|
min_rows: 2,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
grid_rows: 1,
|
rows: 1,
|
||||||
grid_columns: 1,
|
columns: 3,
|
||||||
|
min_columns: 2,
|
||||||
|
min_rows: 1,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -33,8 +33,8 @@ import { createEntityNotFoundWarning } from "../components/hui-warning";
|
|||||||
import { createHeaderFooterElement } from "../create-element/create-header-footer-element";
|
import { createHeaderFooterElement } from "../create-element/create-header-footer-element";
|
||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
|
LovelaceGridOptions,
|
||||||
LovelaceHeaderFooter,
|
LovelaceHeaderFooter,
|
||||||
LovelaceLayoutOptions,
|
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { HuiErrorCard } from "./hui-error-card";
|
import type { HuiErrorCard } from "./hui-error-card";
|
||||||
import type { EntityCardConfig } from "./types";
|
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 });
|
fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
return {
|
return {
|
||||||
grid_columns: 2,
|
columns: 6,
|
||||||
grid_rows: 2,
|
rows: 2,
|
||||||
grid_min_columns: 2,
|
min_columns: 6,
|
||||||
grid_min_rows: 2,
|
min_rows: 2,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@ import "../heading-badges/hui-heading-badge";
|
|||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { HeadingCardConfig } from "./types";
|
import type { HeadingCardConfig } from "./types";
|
||||||
|
|
||||||
@ -65,10 +65,11 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
|
|||||||
return 1;
|
return 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
return {
|
return {
|
||||||
grid_columns: "full",
|
columns: "full",
|
||||||
grid_rows: this._config?.heading_style === "subtitle" ? "auto" : 1,
|
rows: this._config?.heading_style === "subtitle" ? "auto" : 1,
|
||||||
|
min_columns: 3,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning";
|
|||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { HumidifierCardConfig } from "./types";
|
import type { HumidifierCardConfig } from "./types";
|
||||||
|
|
||||||
@ -171,21 +171,21 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
const grid_columns = 4;
|
const columns = 12;
|
||||||
let grid_rows = 5;
|
let rows = 5;
|
||||||
let grid_min_rows = 2;
|
let min_rows = 2;
|
||||||
const grid_min_columns = 2;
|
const min_columns = 6;
|
||||||
if (this._config?.features?.length) {
|
if (this._config?.features?.length) {
|
||||||
const featureHeight = Math.ceil((this._config.features.length * 2) / 3);
|
const featureHeight = Math.ceil((this._config.features.length * 2) / 3);
|
||||||
grid_rows += featureHeight;
|
rows += featureHeight;
|
||||||
grid_min_rows += featureHeight;
|
min_rows += featureHeight;
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
grid_columns,
|
columns,
|
||||||
grid_rows,
|
rows,
|
||||||
grid_min_rows,
|
min_columns,
|
||||||
grid_min_columns,
|
min_rows,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@ import { IFRAME_SANDBOX } from "../../../util/iframe";
|
|||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { IframeCardConfig } 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 {
|
return {
|
||||||
grid_columns: "full",
|
columns: "full",
|
||||||
grid_rows: 4,
|
rows: 4,
|
||||||
grid_min_rows: 2,
|
min_columns: 3,
|
||||||
|
min_rows: 2,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,8 +11,8 @@ import { computeDomain } from "../../../common/entity/compute_domain";
|
|||||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||||
import { deepEqual } from "../../../common/util/deep-equal";
|
import { deepEqual } from "../../../common/util/deep-equal";
|
||||||
import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
|
import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
|
||||||
import "../../../components/ha-card";
|
|
||||||
import "../../../components/ha-alert";
|
import "../../../components/ha-alert";
|
||||||
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/map/ha-map";
|
import "../../../components/map/ha-map";
|
||||||
import type {
|
import type {
|
||||||
@ -23,15 +23,15 @@ import type {
|
|||||||
} from "../../../components/map/ha-map";
|
} from "../../../components/map/ha-map";
|
||||||
import type { HistoryStates } from "../../../data/history";
|
import type { HistoryStates } from "../../../data/history";
|
||||||
import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
|
import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
|
||||||
|
import type { HomeAssistant } from "../../../types";
|
||||||
|
import { findEntities } from "../common/find-entities";
|
||||||
import {
|
import {
|
||||||
hasConfigChanged,
|
hasConfigChanged,
|
||||||
hasConfigOrEntitiesChanged,
|
hasConfigOrEntitiesChanged,
|
||||||
} from "../common/has-changed";
|
} from "../common/has-changed";
|
||||||
import type { HomeAssistant } from "../../../types";
|
|
||||||
import { findEntities } from "../common/find-entities";
|
|
||||||
import { processConfigEntities } from "../common/process-config-entities";
|
import { processConfigEntities } from "../common/process-config-entities";
|
||||||
import type { EntityConfig } from "../entity-rows/types";
|
import type { EntityConfig } from "../entity-rows/types";
|
||||||
import type { LovelaceCard, LovelaceLayoutOptions } from "../types";
|
import type { LovelaceCard, LovelaceGridOptions } from "../types";
|
||||||
import type { MapCardConfig } from "./types";
|
import type { MapCardConfig } from "./types";
|
||||||
|
|
||||||
export const DEFAULT_HOURS_TO_SHOW = 0;
|
export const DEFAULT_HOURS_TO_SHOW = 0;
|
||||||
@ -431,12 +431,12 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
return {
|
return {
|
||||||
grid_columns: "full",
|
columns: "full",
|
||||||
grid_rows: 4,
|
rows: 4,
|
||||||
grid_min_columns: 2,
|
min_columns: 6,
|
||||||
grid_min_rows: 2,
|
min_rows: 2,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
|
|||||||
import type { HomeAssistant } from "../../../types";
|
import type { HomeAssistant } from "../../../types";
|
||||||
import { findEntities } from "../common/find-entities";
|
import { findEntities } from "../common/find-entities";
|
||||||
import type { GraphHeaderFooterConfig } from "../header-footer/types";
|
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 { HuiEntityCard } from "./hui-entity-card";
|
||||||
import type { EntityCardConfig, SensorCardConfig } from "./types";
|
import type { EntityCardConfig, SensorCardConfig } from "./types";
|
||||||
|
|
||||||
@ -73,12 +73,12 @@ class HuiSensorCard extends HuiEntityCard {
|
|||||||
super.setConfig(entityCardConfig);
|
super.setConfig(entityCardConfig);
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
return {
|
return {
|
||||||
grid_columns: 2,
|
columns: 6,
|
||||||
grid_rows: 2,
|
rows: 2,
|
||||||
grid_min_columns: 2,
|
min_columns: 6,
|
||||||
grid_min_rows: 2,
|
min_rows: 2,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@ import type {
|
|||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceHeaderFooter,
|
LovelaceHeaderFooter,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { HuiErrorCard } from "./hui-error-card";
|
import type { HuiErrorCard } from "./hui-error-card";
|
||||||
import type { EntityCardConfig, StatisticCardConfig } from "./types";
|
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 });
|
fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
return {
|
return {
|
||||||
grid_columns: 2,
|
columns: 6,
|
||||||
grid_rows: 2,
|
rows: 2,
|
||||||
grid_min_columns: 2,
|
min_columns: 6,
|
||||||
grid_min_rows: 2,
|
min_rows: 2,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning";
|
|||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { ThermostatCardConfig } from "./types";
|
import type { ThermostatCardConfig } from "./types";
|
||||||
|
|
||||||
@ -163,21 +163,21 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
const grid_columns = 4;
|
const columns = 12;
|
||||||
let grid_rows = 5;
|
let rows = 5;
|
||||||
let grid_min_rows = 2;
|
let min_rows = 2;
|
||||||
const grid_min_columns = 2;
|
const min_columns = 6;
|
||||||
if (this._config?.features?.length) {
|
if (this._config?.features?.length) {
|
||||||
const featureHeight = Math.ceil((this._config.features.length * 2) / 3);
|
const featureHeight = Math.ceil((this._config.features.length * 2) / 3);
|
||||||
grid_rows += featureHeight;
|
rows += featureHeight;
|
||||||
grid_min_rows += featureHeight;
|
min_rows += featureHeight;
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
grid_columns,
|
columns,
|
||||||
grid_rows,
|
rows,
|
||||||
grid_min_rows,
|
min_columns,
|
||||||
grid_min_columns,
|
min_rows,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ import { hasAction } from "../common/has-action";
|
|||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import { renderTileBadge } from "./tile/badges/tile-badge";
|
import { renderTileBadge } from "./tile/badges/tile-badge";
|
||||||
import type { ThermostatCardConfig, TileCardConfig } from "./types";
|
import type { ThermostatCardConfig, TileCardConfig } from "./types";
|
||||||
@ -109,22 +109,22 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
const grid_columns = 2;
|
const columns = 6;
|
||||||
let grid_min_columns = 2;
|
let min_columns = 6;
|
||||||
let grid_rows = 1;
|
let rows = 1;
|
||||||
if (this._config?.features?.length) {
|
if (this._config?.features?.length) {
|
||||||
grid_rows += this._config.features.length;
|
rows += this._config.features.length;
|
||||||
}
|
}
|
||||||
if (this._config?.vertical) {
|
if (this._config?.vertical) {
|
||||||
grid_rows++;
|
rows++;
|
||||||
grid_min_columns = 1;
|
min_columns = 3;
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
grid_columns,
|
columns,
|
||||||
grid_rows,
|
rows,
|
||||||
grid_min_rows: grid_rows,
|
min_columns,
|
||||||
grid_min_columns,
|
min_rows: rows,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ import { createEntityNotFoundWarning } from "../components/hui-warning";
|
|||||||
import type {
|
import type {
|
||||||
LovelaceCard,
|
LovelaceCard,
|
||||||
LovelaceCardEditor,
|
LovelaceCardEditor,
|
||||||
LovelaceLayoutOptions,
|
LovelaceGridOptions,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
import type { WeatherForecastCardConfig } from "./types";
|
import type { WeatherForecastCardConfig } from "./types";
|
||||||
|
|
||||||
@ -418,31 +418,31 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
|
|||||||
return typeof item !== "undefined" && item !== null;
|
return typeof item !== "undefined" && item !== null;
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLayoutOptions(): LovelaceLayoutOptions {
|
public getGridOptions(): LovelaceGridOptions {
|
||||||
if (
|
if (
|
||||||
this._config?.show_current !== false &&
|
this._config?.show_current !== false &&
|
||||||
this._config?.show_forecast !== false
|
this._config?.show_forecast !== false
|
||||||
) {
|
) {
|
||||||
return {
|
return {
|
||||||
grid_columns: 4,
|
columns: 12,
|
||||||
grid_min_columns: 2,
|
rows: 4,
|
||||||
grid_rows: 4,
|
min_columns: 6,
|
||||||
grid_min_rows: 4,
|
min_rows: 4,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
if (this._config?.show_forecast !== false) {
|
if (this._config?.show_forecast !== false) {
|
||||||
return {
|
return {
|
||||||
grid_columns: 4,
|
columns: 12,
|
||||||
grid_min_columns: 2,
|
rows: 3,
|
||||||
grid_rows: 3,
|
min_columns: 6,
|
||||||
grid_min_rows: 3,
|
min_rows: 3,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
grid_columns: 4,
|
columns: 12,
|
||||||
grid_min_columns: 2,
|
rows: 2,
|
||||||
grid_rows: 2,
|
min_columns: 6,
|
||||||
grid_min_rows: 2,
|
min_rows: 2,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user