jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 02:49:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 additional active icon states (#4510)

Browse Source 
* 💄 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
This commit is contained in:
Ian Richardson
2020-01-23 11:01:18 -06:00
committed by Paulus Schoutsen
parent 9aedeab4fa
commit 753804f463
10 changed files with 87 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/entity/state-badge.ts
View File

@@ -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-state=${stateObj.state}
data-domain=${ifDefined(
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 */
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}
`;
}
}