picture glance: better handle if no title (#1474)

* Better handle if no title

* Simplify code

* Arrays in ifs

* Remove unused method

* Always render the middle div

* Always show both entity divs
This commit is contained in:
Paulus Schoutsen 2018-07-19 21:18:24 +02:00 committed by GitHub
parent ec54036f1e
commit 61d3d446f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 24 deletions

View File

@ -60,12 +60,12 @@ class DemoPicGlance extends PolymerElement {
return html` return html`
<style> <style>
#root { #root {
padding: 10px;
} }
hui-picture-glance-card { hui-picture-glance-card {
width: 400px; width: 400px;
display: inline-block; display: inline-block;
margin-left: 20px; margin: 10px;
margin-top: 20px;
} }
</style> </style>
<div id='root'> <div id='root'>

View File

@ -83,10 +83,11 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
entity="[[_config.entity]]" entity="[[_config.entity]]"
></hui-image> ></hui-image>
<div class="box"> <div class="box">
<template is="dom-if" if="[[_config.title]]">
<div class="title">[[_config.title]]</div> <div class="title">[[_config.title]]</div>
</template>
<div> <div>
<template is="dom-repeat" items="[[_entitiesDialog]]"> <template is="dom-repeat" items="[[_computeVisible(_entitiesDialog, hass.states)]]">
<template is="dom-if" if="[[_showEntity(item.entity, hass.states)]]">
<paper-icon-button <paper-icon-button
on-click="_openDialog" on-click="_openDialog"
class$="[[_computeButtonClass(item.entity, hass.states)]]" class$="[[_computeButtonClass(item.entity, hass.states)]]"
@ -94,11 +95,9 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
title="[[_computeTooltip(item.entity, hass.states)]]" title="[[_computeTooltip(item.entity, hass.states)]]"
></paper-icon-button> ></paper-icon-button>
</template> </template>
</template>
</div> </div>
<div> <div>
<template is="dom-repeat" items="[[_entitiesToggle]]"> <template is="dom-repeat" items="[[_computeVisible(_entitiesToggle, hass.states)]]">
<template is="dom-if" if="[[_showEntity(item.entity, hass.states)]]">
<paper-icon-button <paper-icon-button
on-click="_callService" on-click="_callService"
class$="[[_computeButtonClass(item.entity, hass.states)]]" class$="[[_computeButtonClass(item.entity, hass.states)]]"
@ -106,7 +105,6 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
title="[[_computeTooltip(item.entity, hass.states)]]" title="[[_computeTooltip(item.entity, hass.states)]]"
></paper-icon-button> ></paper-icon-button>
</template> </template>
</template>
</div> </div>
</div> </div>
</ha-card> </ha-card>
@ -118,7 +116,7 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
hass: Object, hass: Object,
_config: Object, _config: Object,
_entitiesDialog: Array, _entitiesDialog: Array,
_entitiesToggle: Array _entitiesToggle: Array,
}; };
} }
@ -150,8 +148,8 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
}); });
} }
_showEntity(entityId, states) { _computeVisible(collection, states) {
return entityId in states; return collection.filter(el => el.entity in states);
} }
_computeIcon(entityId, states) { _computeIcon(entityId, states) {