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 divspull/1478/head
parent
ec54036f1e
commit
61d3d446f4
|
@ -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'>
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue