Add lovelace bg opacity preview (#24387)

* Add lovelace bg opacity preview

* Add yaml preview

* Simplify logic with css var

* Clean up

* Remove important

* Add opacity default to 100

src/components/ha-picture-upload.ts

@@ -250,6 +250,11 @@ export class HaPictureUpload extends LitElement {
           max-height: 200px;
           margin-bottom: 4px;
           border-radius: var(--file-upload-image-border-radius);
+          transition: opacity 0.3s;
+          opacity: var(--picture-opacity, 1);
+        }
+        img:hover {
+          opacity: 1;
         }
       `,
     ];

src/components/ha-selector/ha-selector-background.ts

@@ -35,6 +35,14 @@ export class HaBackgroundSelector extends LitElement {
       <div>
         ${this.yamlBackground
           ? html`
+              <div class="value">
+                <img
+                  src=${this.value}
+                  alt=${this.hass.localize(
+                    "ui.components.picture-upload.current_image_alt"
+                  )}
+                />
+              </div>
               <ha-alert alert-type="info">
                 ${this.hass.localize(
                   `ui.components.selectors.background.yaml_info`
@@ -50,7 +58,7 @@ export class HaBackgroundSelector extends LitElement {
               <ha-picture-upload
                 .hass=${this.hass}
                 .value=${this.value?.startsWith(URL_PREFIX) ? this.value : null}
-                .original=${this.selector.background?.original}
+                .original=${!!this.selector.background?.original}
                 .cropOptions=${this.selector.background?.crop}
                 select-media
                 @change=${this._pictureChanged}
@@ -83,6 +91,23 @@ export class HaBackgroundSelector extends LitElement {
       white-space: nowrap;
       --mdc-theme-primary: var(--primary-color);
     }
+    .value {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    img {
+      max-width: 100%;
+      max-height: 200px;
+      margin-bottom: 4px;
+      border-radius: var(--file-upload-image-border-radius);
+      transition: opacity 0.3s;
+      opacity: var(--picture-opacity, 1);
+    }
+    img:hover {
+      opacity: 1;
+    }
   `;
 }
 

src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts

@@ -38,7 +38,7 @@ export class HuiViewBackgroundEditor extends LitElement {
               {
                 name: "opacity",
                 selector: {
-                  number: { min: 1, max: 100, mode: "slider" },
+                  number: { min: 0, max: 100, mode: "slider" },
                 },
               },
               {
@@ -144,6 +144,7 @@ export class HuiViewBackgroundEditor extends LitElement {
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
         .localizeValue=${this._localizeValueCallback}
+        style=${`--picture-opacity: ${(background.opacity ?? 100) / 100};`}
       ></ha-form>
     `;
   }
@@ -194,6 +195,7 @@ export class HuiViewBackgroundEditor extends LitElement {
   static styles = css`
     :host {
       display: block;
+      --file-upload-image-border-radius: 4px;
     }
   `;
 }