From fb7fbf2dac778e6f331e1e58b8098bdd842f7286 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Mon, 17 Feb 2020 08:26:45 -0600
Subject: [PATCH] add state_color option to glance, button and state-icon
 (#4854)

* add state_color option to glance, button and state-icon

* address comments

* address comments
---
 src/panels/lovelace/cards/hui-button-card.ts           | 9 ++++++---
 src/panels/lovelace/cards/hui-glance-card.ts           | 6 ++++--
 src/panels/lovelace/cards/types.ts                     | 3 +++
 src/panels/lovelace/elements/hui-state-icon-element.ts | 4 ++--
 src/panels/lovelace/elements/types.ts                  | 1 +
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index af6f1efec2..feff566435 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -49,6 +49,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       hold_action: { action: "more-info" },
       show_icon: true,
       show_name: true,
+      state_color: true,
     };
   }
 
@@ -148,7 +149,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           ? html`
               <ha-icon
                 data-domain=${ifDefined(
-                  stateObj ? computeStateDomain(stateObj) : undefined
+                  this._config.state_color && stateObj
+                    ? computeStateDomain(stateObj)
+                    : undefined
                 )}
                 data-state=${ifDefined(
                   stateObj ? computeActiveState(stateObj) : undefined
@@ -226,7 +229,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   }
 
   private _computeBrightness(stateObj: HassEntity | LightEntity): string {
-    if (!stateObj.attributes.brightness) {
+    if (!stateObj.attributes.brightness || !this._config?.state_color) {
       return "";
     }
     const brightness = stateObj.attributes.brightness;
@@ -234,7 +237,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   }
 
   private _computeColor(stateObj: HassEntity | LightEntity): string {
-    if (!stateObj.attributes.hs_color) {
+    if (!stateObj.attributes.hs_color || !this._config?.state_color) {
       return "";
     }
     const [hue, sat] = stateObj.attributes.hs_color;
diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index 35130eb92c..994216c2cc 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -59,7 +59,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
   }
 
   public setConfig(config: GlanceCardConfig): void {
-    this._config = { theme: "default", ...config };
+    this._config = { theme: "default", state_color: true, ...config };
     const entities = processConfigEntities<GlanceConfigEntity>(config.entities);
 
     for (const entity of entities) {
@@ -237,7 +237,9 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .overrideIcon=${entityConf.icon}
                 .overrideImage=${entityConf.image}
-                stateColor
+                .stateColor=${(entityConf.state_color === false ||
+                  entityConf.state_color) ??
+                  this._config!.state_color}
               ></state-badge>
             `
           : ""}
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index ffc361e64d..141a7874a4 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -57,6 +57,7 @@ export interface ButtonCardConfig extends LovelaceCardConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
+  state_color?: boolean;
 }
 
 export interface EntityFilterCardConfig extends LovelaceCardConfig {
@@ -102,6 +103,7 @@ export interface GlanceConfigEntity extends ConfigEntity {
   show_last_changed?: boolean;
   image?: string;
   show_state?: boolean;
+  state_color?: boolean;
 }
 
 export interface GlanceCardConfig extends LovelaceCardConfig {
@@ -112,6 +114,7 @@ export interface GlanceCardConfig extends LovelaceCardConfig {
   theme?: string;
   entities: ConfigEntity[];
   columns?: number;
+  state_color?: boolean;
 }
 
 export interface IframeCardConfig extends LovelaceCardConfig {
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts
index 4420ae96c3..2c0c0bcf12 100644
--- a/src/panels/lovelace/elements/hui-state-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-state-icon-element.ts
@@ -32,7 +32,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
       throw Error("Invalid Configuration: 'entity' required");
     }
 
-    this._config = config;
+    this._config = { state_color: true, ...config };
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
@@ -71,7 +71,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
         .overrideIcon=${this._config.icon}
-        stateColor
+        .stateColor=${this._config.state_color}
       ></state-badge>
     `;
   }
diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts
index 7c848c64ea..e42f689e31 100644
--- a/src/panels/lovelace/elements/types.ts
+++ b/src/panels/lovelace/elements/types.ts
@@ -59,6 +59,7 @@ export interface StateIconElementConfig extends LovelaceElementConfig {
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
   icon?: string;
+  state_color?: boolean;
 }
 
 export interface StateLabelElementConfig extends LovelaceElementConfig {