jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add icon support for picture glance (#1518)

Browse Source 
* Add icon support for picture glance

* Add gallery demo

* Replace icon-button with ha-icon
This commit is contained in:
c727 2018-07-25 11:02:25 +02:00 committed by Paulus Schoutsen
parent 690252a6ba
commit 1b18315e96
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,6 +71,18 @@ const CONFIGS = [
- light.ceiling_lights - light.ceiling_lights
` `
}, },
{
heading: 'Custom icon',
config: `
- type: picture-glance
image: /images/living_room.png
title: Living room
entities:
- entity: switch.decorative_lights
icon: mdi:power
- binary_sensor.basement_floor_wet
`
},
]; ];
class DemoPicGlance extends PolymerElement { class DemoPicGlance extends PolymerElement {

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

@ -1,8 +1,8 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '../../../components/ha-card.js'; import '../../../components/ha-card.js';
import '../../../components/ha-icon.js';
import '../components/hui-image.js'; import '../components/hui-image.js';
import computeStateDisplay from '../../../common/entity/compute_state_display.js'; import computeStateDisplay from '../../../common/entity/compute_state_display.js';
@ -59,10 +59,12 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
font-weight: 500; font-weight: 500;
margin-left: 8px; margin-left: 8px;
} }
paper-icon-button { ha-icon {
cursor: pointer;
padding: 8px;
color: #A9A9A9; color: #A9A9A9;
} }
paper-icon-button.state-on { ha-icon.state-on {
color: white; color: white;
} }
</style> </style>
@ -83,22 +85,22 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
</template> </template>
<div> <div>
<template is="dom-repeat" items="[[_computeVisible(_entitiesDialog, hass.states)]]"> <template is="dom-repeat" items="[[_computeVisible(_entitiesDialog, hass.states)]]">
<paper-icon-button <ha-icon
on-click="_openDialog" on-click="_openDialog"
class$="[[_computeButtonClass(item.entity, hass.states)]]" class$="[[_computeButtonClass(item.entity, hass.states)]]"
icon="[[_computeIcon(item.entity, hass.states)]]" icon="[[_computeIcon(item, hass.states)]]"
title="[[_computeTooltip(item.entity, hass.states)]]" title="[[_computeTooltip(item.entity, hass.states)]]"
></paper-icon-button> ></ha-icon>
</template> </template>
</div> </div>
<div> <div>
<template is="dom-repeat" items="[[_computeVisible(_entitiesToggle, hass.states)]]"> <template is="dom-repeat" items="[[_computeVisible(_entitiesToggle, hass.states)]]">
<paper-icon-button <ha-icon
on-click="_callService" on-click="_callService"
class$="[[_computeButtonClass(item.entity, hass.states)]]" class$="[[_computeButtonClass(item.entity, hass.states)]]"
icon="[[_computeIcon(item.entity, hass.states)]]" icon="[[_computeIcon(item, hass.states)]]"
title="[[_computeTooltip(item.entity, hass.states)]]" title="[[_computeTooltip(item.entity, hass.states)]]"
></paper-icon-button> ></ha-icon>
</template> </template>
</div> </div>
</div> </div>
@ -147,8 +149,8 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
return collection.filter(el => el.entity in states); return collection.filter(el => el.entity in states);
} }
_computeIcon(entityId, states) { _computeIcon(item, states) {
return stateIcon(states[entityId]); return item.icon || stateIcon(states[item.entity]);
} }
_computeButtonClass(entityId, states) { _computeButtonClass(entityId, states) {