jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hide group header in case of empty name (#704)

Browse Source
This commit is contained in:
Andrey 2017-12-06 09:59:21 +02:00 committed by Paulus Schoutsen
parent b99d9923ea
commit baccd6fb88
1 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/cards/ha-entities-card.html
View File

@ -11,8 +11,8 @@
<template>
<style is="custom-style" include="iron-flex"></style>
<style>
.states {
padding-bottom: 16px;
ha-card {
padding: 16px 0;
}
.state {
padding: 4px 16px;
@ -23,7 +23,7 @@
compensating this with reduced padding */
line-height: 40px;
color: var(--primary-text-color);
padding: 20px 16px 12px;
padding: 4px 16px 12px;
}
.header .name {
@apply(--paper-font-common-nowrap);
@ -41,14 +41,16 @@
</style>
<ha-card>
<div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
<div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
<template is='dom-if' if='[[showGroupToggle(groupEntity, states)]]'>
<ha-entity-toggle
hass='[[hass]]'
state-obj='[[groupEntity]]'></ha-entity-toggle>
</template>
</div>
<template is='dom-if' if='[[title]]'>
<div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
<div class='flex name'>[[title]]</div>
<template is='dom-if' if='[[showGroupToggle(groupEntity, states)]]'>
<ha-entity-toggle
hass='[[hass]]'
state-obj='[[groupEntity]]'></ha-entity-toggle>
</template>
</div>
</template>
<div class='states'>
<template is='dom-repeat' items='[[states]]' on-dom-change='addTapEvents'>
<div class$='[[computeStateClass(item)]]'>
@ -71,17 +73,21 @@ class HaEntitiesCard extends window.hassMixins.EventsMixin(Polymer.Element) {
hass: Object,
states: Array,
groupEntity: Object,
title: {
type: String,
computed: 'computeTitle(states, groupEntity)',
},
};
}
computeTitle(states, groupEntity) {
return groupEntity ?
window.hassUtil.computeStateName(groupEntity) :
window.hassUtil.computeStateName(groupEntity).trim() :
window.hassUtil.computeDomain(states[0]).replace(/_/g, ' ');
}
computeTitleClass(groupEntity) {
var classes = 'header horizontal layout center ';
let classes = 'header horizontal layout center ';
if (groupEntity) {
classes += 'more-info';
} else {
@ -95,15 +101,15 @@ class HaEntitiesCard extends window.hassMixins.EventsMixin(Polymer.Element) {
}
addTapEvents() {
var cards = this.root.querySelectorAll('.state.more-info');
for (let i = 0; i < cards.length; i++) {
cards[i].addEventListener('tap', this.entityTapped.bind(this));
}
const cards = this.root.querySelectorAll('.state.more-info');
cards.forEach((card) => {
card.addEventListener('tap', this.entityTapped.bind(this));
});
}
entityTapped(ev) {
var item = this.root.querySelector('dom-repeat').itemForElement(ev.target);
var entityId;
const item = this.root.querySelector('dom-repeat').itemForElement(ev.target);
let entityId;
if (!item && !this.groupEntity) {
return;
}
@ -123,9 +129,9 @@ class HaEntitiesCard extends window.hassMixins.EventsMixin(Polymer.Element) {
return false;
}
// only show if we can toggle 2+ entities in group
var canToggleCount = 0;
for (var i = 0; i < states.length; i++) {
// Only show if we can toggle 2+ entities in group
let canToggleCount = 0;
for (let i = 0; i < states.length; i++) {
if (!window.hassUtil.canToggleState(this.hass, states[i])) {
continue;
}