View background settings: Change transparancy to opacity (#23450)

Author: silamon

src/data/lovelace/config/view.ts

@@ -9,7 +9,7 @@ export interface ShowViewConfig {
 
 export interface LovelaceViewBackgroundConfig {
   image?: string;
-  transparency?: number;
+  opacity?: number;
   size?: "auto" | "cover" | "contain";
   alignment?:
     | "top left"

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

@@ -37,7 +37,7 @@ export class HuiViewBackgroundEditor extends LitElement {
             type: "expandable" as const,
             schema: [
               {
-                name: "transparency",
+                name: "opacity",
                 selector: {
                   number: { min: 1, max: 100, mode: "slider" },
                 },
@@ -117,15 +117,15 @@ export class HuiViewBackgroundEditor extends LitElement {
 
     if (!background) {
       background = {
-        transparency: 33,
+        opacity: 33,
         alignment: "center",
         size: "cover",
         repeat: "repeat",
         attachment: "fixed",
       };
     } else {
       background = {
-        transparency: 100,
+        opacity: 100,
         alignment: "center",
         size: "cover",
         repeat: "no-repeat",
@@ -162,9 +162,9 @@ export class HuiViewBackgroundEditor extends LitElement {
         return this.hass.localize(
           "ui.panel.lovelace.editor.edit_view.background.image"
         );
-      case "transparency":
+      case "opacity":
         return this.hass.localize(
-          "ui.panel.lovelace.editor.edit_view.background.transparency"
+          "ui.panel.lovelace.editor.edit_view.background.opacity"
         );
       case "alignment":
         return this.hass.localize(

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

@@ -67,8 +67,8 @@ export class HUIViewBackground extends LitElement {
     background?: string | LovelaceViewBackgroundConfig
   ) {
     if (typeof background === "object" && background.image) {
-      if (background.transparency) {
-        return `${background.transparency}%`;
+      if (background.opacity) {
+        return `${background.opacity}%`;
       }
     }
     return null;

src/translations/en.json

@@ -5956,7 +5956,7 @@
                   "bottom right": "Bottom right"
                 }
               },
-              "transparency": "Background transparency",
+              "opacity": "Background opacity",
               "repeat": {
                 "name": "Background repeat",
                 "options": {