jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Custom icons for row cards and glance (#1492)

Browse Source 
* Custom icons for row cards

* Remove var fallback

* Add icon support to glance

* Fix glance
This commit is contained in:
c727 2018-07-21 09:04:45 +02:00 committed by Paulus Schoutsen
parent 6b1d04584e
commit 97f548a9f1
4 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gallery/src/demos/demo-hui-entities-card.js
View File

@ -57,7 +57,7 @@ const CONFIGS = [
` `
}, },
{ {
heading: 'Custom name, secondary info', heading: 'Custom name, secondary info, custom icon',
config: ` config: `
- type: entities - type: entities
entities: entities:
@ -67,7 +67,8 @@ const CONFIGS = [
secondary_info: entity-id secondary_info: entity-id
- entity: cover.kitchen_window - entity: cover.kitchen_window
secondary_info: last-changed secondary_info: last-changed
- group.kitchen - entity: group.kitchen
icon: mdi:home-assistant
- lock.kitchen_door - lock.kitchen_door
- light.bed_light - light.bed_light
title: Random group title: Random group

3
gallery/src/demos/demo-hui-glance-card.js
View File

@ -95,12 +95,13 @@ const CONFIGS = [
` `
}, },
{ {
heading: 'Custom name', heading: 'Custom name, custom icon',
config: ` config: `
- type: glance - type: glance
entities: entities:
- entity: device_tracker.demo_paulus - entity: device_tracker.demo_paulus
name: ¯\\_(ツ)_/¯ name: ¯\\_(ツ)_/¯
icon: mdi:home-assistant
- media_player.living_room - media_player.living_room
- sun.sun - sun.sun
- cover.kitchen_window - cover.kitchen_window

10
src/panels/lovelace/cards/hui-glance-card.js
View File

@ -10,6 +10,7 @@ import turnOnOffEntity from '../common/entity/turn-on-off-entity.js';
import '../../../components/entity/state-badge.js'; import '../../../components/entity/state-badge.js';
import '../../../components/ha-card.js'; import '../../../components/ha-card.js';
import '../../../components/ha-icon.js';
import EventsMixin from '../../../mixins/events-mixin.js'; import EventsMixin from '../../../mixins/events-mixin.js';
import LocalizeMixin from '../../../mixins/localize-mixin.js'; import LocalizeMixin from '../../../mixins/localize-mixin.js';
@ -28,6 +29,10 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
ha-card[header] { ha-card[header] {
padding-top: 0; padding-top: 0;
} }
ha-icon {
padding: 8px;
color: var(--paper-item-icon-color);
}
.entities { .entities {
display: flex; display: flex;
margin-bottom: -12px; margin-bottom: -12px;
@ -60,7 +65,12 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[_showInfo(_config.show_name)]]"> <template is="dom-if" if="[[_showInfo(_config.show_name)]]">
<div>[[_computeName(item, hass.states)]]</div> <div>[[_computeName(item, hass.states)]]</div>
</template> </template>
<template is="dom-if" if="[[!item.icon]]">
<state-badge state-obj="[[_computeStateObj(item, hass.states)]]"></state-badge> <state-badge state-obj="[[_computeStateObj(item, hass.states)]]"></state-badge>
</template>
<template is="dom-if" if="[[item.icon]]">
<ha-icon icon="[[item.icon]]"></ha-icon>
</template>
<template is="dom-if" if="[[_showInfo(_config.show_state)]]"> <template is="dom-if" if="[[_showInfo(_config.show_state)]]">
<div>[[_computeState(item, hass.states)]]</div> <div>[[_computeState(item, hass.states)]]</div>
</template> </template>

10
src/panels/lovelace/components/hui-generic-entity-row.js
View File

@ -3,6 +3,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../../../components/entity/state-badge.js'; import '../../../components/entity/state-badge.js';
import '../../../components/ha-relative-time.js'; import '../../../components/ha-relative-time.js';
import '../../../components/ha-icon.js';
import computeStateName from '../../../common/entity/compute_state_name.js'; import computeStateName from '../../../common/entity/compute_state_name.js';
@ -36,6 +37,10 @@ class HuiGenericEntityRow extends PolymerElement {
display: block; display: block;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-icon {
padding: 8px;
color: var(--paper-item-icon-color);
}
.not-found { .not-found {
flex: 1; flex: 1;
background-color: yellow; background-color: yellow;
@ -43,7 +48,12 @@ class HuiGenericEntityRow extends PolymerElement {
} }
</style> </style>
<template is="dom-if" if="[[_stateObj]]"> <template is="dom-if" if="[[_stateObj]]">
<template is="dom-if" if="[[!config.icon]]">
<state-badge state-obj="[[_stateObj]]"></state-badge> <state-badge state-obj="[[_stateObj]]"></state-badge>
</template>
<template is="dom-if" if="[[config.icon]]">
<ha-icon icon="[[config.icon]]"></ha-icon>
</template>
<div class="flex"> <div class="flex">
<div class="info"> <div class="info">
[[_computeName(config.name, _stateObj)]] [[_computeName(config.name, _stateObj)]]