From 37957eecf873e14bdeb9ba69d96ac816bf1376b9 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Fri, 16 Aug 2024 11:59:06 +0200 Subject: [PATCH] Add column density option to the grid section --- src/data/lovelace/config/section.ts | 2 +- .../card-editor/hui-card-element-editor.ts | 11 +- .../card-editor/hui-card-layout-editor.ts | 10 +- .../card-editor/hui-dialog-edit-card.ts | 16 +-- .../hui-section-settings-editor.ts | 128 ++++++++++++++++-- .../lovelace/sections/hui-grid-section.ts | 4 +- src/translations/en.json | 8 +- 7 files changed, 144 insertions(+), 35 deletions(-) diff --git a/src/data/lovelace/config/section.ts b/src/data/lovelace/config/section.ts index 0f0c7b2c2d15..5e3b899fff41 100644 --- a/src/data/lovelace/config/section.ts +++ b/src/data/lovelace/config/section.ts @@ -13,7 +13,7 @@ export interface LovelaceSectionConfig extends LovelaceBaseSectionConfig { } export interface LovelaceGridSectionConfig extends LovelaceSectionConfig { - columns?: number; + column_base?: number; } export interface LovelaceStrategySectionConfig diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts index 17320765cfb3..647941d1d83b 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts @@ -3,6 +3,10 @@ import "@material/mwc-tab/mwc-tab"; import { CSSResultGroup, TemplateResult, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; +import { + LovelaceGridSectionConfig, + LovelaceSectionConfig, +} from "../../../../data/lovelace/config/section"; import { getCardElementClass } from "../../create-element/create-card-element"; import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types"; import { HuiElementEditor } from "../hui-element-editor"; @@ -16,8 +20,8 @@ export class HuiCardElementEditor extends HuiElementEditor { @property({ type: Boolean, attribute: "show-visibility-tab" }) public showVisibilityTab = false; - @property({ type: Boolean, attribute: "show-layout-tab" }) - public showLayoutTab = false; + @property({ attribute: false }) + public sectionConfig?: LovelaceSectionConfig; @state() private _currTab: (typeof tabs)[number] = tabs[0]; @@ -51,7 +55,7 @@ export class HuiCardElementEditor extends HuiElementEditor { protected renderConfigElement(): TemplateResult { const displayedTabs: string[] = ["config"]; if (this.showVisibilityTab) displayedTabs.push("visibility"); - if (this.showLayoutTab) displayedTabs.push("layout"); + if (this.sectionConfig?.type === "grid") displayedTabs.push("layout"); if (displayedTabs.length === 1) return super.renderConfigElement(); @@ -76,6 +80,7 @@ export class HuiCardElementEditor extends HuiElementEditor { .hass=${this.hass} .config=${this.value} @value-changed=${this._configChanged} + .sectionConfig=${this.sectionConfig as LovelaceGridSectionConfig} > `; 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 ac32343f75e9..f15d784c6560 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 @@ -21,8 +21,12 @@ import { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import { haStyle } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; import { HuiCard } from "../../cards/hui-card"; -import { computeSizeOnGrid } from "../../sections/hui-grid-section"; +import { + computeSizeOnGrid, + DEFAULT_COLUMN_BASE, +} from "../../sections/hui-grid-section"; import { LovelaceLayoutOptions } from "../../types"; +import { LovelaceGridSectionConfig } from "../../../../data/lovelace/config/section"; @customElement("hui-card-layout-editor") export class HuiCardLayoutEditor extends LitElement { @@ -30,6 +34,9 @@ export class HuiCardLayoutEditor extends LitElement { @property({ attribute: false }) public config!: LovelaceCardConfig; + @property({ attribute: false }) + public sectionConfig!: LovelaceGridSectionConfig; + @state() _defaultLayoutOptions?: LovelaceLayoutOptions; @state() public _yamlMode = false; @@ -135,6 +142,7 @@ export class HuiCardLayoutEditor extends LitElement { .rowMax=${options.grid_max_rows} .columnMin=${options.grid_min_columns} .columnMax=${options.grid_max_columns} + .columns=${this.sectionConfig.column_base || DEFAULT_COLUMN_BASE} > `} `; diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 9b3c3aa9d151..1234e75dc43e 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -236,7 +236,9 @@ export class HuiDialogEditCard
{ const { cards, title, ...containerConfig } = this diff --git a/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts b/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts index 4e067261009f..17a4f31d41b3 100644 --- a/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts +++ b/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts @@ -1,22 +1,25 @@ -import { LitElement, html } from "lit"; +import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; -import { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section"; -import { HomeAssistant } from "../../../../types"; +import memoizeOne from "memoize-one"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import { LocalizeFunc } from "../../../../common/translations/localize"; import { HaFormSchema, SchemaUnion, } from "../../../../components/ha-form/types"; -import { fireEvent } from "../../../../common/dom/fire_event"; +import { + isStrategySection, + LovelaceGridSectionConfig, + LovelaceSectionRawConfig, +} from "../../../../data/lovelace/config/section"; +import { HomeAssistant } from "../../../../types"; +import { DEFAULT_COLUMN_BASE } from "../../sections/hui-grid-section"; -const SCHEMA = [ - { - name: "title", - selector: { text: {} }, - }, -] as const satisfies HaFormSchema[]; +type ColumnDensity = "default" | "dense" | "custom"; type SettingsData = { title: string; + column_density?: ColumnDensity; }; @customElement("hui-section-settings-editor") @@ -25,16 +28,94 @@ export class HuiDialogEditSection extends LitElement { @property({ attribute: false }) public config!: LovelaceSectionRawConfig; + private _schema = memoizeOne( + ( + localize: LocalizeFunc, + type?: string | undefined, + columnDensity?: ColumnDensity, + columnBase?: number + ) => + [ + { + name: "title", + selector: { text: {} }, + }, + ...(type === "grid" + ? ([ + { + name: "column_density", + default: "default", + selector: { + select: { + mode: "list", + options: [ + { + label: localize( + `ui.panel.lovelace.editor.edit_section.settings.column_density_options.default`, + { count: 4 } + ), + value: "default", + }, + { + label: localize( + `ui.panel.lovelace.editor.edit_section.settings.column_density_options.dense`, + { count: 6 } + ), + value: "dense", + }, + ...(columnDensity === "custom" && columnBase + ? [ + { + label: localize( + `ui.panel.lovelace.editor.edit_section.settings.column_density_options.custom`, + { count: columnBase } + ), + value: "custom", + }, + ] + : []), + ], + }, + }, + }, + ] as const satisfies readonly HaFormSchema[]) + : []), + ] as const satisfies HaFormSchema[] + ); + + private _isGridSectionConfig( + config: LovelaceSectionRawConfig + ): config is LovelaceGridSectionConfig { + return !isStrategySection(config) && config.type === "grid"; + } + render() { + const columnBase = this._isGridSectionConfig(this.config) + ? this.config.column_base || DEFAULT_COLUMN_BASE + : undefined; + + const columnDensity = + columnBase === 6 ? "dense" : columnBase === 4 ? "default" : "custom"; + const data: SettingsData = { title: this.config.title || "", + column_density: columnDensity, }; + const type = "type" in this.config ? this.config.type : undefined; + + const schema = this._schema( + this.hass.localize, + type, + columnDensity, + columnBase + ); + return html` ) => + private _computeLabel = ( + schema: SchemaUnion> + ) => this.hass.localize( `ui.panel.lovelace.editor.edit_section.settings.${schema.name}` ); - private _computeHelper = (schema: SchemaUnion) => + private _computeHelper = ( + schema: SchemaUnion> + ) => this.hass.localize( `ui.panel.lovelace.editor.edit_section.settings.${schema.name}_helper` ) || ""; @@ -56,11 +141,26 @@ export class HuiDialogEditSection extends LitElement { ev.stopPropagation(); const newData = ev.detail.value as SettingsData; + const { title, column_density } = newData; + const newConfig: LovelaceSectionRawConfig = { ...this.config, - title: newData.title, + title, }; + if (this._isGridSectionConfig(newConfig)) { + const column_base = + column_density === "default" + ? 4 + : column_density === "dense" + ? 6 + : undefined; + + if (column_base) { + (newConfig as LovelaceGridSectionConfig).column_base = column_base; + } + } + if (!newConfig.title) { delete newConfig.title; } diff --git a/src/panels/lovelace/sections/hui-grid-section.ts b/src/panels/lovelace/sections/hui-grid-section.ts index 23033a7f0d49..e52307be8917 100644 --- a/src/panels/lovelace/sections/hui-grid-section.ts +++ b/src/panels/lovelace/sections/hui-grid-section.ts @@ -61,7 +61,7 @@ export const computeSizeOnGrid = ( }; }; -const DEFAULT_COLUMNS = 4; +export const DEFAULT_COLUMN_BASE = 4; export class GridSection extends LitElement implements LovelaceSectionElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -100,7 +100,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement { const editMode = Boolean(this.lovelace?.editMode && !this.isStrategy); - const columnCount = this._config.columns ?? DEFAULT_COLUMNS; + const columnCount = this._config.column_base ?? DEFAULT_COLUMN_BASE; return html` ${this._config.title || this.lovelace?.editMode diff --git a/src/translations/en.json b/src/translations/en.json index d54669e38ca9..fae940a68b2e 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5645,7 +5645,13 @@ "edit_yaml": "[%key:ui::panel::lovelace::editor::edit_view::edit_yaml%]", "settings": { "title": "Title", - "title_helper": "The title will appear at the top of section. Leave empty to hide the title." + "title_helper": "The title will appear at the top of section. Leave empty to hide the title.", + "column_density": "Column density", + "column_density_options": { + "default": "Default ({count} columns)", + "dense": "Dense ({count} columns)", + "custom": "Custom {count} ({count, plural,\n one {column}\n other {columns}\n})" + } }, "visibility": { "explanation": "The section will be shown when ALL conditions below are fulfilled. If no conditions are set, the section will always be shown."