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

Fix custom icon colors in entities and glance cards. (#1587)

Browse Source 
* Fix custom icon colors in entities and glance cards.

* Use ha-icon directly in state-badge.
This commit is contained in:
Jerad Meisner
2018-08-23 13:24:21 -07:00
committed by Paulus Schoutsen
parent 144f00e2cc
commit cde106bd77
5 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/entity/state-badge.js
View File

@@ -1,8 +1,9 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import './ha-state-icon.js';
import '../ha-icon.js';
import computeStateDomain from '../../common/entity/compute_state_domain.js';
import stateIcon from '../../common/entity/state_icon.js';
class StateBadge extends PolymerElement {
static get template() {
@@ -20,26 +21,31 @@ class StateBadge extends PolymerElement {
line-height: 40px;
}
ha-state-icon {
ha-icon {
transition: color .3s ease-in-out, filter .3s ease-in-out;
}
/* Color the icon if light or sun is on */
ha-state-icon[data-domain=light][data-state=on],
ha-state-icon[data-domain=switch][data-state=on],
ha-state-icon[data-domain=binary_sensor][data-state=on],
ha-state-icon[data-domain=fan][data-state=on],
ha-state-icon[data-domain=sun][data-state=above_horizon] {
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-state-icon[data-state=unavailable] {
ha-icon[data-state=unavailable] {
color: var(--state-icon-unavailable-color);
}
</style>
<ha-state-icon id="icon" state-obj="[[stateObj]]" data-domain$="[[computeDomain(stateObj)]]" data-state$="[[stateObj.state]]"></ha-state-icon>
<ha-icon
id="icon"
data-domain$="[[_computeDomain(stateObj)]]"
data-state$="[[stateObj.state]]"
icon="[[_computeIcon(stateObj)]]"
></ha-icon>
`;
}
@@ -47,19 +53,22 @@ class StateBadge extends PolymerElement {
return {
stateObj: {
type: Object,
observer: 'updateIconAppearance',
observer: '_updateIconAppearance',
},
overrideIcon: String
};
}
computeDomain(stateObj) {
_computeDomain(stateObj) {
return computeStateDomain(stateObj);
}
_computeIcon(stateObj) {
return this.overrideIcon || stateIcon(stateObj);
}
updateIconAppearance(newVal) {
_updateIconAppearance(newVal) {
const iconStyle = {
display: 'inline',
color: '',
filter: '',
};