From d31a7771358da37af7dd788aa72272d43c954a43 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 29 May 2024 17:29:09 +0200 Subject: [PATCH] use image selector for view background (#20898) * use image selector for view background * make config future proof * improvements --- cast/src/receiver/layout/hc-lovelace.ts | 11 ++++- .../ha-selector/ha-selector-image.ts | 2 + src/data/lovelace/config/view.ts | 6 ++- src/data/selector.ts | 3 +- .../view-editor/hui-view-background-editor.ts | 49 ++++++++----------- src/panels/lovelace/hui-root.ts | 11 ++++- 6 files changed, 47 insertions(+), 35 deletions(-) diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts index ede937743a..3499eb5bb1 100644 --- a/cast/src/receiver/layout/hc-lovelace.ts +++ b/cast/src/receiver/layout/hc-lovelace.ts @@ -86,10 +86,17 @@ class HcLovelace extends LitElement { this.lovelaceConfig.views[index].background || this.lovelaceConfig.background; - if (configBackground) { + const backgroundStyle = + typeof configBackground === "string" + ? configBackground + : configBackground?.image + ? `center / cover no-repeat url('${configBackground.image}')` + : undefined; + + if (backgroundStyle) { this._huiView!.style.setProperty( "--lovelace-background", - configBackground + backgroundStyle ); } else { this._huiView!.style.removeProperty("--lovelace-background"); diff --git a/src/components/ha-selector/ha-selector-image.ts b/src/components/ha-selector/ha-selector-image.ts index 80eccaf787..cde24f883c 100644 --- a/src/components/ha-selector/ha-selector-image.ts +++ b/src/components/ha-selector/ha-selector-image.ts @@ -85,6 +85,8 @@ export class HaImageSelector extends LitElement { `} diff --git a/src/data/lovelace/config/view.ts b/src/data/lovelace/config/view.ts index 4db1b1ff99..db0385173d 100644 --- a/src/data/lovelace/config/view.ts +++ b/src/data/lovelace/config/view.ts @@ -7,6 +7,10 @@ export interface ShowViewConfig { user?: string; } +interface LovelaceViewBackgroundConfig { + image?: string; +} + export interface LovelaceBaseViewConfig { index?: number; title?: string; @@ -14,7 +18,7 @@ export interface LovelaceBaseViewConfig { icon?: string; theme?: string; panel?: boolean; - background?: string; + background?: string | LovelaceViewBackgroundConfig; visible?: boolean | ShowViewConfig[]; subview?: boolean; back_path?: string; diff --git a/src/data/selector.ts b/src/data/selector.ts index 10adc80ba7..bb90c792f4 100644 --- a/src/data/selector.ts +++ b/src/data/selector.ts @@ -14,6 +14,7 @@ import { } from "./entity_registry"; import { EntitySources } from "./entity_sources"; import { isHelperDomain } from "../panels/config/helpers/const"; +import type { CropOptions } from "../dialogs/image-cropper-dialog/show-image-cropper-dialog"; export type Selector = | ActionSelector @@ -259,7 +260,7 @@ export interface IconSelector { export interface ImageSelector { // eslint-disable-next-line @typescript-eslint/ban-types - image: {} | null; + image: { original?: boolean; crop?: CropOptions } | null; } export interface LabelSelector { diff --git a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts index 87d02d2399..7cf3f2d5d4 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts @@ -2,19 +2,11 @@ import "@material/mwc-list/mwc-list-item"; import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; -import "../../../../components/user/ha-user-badge"; +import "../../../../components/ha-selector/ha-selector-image"; import { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import { HomeAssistant, ValueChangedEvent } from "../../../../types"; -import "../../../../components/ha-picture-upload"; -import type { HaPictureUpload } from "../../../../components/ha-picture-upload"; -import { CropOptions } from "../../../../dialogs/image-cropper-dialog/show-image-cropper-dialog"; -const cropOptions: CropOptions = { - round: false, - type: "image/jpeg", - quality: 0.75, - aspectRatio: 1.78, -}; +const SELECTOR = { image: { original: true } }; @customElement("hui-view-background-editor") export class HuiViewBackgroundEditor extends LitElement { @@ -31,36 +23,35 @@ export class HuiViewBackgroundEditor extends LitElement { return nothing; } - const backgroundUrlRegex = /url\(['"]?([^'"]+)['"]?\)/; - const backgroundUrlMatch = backgroundUrlRegex.exec( - this._config?.background || "" - ); - const backgroundUrl = backgroundUrlMatch ? backgroundUrlMatch[1] : null; + const background = this._config?.background; + const backgroundUrl = + typeof background === "string" + ? background.match(/url\(['"]?([^'"]+)['"]?\)/)?.[1] + : background?.image; return html` -

- ${this.hass.localize( + - + .selector=${SELECTOR} + @value-changed=${this._backgroundChanged} + > `; } private _backgroundChanged(ev: ValueChangedEvent) { - const backgroundUrl = (ev.target as HaPictureUpload).value; + const backgroundUrl = ev.detail.value; const config = { ...this._config, - background: backgroundUrl - ? `center / cover no-repeat url('${backgroundUrl}')` - : undefined, + background: { + ...(typeof this._config.background === "string" + ? {} + : this._config.background), + image: backgroundUrl || undefined, + }, }; fireEvent(this, "view-config-changed", { config }); } diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 72b82a4587..ace50a40c6 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -932,8 +932,15 @@ class HUIRoot extends LitElement { const configBackground = viewConfig.background || this.config.background; - if (configBackground) { - root.style.setProperty("--lovelace-background", configBackground); + const backgroundStyle = + typeof configBackground === "string" + ? configBackground + : configBackground?.image + ? `center / cover no-repeat url('${configBackground.image}')` + : undefined; + + if (backgroundStyle) { + root.style.setProperty("--lovelace-background", backgroundStyle); } else { root.style.removeProperty("--lovelace-background"); }