From 5bd49c18d1931c0cd9666255b4c6e49a9bad34a5 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Fri, 12 May 2023 00:17:02 +0200
Subject: [PATCH] Update more info light actions (#16512)

---
 public/static/images/color_wheel.png          | Bin 0 -> 8977 bytes
 src/data/light.ts                             |   2 +-
 .../controls/more-info-alarm_control_panel.ts |   1 +
 .../more-info/controls/more-info-fan.ts       |   1 +
 .../more-info/controls/more-info-light.ts     | 115 +++++++++++-------
 5 files changed, 76 insertions(+), 43 deletions(-)
 create mode 100644 public/static/images/color_wheel.png

diff --git a/public/static/images/color_wheel.png b/public/static/images/color_wheel.png
new file mode 100644
index 0000000000000000000000000000000000000000..62b9e48ce850178a5a4f4d30ddef44ca6f127406
GIT binary patch
literal 8977
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%0A@w?#_o
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

literal 0
HcmV?d00001

diff --git a/src/data/light.ts b/src/data/light.ts
index 4e86d54f9d..2114d91bef 100644
--- a/src/data/light.ts
+++ b/src/data/light.ts
@@ -50,7 +50,7 @@ export const lightIsInColorMode = (entity: LightEntity) =>
 export const lightSupportsColor = (entity: LightEntity) =>
   entity.attributes.supported_color_modes?.some((mode) =>
     modesSupportingColor.includes(mode)
-  );
+  ) || false;
 
 export const lightSupportsBrightness = (entity: LightEntity) =>
   entity.attributes.supported_color_modes?.some((mode) =>
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
index f1db76a7a4..abb08b7e0e 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
@@ -97,6 +97,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
         md-outlined-button {
           --ha-icon-display: block;
           --md-sys-color-primary: var(--primary-text-color);
+          --md-sys-color-outline: var(--divider-color);
         }
         @keyframes pulse {
           0% {
diff --git a/src/dialogs/more-info/controls/more-info-fan.ts b/src/dialogs/more-info/controls/more-info-fan.ts
index cda083d179..bbbc1f5d36 100644
--- a/src/dialogs/more-info/controls/more-info-fan.ts
+++ b/src/dialogs/more-info/controls/more-info-fan.ts
@@ -334,6 +334,7 @@ class MoreInfoFan extends LitElement {
         md-outlined-button {
           --ha-icon-display: block;
           --md-sys-color-primary: var(--primary-text-color);
+          --md-sys-color-outline: var(--divider-color);
         }
       `,
     ];
diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts
index 3bcfb9fced..c9c9d90944 100644
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@@ -1,11 +1,11 @@
 import "@material/mwc-list/mwc-list-item";
+import "@material/web/button/outlined-button";
 import "@material/web/iconbutton/outlined-icon-button";
 import {
   mdiCreation,
   mdiFileWordBox,
   mdiLightbulb,
   mdiLightbulbOff,
-  mdiPalette,
   mdiPower,
 } from "@mdi/js";
 import {
@@ -17,7 +17,9 @@ import {
   PropertyValues,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
+import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-attributes";
@@ -46,6 +48,8 @@ class MoreInfoLight extends LitElement {
 
   @property({ attribute: false }) public stateObj?: LightEntity;
 
+  @state() private _effect?: string;
+
   @state() private _selectedBrightness?: number;
 
   private _brightnessChanged(ev) {
@@ -59,6 +63,7 @@ class MoreInfoLight extends LitElement {
       this._selectedBrightness = this.stateObj?.attributes.brightness
         ? Math.round((this.stateObj.attributes.brightness * 100) / 255)
         : undefined;
+      this._effect = this.stateObj?.attributes.effect;
     }
   }
 
@@ -141,6 +146,10 @@ class MoreInfoLight extends LitElement {
                 ${supportsColorTemp || supportsColor
                   ? html`
                       <md-outlined-icon-button
+                        class=${classMap({
+                          "color-rgb-mode": supportsColor,
+                          "color-temp-mode": !supportsColor,
+                        })}
                         .disabled=${this.stateObj.state === UNAVAILABLE}
                         .title=${this.hass.localize(
                           "ui.dialogs.more_info_control.light.change_color"
@@ -150,7 +159,6 @@ class MoreInfoLight extends LitElement {
                         )}
                         @click=${this._showLightColorPickerView}
                       >
-                        <ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
                       </md-outlined-icon-button>
                     `
                   : nothing}
@@ -170,43 +178,43 @@ class MoreInfoLight extends LitElement {
                       </md-outlined-icon-button>
                     `
                   : nothing}
-                ${supportsEffects && this.stateObj.attributes.effect_list
-                  ? html`
-                      <ha-button-menu
-                        @action=${this._handleEffectButton}
-                        @closed=${stopPropagation}
-                        fixed
-                        .disabled=${this.stateObj.state === UNAVAILABLE}
-                      >
-                        <md-outlined-icon-button
-                          .disabled=${this.stateObj.state === UNAVAILABLE}
-                          slot="trigger"
-                          .title=${this.hass.localize(
-                            "ui.dialogs.more_info_control.light.select_effect"
-                          )}
-                          .ariaLabel=${this.hass.localize(
-                            "ui.dialogs.more_info_control.light.select_effect"
-                          )}
-                        >
-                          <ha-svg-icon .path=${mdiCreation}></ha-svg-icon>
-                        </md-outlined-icon-button>
-                        ${this.stateObj.attributes.effect_list.map(
-                          (effect: string) => html`
-                            <mwc-list-item
-                              .value=${effect}
-                              .activated=${this.stateObj!.attributes.effect ===
-                              effect}
-                            >
-                              ${effect}
-                            </mwc-list-item>
-                          `
-                        )}
-                      </ha-button-menu>
-                    `
-                  : nothing}
               </div>
             `
           : nothing}
+        ${supportsEffects && this.stateObj.attributes.effect_list
+          ? html`
+              <ha-button-menu
+                @action=${this._handleEffectButton}
+                @closed=${stopPropagation}
+                fixed
+                .disabled=${this.stateObj.state === UNAVAILABLE}
+              >
+                <md-outlined-button
+                  slot="trigger"
+                  .disabled=${this.stateObj.state === UNAVAILABLE}
+                >
+                  <ha-svg-icon slot="icon" path=${mdiCreation}></ha-svg-icon>
+                  ${this._effect ||
+                  computeAttributeNameDisplay(
+                    this.hass.localize,
+                    this.stateObj,
+                    this.hass.entities,
+                    "effect"
+                  )}
+                </md-outlined-button>
+                ${this.stateObj.attributes.effect_list.map(
+                  (effect: string) => html`
+                    <ha-list-item
+                      .value=${effect}
+                      .activated=${this.stateObj!.attributes.effect === effect}
+                    >
+                      ${effect}
+                    </ha-list-item>
+                  `
+                )}
+              </ha-button-menu>
+            `
+          : nothing}
       </div>
 
       <ha-attributes
@@ -249,15 +257,14 @@ class MoreInfoLight extends LitElement {
     ev.preventDefault();
 
     const index = ev.detail.index;
-    const effect = this.stateObj!.attributes.effect_list![index];
+    const newVal = this.stateObj!.attributes.effect_list![index];
+    const oldVal = this._effect;
 
-    if (!effect || this.stateObj!.attributes.effect === effect) {
-      return;
-    }
+    if (!newVal || oldVal === newVal) return;
 
     this.hass.callService("light", "turn_on", {
       entity_id: this.stateObj!.entity_id,
-      effect,
+      effect: newVal,
     });
   }
 
@@ -270,7 +277,31 @@ class MoreInfoLight extends LitElement {
           --md-sys-color-on-surface: var(--secondary-text-color);
           --md-sys-color-on-surface-variant: var(--secondary-text-color);
           --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
-          --md-sys-color-outline: var(--secondary-text-color);
+        }
+        md-outlined-button {
+          --ha-icon-display: block;
+          --md-sys-color-primary: var(--primary-text-color);
+          --md-sys-color-outline: var(--divider-color);
+        }
+        .color-rgb-mode {
+          background-image: url("/static/images/color_wheel.png");
+          background-size: cover;
+          border-radius: 20px;
+          --md-sys-color-outline: var(--divider-color);
+        }
+        .color-temp-mode {
+          background: linear-gradient(
+            0,
+            rgb(255, 160, 0) 0%,
+            white 50%,
+            rgb(166, 209, 255) 100%
+          );
+          border-radius: 20px;
+          --md-sys-color-outline: var(--divider-color);
+        }
+        .color-rgb-mode[disabled],
+        .color-temp-mode[disabled] {
+          filter: grayscale(1) opacity(0.5);
         }
       `,
     ];