jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +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: `
- type: entities
entities:
@ -67,7 +67,8 @@ const CONFIGS = [
secondary_info: entity-id
- entity: cover.kitchen_window
secondary_info: last-changed
- group.kitchen
- entity: group.kitchen
icon: mdi:home-assistant
- lock.kitchen_door
- light.bed_light
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: `
- type: glance
entities:
- entity: device_tracker.demo_paulus
name: ¯\\_(ツ)_/¯
icon: mdi:home-assistant
- media_player.living_room
- sun.sun
- cover.kitchen_window

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

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