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
pull/1478/head
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`
<style>
#root {
padding: 10px;
}
hui-picture-glance-card {
width: 400px;
display: inline-block;
margin-left: 20px;
margin-top: 20px;
margin: 10px;
}
</style>
<div id='root'>

View File

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