diff --git a/src/components/ha-grid-size-picker.ts b/src/components/ha-grid-size-picker.ts index 33569c2d2e..f135bcfbc0 100644 --- a/src/components/ha-grid-size-picker.ts +++ b/src/components/ha-grid-size-picker.ts @@ -32,12 +32,6 @@ export class HaGridSizeEditor extends LitElement { @property({ attribute: false }) public step = 1; - @property({ type: Boolean, attribute: "rows-disabled" }) - public rowsDisabled?: boolean; - - @property({ type: Boolean, attribute: "columns-disabled" }) - public columnsDisabled?: boolean; - @state() public _localValue?: CardGridSize = { rows: 1, columns: 1 }; protected willUpdate(changedProperties) { @@ -47,16 +41,15 @@ export class HaGridSizeEditor extends LitElement { } protected render() { - const disabledColumns = - this.columnsDisabled || - (this.columnMin !== undefined && this.columnMin === this.columnMax); - const disabledRows = - this.rowsDisabled || - (this.rowMin !== undefined && this.rowMin === this.rowMax); - const autoHeight = this._localValue?.rows === "auto"; const fullWidth = this._localValue?.columns === "full"; + const disabledColumns = + fullWidth || + (this.columnMin !== undefined && this.columnMin === this.columnMax); + const disabledRows = + autoHeight || (this.rowMin !== undefined && this.rowMin === this.rowMax); + const rowMin = this.rowMin ?? 1; const rowMax = this.rowMax ?? this.rows; const columnMin = Math.ceil((this.columnMin ?? 1) / this.step) * this.step; diff --git a/src/panels/lovelace/cards/hui-card.ts b/src/panels/lovelace/cards/hui-card.ts index 952ca8eb9b..321c7677c7 100644 --- a/src/panels/lovelace/cards/hui-card.ts +++ b/src/panels/lovelace/cards/hui-card.ts @@ -71,23 +71,6 @@ export class HuiCard extends ConditionalListenerMixin( ...elementOptions, ...configOptions, }; - - // If the element has fixed rows or columns, we use the values from the element - // unless the user has already configured their own - if (elementOptions.fixed_rows) { - if (configOptions.rows === undefined) { - mergedConfig.rows = elementOptions.rows; - } - delete mergedConfig.min_rows; - delete mergedConfig.max_rows; - } - if (elementOptions.fixed_columns) { - if (configOptions.columns === undefined) { - mergedConfig.columns = elementOptions.columns; - } - delete mergedConfig.min_columns; - delete mergedConfig.max_columns; - } return mergedConfig; } diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 991324980e..eaa2cff89a 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -145,7 +145,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { columns: 12, rows: "auto", min_columns: 3, - fixed_rows: true, }; } diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts index cbd49218a2..e68aa85de8 100644 --- a/src/panels/lovelace/cards/hui-error-card.ts +++ b/src/panels/lovelace/cards/hui-error-card.ts @@ -33,7 +33,6 @@ export class HuiErrorCard extends LitElement implements LovelaceCard { rows: this.preview ? "auto" : 1, min_rows: 1, min_columns: 6, - fixed_rows: this.preview, }; } diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index 0ff3da735f..9ecbeb9a0a 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/src/panels/lovelace/cards/hui-stack-card.ts @@ -48,7 +48,6 @@ export abstract class HuiStackCard columns: 12, rows: "auto", min_columns: 3, - fixed_rows: true, }; } diff --git a/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts index db3a977aa6..ed8e1231c7 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts @@ -7,6 +7,7 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-button"; import "../../../../components/ha-dropdown"; +import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown"; import "../../../../components/ha-dropdown-item"; import "../../../../components/ha-grid-size-picker"; import "../../../../components/ha-icon-button"; @@ -28,7 +29,6 @@ import { migrateLayoutToGridOptions, } from "../../common/compute-card-grid-size"; import type { LovelaceGridOptions } from "../../types"; -import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown"; @customElement("hui-card-layout-editor") export class HuiCardLayoutEditor extends LitElement { @@ -134,10 +134,26 @@ export class HuiCardLayoutEditor extends LitElement { .rowMax=${gridOptions.max_rows} .columnMin=${gridOptions.min_columns} .columnMax=${gridOptions.max_columns} - .rowsDisabled=${this._defaultGridOptions?.fixed_rows} - .columnsDisabled=${this._defaultGridOptions?.fixed_columns} .step=${this._preciseMode ? 1 : GRID_COLUMN_MULTIPLIER} > + + ${this.hass.localize( + "ui.panel.lovelace.editor.edit_card.layout.auto_height" + )} + ${this.hass.localize( + "ui.panel.lovelace.editor.edit_card.layout.auto_height_helper" + )} + + ${this.hass.localize( @@ -265,10 +281,43 @@ export class HuiCardLayoutEditor extends LitElement { private _fullWidthChanged(ev): void { ev.stopPropagation(); - const value = ev.target.checked; + const checked = ev.target.checked; + + let columns: number | "full" | undefined; + if (checked) { + columns = "full"; + } else if (this._defaultGridOptions?.columns === "full") { + // Default is full width, so we need to set a specific value + const columnSpan = this.sectionConfig.column_span ?? 1; + const gridTotalColumns = 12 * columnSpan; + columns = this._defaultGridOptions?.max_columns ?? gridTotalColumns; + } else { + columns = undefined; + } + this._updateGridOptions({ ...this.config.grid_options, - columns: value ? "full" : undefined, + columns, + }); + } + + private _autoHeightChanged(ev): void { + ev.stopPropagation(); + const checked = ev.target.checked; + + let rows: number | "auto" | undefined; + if (checked) { + rows = "auto"; + } else if (this._defaultGridOptions?.rows === "auto") { + // Default is auto height, so we need to set a specific value + rows = this._defaultGridOptions?.min_rows ?? 1; + } else { + rows = undefined; + } + + this._updateGridOptions({ + ...this.config.grid_options, + rows, }); } diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index 644b7c9a86..a69c2aeaf1 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -64,8 +64,6 @@ export interface LovelaceGridOptions { min_columns?: number; min_rows?: number; max_rows?: number; - fixed_rows?: boolean; - fixed_columns?: boolean; } export interface LovelaceCard extends HTMLElement { diff --git a/src/translations/en.json b/src/translations/en.json index 12f890ed06..762363d95b 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -8632,8 +8632,10 @@ "explanation": "The card will be shown when ALL conditions below are fulfilled. If no conditions are set, the card will always be shown." }, "layout": { - "full_width": "Full width card", + "full_width": "Full width", "full_width_helper": "Take up the full width of the section whatever its size", + "auto_height": "Auto height", + "auto_height_helper": "Adjust the card height based on its content", "precise_mode": "Precise mode", "precise_mode_helper": "Change the card width with more precision" }