diff --git a/src/common/entity/compute_active_state.ts b/src/common/entity/compute_active_state.ts new file mode 100644 index 0000000000..db69f04f0e --- /dev/null +++ b/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; +}; diff --git a/src/common/style/icon_color_css.ts b/src/common/style/icon_color_css.ts new file mode 100644 index 0000000000..da89247533 --- /dev/null +++ b/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); + } +`; diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index f1ca755c4f..516a5ed814 100644 --- a/src/components/entity/state-badge.ts +++ b/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` `; @@ -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 */ - 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); - } + ${iconColorCSS} `; } } diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 1b3c2732af..fc08781428 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/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; } diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index 1860ef3e4a..3a43873a43 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/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` ` : ""} @@ -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"], - 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); - } + ${iconColorCSS} `; } diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index 0ce4b2cae9..0f1787f940 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/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 > ` : ""} diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index 6587468b6d..821f1de56c 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/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 { diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index 5542943a1f..15fbdfde0c 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/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), diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index 4ad6e9642a..512276ed67 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/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 > `; } diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts index d33cd10a2f..462a8e22d5 100644 --- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts @@ -80,6 +80,9 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow { return html`