jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 15:26:36 +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
`
},
{
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 {

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