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