diff --git a/src/components/ha-areas-floors-display-editor.ts b/src/components/ha-areas-floors-display-editor.ts index 539df7ab09..de26786871 100644 --- a/src/components/ha-areas-floors-display-editor.ts +++ b/src/components/ha-areas-floors-display-editor.ts @@ -44,6 +44,10 @@ export class HaAreasFloorsDisplayEditor extends LitElement { @property({ type: Boolean }) public required = false; + @property({ attribute: false }) public actionsRenderer?: () => + | TemplateResult<1> + | typeof nothing; + @property({ type: Boolean, attribute: "show-navigation-button" }) public showNavigationButton = false; @@ -109,6 +113,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement { .items=${groupedAreasItems[floor.floor_id]} .value=${value} .floorId=${floor.floor_id} + .actionsRenderer=${this.actionsRenderer} @value-changed=${this._areaDisplayChanged} .showNavigationButton=${this.showNavigationButton} > diff --git a/src/components/ha-items-display-editor.ts b/src/components/ha-items-display-editor.ts index 91d55820bf..1fb1477636 100644 --- a/src/components/ha-items-display-editor.ts +++ b/src/components/ha-items-display-editor.ts @@ -9,6 +9,7 @@ import { repeat } from "lit/directives/repeat"; import { until } from "lit/directives/until"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; +import { stopPropagation } from "../common/dom/stop_propagation"; import { orderCompare } from "../common/string/compare"; import type { HomeAssistant } from "../types"; import "./ha-icon"; @@ -141,14 +142,17 @@ export class HaItemDisplayEditor extends LitElement { > ` : nothing} - ${this.actionsRenderer - ? html` - ${this.actionsRenderer(item)} - ` - : nothing} ${this.showNavigationButton ? html`` : nothing} +
+ ${this.actionsRenderer + ? html` +
+ ${this.actionsRenderer(item)} +
+ ` + : nothing} ; } diff --git a/src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts b/src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts index 9d2d75e2d2..264432248c 100644 --- a/src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts +++ b/src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts @@ -18,6 +18,7 @@ const UNASSIGNED_FLOOR = "__unassigned__"; interface AreaOptions { groups_options?: Record; + card_size?: "small" | "large"; } export interface AreasViewStrategyConfig { @@ -100,7 +101,8 @@ export class AreasOverviewViewStrategy extends ReactiveElement { return { type: "area", area: area.area_id, - display_type: "compact", + display_type: + areaOptions.card_size === "large" ? "camera" : "compact", sensor_classes: sensorClasses, exclude_entities: hiddenEntities, features: filteredControls.length diff --git a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts index 96448afc83..8dcb6e2705 100644 --- a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts @@ -16,6 +16,10 @@ import { updateAreaRegistryEntry, type AreaRegistryEntry, } from "../../../../../data/area_registry"; +import { + haCardSizeLarge, + haCardSizeSmall, +} from "../../../../../resources/ha-icons"; import { buttonLinkStyle } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import { showAreaRegistryDetailDialog } from "../../../../config/areas/show-dialog-area-registry-detail"; @@ -27,6 +31,7 @@ import { AREA_STRATEGY_GROUPS, getAreaGroupedEntities, } from "../helpers/areas-strategy-helper"; +import type { DisplayItem } from "../../../../../components/ha-items-display-editor"; @customElement("hui-areas-dashboard-strategy-editor") export class HuiAreasDashboardStrategyEditor @@ -140,11 +145,65 @@ export class HuiAreasDashboardStrategyEditor @value-changed=${this._areasFloorsDisplayChanged} expanded show-navigation-button + .actionsRenderer=${this._areasActionsButtonsRenderer} @item-display-navigate-clicked=${this._handleAreaNavigate} > `; } + private _areasActionsButtonsRenderer = (item: DisplayItem) => { + const areaId = item.value; + const isHidden = + this._config?.areas_display?.hidden?.includes(areaId) || false; + const isLarge = + !isHidden && this._config?.areas_options?.[areaId]?.card_size === "large"; + + return html` + + + `; + }; + + private _toggleAreaLargeCard = (ev: Event) => { + ev.stopPropagation(); + const area = (ev.currentTarget! as any).area as string; + const newConfig: AreasDashboardStrategyConfig = { + ...this._config!, + areas_options: { + ...this._config!.areas_options, + [area]: { + ...this._config!.areas_options?.[area], + card_size: + this._config!.areas_options?.[area]?.card_size === "large" + ? "small" + : "large", + }, + }, + }; + + if (newConfig.areas_options![area]!.card_size === "small") { + delete newConfig.areas_options![area].card_size; + } + + if (Object.keys(newConfig.areas_options![area]).length === 0) { + delete newConfig.areas_options![area]; + } + + if (Object.keys(newConfig.areas_options!).length === 0) { + delete newConfig.areas_options; + } + + fireEvent(this, "config-changed", { config: newConfig }); + }; + private _back(): void { if (this._area) { this._area = undefined; diff --git a/src/resources/ha-icons.ts b/src/resources/ha-icons.ts new file mode 100644 index 0000000000..6b90223eab --- /dev/null +++ b/src/resources/ha-icons.ts @@ -0,0 +1,4 @@ +export const haCardSizeSmall = + "M2 13C2 11.8954 2.89543 11 4 11H7C8.10457 11 9 11.8954 9 13V16C9 17.1046 8.10457 18 7 18H4C2.89543 18 2 17.1046 2 16V13Z M20 6C21.1046 6 22 6.89543 22 8V16C22 17.1046 21.1046 18 20 18H12C10.8954 18 10 17.1046 10 16V8C10 6.89543 10.8954 6 12 6H20Z M13 8C12.4477 8 12 8.44772 12 9V15C12 15.5523 12.4477 16 13 16H19C19.5523 16 20 15.5523 20 15V9C20 8.44772 19.5523 8 19 8H13Z"; +export const haCardSizeLarge = + "M7 11C8.10457 11 9 11.8954 9 13V16C9 17.1046 8.10457 18 7 18H4C2.89543 18 2 17.1046 2 16V13C2 11.8954 2.89543 11 4 11H7Z M5 13C4.44772 13 4 13.4477 4 14V15C4 15.5523 4.44772 16 5 16H6C6.55228 16 7 15.5523 7 15V14C7 13.4477 6.55228 13 6 13H5Z M10 8C10 6.89543 10.8954 6 12 6H20C21.1046 6 22 6.89543 22 8V16C22 17.1046 21.1046 18 20 18H12C10.8954 18 10 17.1046 10 16V8Z"; diff --git a/src/translations/en.json b/src/translations/en.json index 43ad6f319f..0510fb1923 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -7954,7 +7954,9 @@ }, "areas": { "areas_display": "Areas to display", - "no_entities": "No entities in this group, the section will not be displayed" + "no_entities": "No entities in this group, the section will not be displayed", + "use_compact_card": "Use compact card", + "use_large_card": "Use large card" } }, "view": {