💄 additional active icon states (#4510)

* 💄 additional active icon states

* ♻️ sort by domain

* 👌 address review comments

* state_color option for entities card

* fix typo

* 👌 address comments

extract common css
properly set boolean attributes
separate error states/color
fix unavailable color

* only make copy if necessary

* remove paused timer

* remove paused timer

src/common/entity/compute_active_state.ts

@@ -0,0 +1,12 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const computeActiveState = (stateObj: HassEntity): string => {
+  const domain = stateObj.entity_id.split(".")[0];
+  let state = stateObj.state;
+
+  if (domain === "climate") {
+    state = stateObj.attributes.hvac_action;
+  }
+
+  return state;
+};

src/common/style/icon_color_css.ts

@@ -0,0 +1,42 @@
+import { css } from "lit-element";
+
+export const iconColorCSS = css`
+  ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"],
+  ha-icon[data-domain="alert"][data-state="on"],
+  ha-icon[data-domain="automation"][data-state="on"],
+  ha-icon[data-domain="binary_sensor"][data-state="on"],
+  ha-icon[data-domain="calendar"][data-state="on"],
+  ha-icon[data-domain="camera"][data-state="streaming"],
+  ha-icon[data-domain="cover"][data-state="open"],
+  ha-icon[data-domain="fan"][data-state="on"],
+  ha-icon[data-domain="light"][data-state="on"],
+  ha-icon[data-domain="input_boolean"][data-state="on"],
+  ha-icon[data-domain="lock"][data-state="unlocked"],
+  ha-icon[data-domain="media_player"][data-state="paused"],
+  ha-icon[data-domain="media_player"][data-state="playing"],
+  ha-icon[data-domain="script"][data-state="running"],
+  ha-icon[data-domain="sun"][data-state="above_horizon"],
+  ha-icon[data-domain="switch"][data-state="on"],
+  ha-icon[data-domain="timer"][data-state="active"],
+  ha-icon[data-domain="vacuum"][data-state="cleaning"] {
+    color: var(--paper-item-icon-active-color, #fdd835);
+  }
+
+  ha-icon[data-domain="climate"][data-state="cooling"] {
+    color: var(--cool-color, #2b9af9);
+  }
+
+  ha-icon[data-domain="climate"][data-state="heating"] {
+    color: var(--heat-color, #ff8100);
+  }
+
+  ha-icon[data-domain="plant"][data-state="problem"],
+  ha-icon[data-domain="zwave"][data-state="dead"] {
+    color: var(--error-state-color, #db4437);
+  }
+
+  /* Color the icon if unavailable */
+  ha-icon[data-state="unavailable"] {
+    color: var(--state-icon-unavailable-color);
+  }
+`;

src/components/entity/state-badge.ts

@@ -16,12 +16,16 @@ import { HassEntity } from "home-assistant-js-websocket";
 // tslint:disable-next-line
 import { HaIcon } from "../ha-icon";
 import { HomeAssistant } from "../../types";
+import { computeActiveState } from "../../common/entity/compute_active_state";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { iconColorCSS } from "../../common/style/icon_color_css";
 
 class StateBadge extends LitElement {
   public hass?: HomeAssistant;
   @property() public stateObj?: HassEntity;
   @property() public overrideIcon?: string;
   @property() public overrideImage?: string;
+  @property({ type: Boolean }) public stateColor?: boolean;
   @query("ha-icon") private _icon!: HaIcon;
 
   protected render(): TemplateResult | void {
@@ -34,8 +38,10 @@ class StateBadge extends LitElement {
     return html`
       <ha-icon
         id="icon"
-        data-domain=${computeStateDomain(stateObj)}
+        data-domain=${ifDefined(
-        data-state=${stateObj.state}
+          this.stateColor ? computeStateDomain(stateObj) : undefined
+        )}
+        data-state=${computeActiveState(stateObj)}
         .icon=${this.overrideIcon || stateIcon(stateObj)}
       ></ha-icon>
     `;
@@ -111,19 +117,7 @@ class StateBadge extends LitElement {
         transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
       }
 
-      /* Color the icon if light or sun is on */
+      ${iconColorCSS}
-      ha-icon[data-domain="light"][data-state="on"],
-      ha-icon[data-domain="switch"][data-state="on"],
-      ha-icon[data-domain="binary_sensor"][data-state="on"],
-      ha-icon[data-domain="fan"][data-state="on"],
-      ha-icon[data-domain="sun"][data-state="above_horizon"] {
-        color: var(--paper-item-icon-active-color, #fdd835);
-      }
-
-      /* Color the icon if unavailable */
-      ha-icon[data-state="unavailable"] {
-        color: var(--state-icon-unavailable-color);
-      }
     `;
   }
 }

src/panels/lovelace/cards/hui-entities-card.ts

@@ -197,7 +197,14 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
   }
 
   private renderEntity(entityConf: EntitiesCardEntityConfig): TemplateResult {
-    const element = createRowElement(entityConf);
+    const element = createRowElement(
+      this._config!.state_color
+        ? {
+            state_color: true,
+            ...entityConf,
+          }
+        : entityConf
+    );
     if (this._hass) {
       element.hass = this._hass;
     }

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -31,6 +31,8 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { hasAction } from "../common/has-action";
 import { handleAction } from "../common/handle-action";
 import { ActionHandlerEvent } from "../../../data/lovelace";
+import { computeActiveState } from "../../../common/entity/compute_active_state";
+import { iconColorCSS } from "../../../common/style/icon_color_css";
 
 @customElement("hui-entity-button-card")
 class HuiEntityButtonCard extends LitElement implements LovelaceCard {
@@ -142,16 +144,16 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
         ${this._config.show_icon
           ? html`
               <ha-icon
-                data-domain="${computeStateDomain(stateObj)}"
+                data-domain=${computeStateDomain(stateObj)}
-                data-state="${stateObj.state}"
+                data-state=${computeActiveState(stateObj)}
-                .icon="${this._config.icon || stateIcon(stateObj)}"
+                .icon=${this._config.icon || stateIcon(stateObj)}
-                style="${styleMap({
+                style=${styleMap({
                   filter: this._computeBrightness(stateObj),
                   color: this._computeColor(stateObj),
                   height: this._config.icon_height
                     ? this._config.icon_height
                     : "auto",
-                })}"
+                })}
               ></ha-icon>
             `
           : ""}
@@ -210,17 +212,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
         color: var(--paper-item-icon-color, #44739e);
       }
 
-      ha-icon[data-domain="light"][data-state="on"],
+      ${iconColorCSS}
-      ha-icon[data-domain="switch"][data-state="on"],
-      ha-icon[data-domain="binary_sensor"][data-state="on"],
-      ha-icon[data-domain="fan"][data-state="on"],
-      ha-icon[data-domain="sun"][data-state="above_horizon"] {
-        color: var(--paper-item-icon-active-color, #fdd835);
-      }
-
-      ha-icon[data-state="unavailable"] {
-        color: var(--state-icon-unavailable-color);
-      }
     `;
   }
 

src/panels/lovelace/cards/hui-glance-card.ts

@@ -235,6 +235,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .overrideIcon=${entityConf.icon}
                 .overrideImage=${entityConf.image}
+                stateColor
               ></state-badge>
             `
           : ""}

src/panels/lovelace/cards/types.ts

@@ -32,6 +32,7 @@ export interface EntitiesCardEntityConfig extends EntityConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
+  state_color?: boolean;
 }
 
 export interface EntitiesCardConfig extends LovelaceCardConfig {
@@ -43,6 +44,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
   icon?: string;
   header?: LovelaceHeaderFooterConfig;
   footer?: LovelaceHeaderFooterConfig;
+  state_color?: boolean;
 }
 
 export interface EntityButtonCardConfig extends LovelaceCardConfig {

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -68,6 +68,7 @@ class HuiGenericEntityRow extends LitElement {
         .stateObj=${stateObj}
         .overrideIcon=${this.config.icon}
         .overrideImage=${this.config.image}
+        .stateColor=${this.config.state_color}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this.config!.hold_action),

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -71,6 +71,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
         .overrideIcon=${this._config.icon}
+        stateColor
       ></state-badge>
     `;
   }

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -80,6 +80,9 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
     return html`
       <state-badge
         .stateObj=${stateObj}
+        .stateColor=${this._config.state_color}
+        .overrideIcon=${this._config.icon}
+        .overrideImage=${this._config.image}
         class=${classMap({
           pointer,
         })}