From a9b279083f17b66278332394a6494158933bfbc3 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 3 Jul 2024 12:50:35 +0200 Subject: [PATCH 1/3] Add auto-height option to resize editor --- src/components/ha-grid-size-picker.ts | 40 +++++++++++------- .../card-editor/hui-card-layout-editor.ts | 42 ++++++++++++++++++- .../lovelace/sections/hui-grid-section.ts | 4 +- src/panels/lovelace/types.ts | 2 +- src/translations/en.json | 4 +- 5 files changed, 72 insertions(+), 20 deletions(-) diff --git a/src/components/ha-grid-size-picker.ts b/src/components/ha-grid-size-picker.ts index 453a24cb8d30..bcdc000fa684 100644 --- a/src/components/ha-grid-size-picker.ts +++ b/src/components/ha-grid-size-picker.ts @@ -10,7 +10,7 @@ import { HomeAssistant } from "../types"; import { conditionalClamp } from "../common/number/clamp"; type GridSizeValue = { - rows?: number; + rows?: number | "auto"; columns?: number; }; @@ -47,6 +47,18 @@ export class HaGridSizeEditor extends LitElement { this.columnMin !== undefined && this.columnMin === this.columnMax; const disabledRows = this.rowMin !== undefined && this.rowMin === this.rowMax; + + const autoHeight = this._localValue?.rows === "auto"; + + const rowMin = this.rowMin ?? 1; + const rowMax = this.rowMax ?? this.rows; + const columnMin = this.columnMin ?? 1; + const columnMax = this.columnMax ?? this.columns; + const rowValue = autoHeight + ? this.rowMax ?? this.rows + : this._localValue?.rows; + const columnValue = this._localValue?.columns; + return html`
+
@@ -117,7 +130,7 @@ export class HaGridSizeEditor extends LitElement { `; })}
-
+
@@ -215,10 +228,6 @@ export class HaGridSizeEditor extends LitElement { opacity: 0.2; cursor: pointer; } - .preview .cell[disabled] { - opacity: 0.05; - cursor: initial; - } .selected { pointer-events: none; } @@ -228,6 +237,9 @@ export class HaGridSizeEditor extends LitElement { grid-row: 1 / span var(--rows, 0); opacity: 0.5; } + .selected.auto-height .cell { + opacity: 0.2; + } `, ]; } 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 5a5690727ce6..cc6c1ffb881c 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 @@ -11,8 +11,10 @@ import "../../../../components/ha-button-menu"; import "../../../../components/ha-grid-size-picker"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-list-item"; +import "../../../../components/ha-settings-row"; import "../../../../components/ha-slider"; import "../../../../components/ha-svg-icon"; +import "../../../../components/ha-switch"; import "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; @@ -61,11 +63,13 @@ export class HuiCardLayoutEditor extends LitElement { this._defaultLayoutOptions ); + const sizeValue = this._gridSizeValue(options); + return html`

${this.hass.localize( - `ui.panel.lovelace.editor.edit_card.layout.explanation` + "ui.panel.lovelace.editor.edit_card.layout.explanation" )}

+ + ${this.hass.localize( + "ui.panel.lovelace.editor.edit_card.layout.auto_height" + )} + + ${this.hass.localize( + "ui.panel.lovelace.editor.edit_card.layout.auto_height_description" + )} + + + + `} `; } + private _autoChanged(ev: Event) { + const checked = (ev.target as any).checked; + + const defaultRows = + typeof this._defaultLayoutOptions?.grid_rows === "number" + ? this._defaultLayoutOptions.grid_rows + : 2; + const newConfig: LovelaceCardConfig = { + ...this.config, + layout_options: { + ...this.config.layout_options, + grid_rows: checked ? "auto" : defaultRows, + }, + }; + fireEvent(this, "value-changed", { value: newConfig }); + } + protected firstUpdated(changedProps: PropertyValues): void { super.firstUpdated(changedProps); try { diff --git a/src/panels/lovelace/sections/hui-grid-section.ts b/src/panels/lovelace/sections/hui-grid-section.ts index 0cc5c74824c0..47e33c71025c 100644 --- a/src/panels/lovelace/sections/hui-grid-section.ts +++ b/src/panels/lovelace/sections/hui-grid-section.ts @@ -26,11 +26,11 @@ const CARD_SORTABLE_OPTIONS: HaSortableOptions = { export const DEFAULT_GRID_OPTIONS = { grid_columns: 4, - grid_rows: 1, + grid_rows: "auto", } as const satisfies LovelaceLayoutOptions; type GridSizeValue = { - rows?: number; + rows?: number | "auto"; columns?: number; }; diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index dc5624ecf67b..4c7ae4d164bc 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -42,7 +42,7 @@ export interface LovelaceBadge extends HTMLElement { export type LovelaceLayoutOptions = { grid_columns?: number; - grid_rows?: number; + grid_rows?: number | "auto"; grid_max_columns?: number; grid_min_columns?: number; grid_min_rows?: number; diff --git a/src/translations/en.json b/src/translations/en.json index 9772f4114b39..9001d5e4b5e1 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5551,7 +5551,9 @@ "explanation": "The card will be shown when ALL conditions below are fulfilled. If no conditions are set, the card will always be shown." }, "layout": { - "explanation": "Configure how the card will appear on the dashboard. This settings will override the default size and position of the card." + "explanation": "Configure how the card will appear on the dashboard. This settings will override the default size and position of the card.", + "auto_height": "Auto height", + "auto_height_description": "The card will ignore the grid and will adjust its height to fit its content." } }, "move_card": { From 1ee3916215497dfbae41a5cd2b593173df40b776 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 3 Jul 2024 14:30:37 +0200 Subject: [PATCH 2/3] Use min instead of max --- src/components/ha-grid-size-picker.ts | 4 +--- .../lovelace/editor/card-editor/hui-card-layout-editor.ts | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/ha-grid-size-picker.ts b/src/components/ha-grid-size-picker.ts index bcdc000fa684..54144d3b500e 100644 --- a/src/components/ha-grid-size-picker.ts +++ b/src/components/ha-grid-size-picker.ts @@ -54,9 +54,7 @@ export class HaGridSizeEditor extends LitElement { const rowMax = this.rowMax ?? this.rows; const columnMin = this.columnMin ?? 1; const columnMax = this.columnMax ?? this.columns; - const rowValue = autoHeight - ? this.rowMax ?? this.rows - : this._localValue?.rows; + const rowValue = autoHeight ? this.rowMin ?? 1 : this._localValue?.rows; const columnValue = this._localValue?.columns; return html` 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 cc6c1ffb881c..447d5930adf6 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 @@ -163,7 +163,7 @@ export class HuiCardLayoutEditor extends LitElement { const defaultRows = typeof this._defaultLayoutOptions?.grid_rows === "number" ? this._defaultLayoutOptions.grid_rows - : 2; + : 1; const newConfig: LovelaceCardConfig = { ...this.config, layout_options: { From 0549e3388e0ab3fed1f71af9b18adf487fa847b0 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 3 Jul 2024 15:12:03 +0200 Subject: [PATCH 3/3] Remove auto height --- src/components/ha-grid-size-picker.ts | 7 ++-- .../card-editor/ha-grid-layout-slider.ts | 3 ++ .../card-editor/hui-card-layout-editor.ts | 34 ------------------- src/translations/en.json | 4 +-- 4 files changed, 6 insertions(+), 42 deletions(-) diff --git a/src/components/ha-grid-size-picker.ts b/src/components/ha-grid-size-picker.ts index 54144d3b500e..6ae6b7b37d75 100644 --- a/src/components/ha-grid-size-picker.ts +++ b/src/components/ha-grid-size-picker.ts @@ -54,7 +54,7 @@ export class HaGridSizeEditor extends LitElement { const rowMax = this.rowMax ?? this.rows; const columnMin = this.columnMin ?? 1; const columnMax = this.columnMax ?? this.columns; - const rowValue = autoHeight ? this.rowMin ?? 1 : this._localValue?.rows; + const rowValue = autoHeight ? rowMin : this._localValue?.rows; const columnValue = this._localValue?.columns; return html` @@ -128,7 +128,7 @@ export class HaGridSizeEditor extends LitElement { `; })}
-
+
@@ -235,9 +235,6 @@ export class HaGridSizeEditor extends LitElement { grid-row: 1 / span var(--rows, 0); opacity: 0.5; } - .selected.auto-height .cell { - opacity: 0.2; - } `, ]; } diff --git a/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts b/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts index ab1bebf00fcc..cfbbd31c3aec 100644 --- a/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts +++ b/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts @@ -378,6 +378,9 @@ export class HaGridLayoutSlider extends LitElement { :host(:disabled) .handle:after { background: var(--disabled-color); } + :host(:disabled) .active { + background: var(--disabled-color); + } .pressed .handle { transition: none; } 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 447d5930adf6..ac32343f75e9 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 @@ -136,44 +136,10 @@ export class HuiCardLayoutEditor extends LitElement { .columnMin=${options.grid_min_columns} .columnMax=${options.grid_max_columns} > - - ${this.hass.localize( - "ui.panel.lovelace.editor.edit_card.layout.auto_height" - )} - - ${this.hass.localize( - "ui.panel.lovelace.editor.edit_card.layout.auto_height_description" - )} - - - - `} `; } - private _autoChanged(ev: Event) { - const checked = (ev.target as any).checked; - - const defaultRows = - typeof this._defaultLayoutOptions?.grid_rows === "number" - ? this._defaultLayoutOptions.grid_rows - : 1; - const newConfig: LovelaceCardConfig = { - ...this.config, - layout_options: { - ...this.config.layout_options, - grid_rows: checked ? "auto" : defaultRows, - }, - }; - fireEvent(this, "value-changed", { value: newConfig }); - } - protected firstUpdated(changedProps: PropertyValues): void { super.firstUpdated(changedProps); try { diff --git a/src/translations/en.json b/src/translations/en.json index 9001d5e4b5e1..9772f4114b39 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5551,9 +5551,7 @@ "explanation": "The card will be shown when ALL conditions below are fulfilled. If no conditions are set, the card will always be shown." }, "layout": { - "explanation": "Configure how the card will appear on the dashboard. This settings will override the default size and position of the card.", - "auto_height": "Auto height", - "auto_height_description": "The card will ignore the grid and will adjust its height to fit its content." + "explanation": "Configure how the card will appear on the dashboard. This settings will override the default size and position of the card." } }, "move_card": {