thomas/lovelace-fold-entity-row
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Prettier design

Browse Source
This commit is contained in:
Thomas Lovén 2018-10-17 10:52:06 +02:00
parent 6cf8025452
commit 5240d103d1
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
fold-entity-row.js
View File

@ -32,7 +32,20 @@ class FoldRow extends Polymer.Element {
.toggle ha-icon { .toggle ha-icon {
flex: 0 0 40px; flex: 0 0 40px;
} }
#bar.closed {
max-height: 0;
}
#bar.open {
height: 1px;
background-color: var(--secondary-text-color);
opacity: 0.25;
margin-left: -16px;
margin-right: -16px;
margin-top: 8px;
margin-bottom: 8px;
}
</style> </style>
<div id=topbar class=nobar></div>
<div id=head> <div id=head>
<div class=toggle on-click="doToggle"> <div class=toggle on-click="doToggle">
<ha-icon icon="[[_icon]]"></ha-icon> <ha-icon icon="[[_icon]]"></ha-icon>
@ -40,14 +53,17 @@ class FoldRow extends Polymer.Element {
</div> </div>
<li id="rows" class="closed"> <li id="rows" class="closed">
</li> </li>
<div id="bar" class=closed></div>
` `
} }
update() { update() {
this._icon = this.closed ? 'mdi:menu-right' : 'mdi:menu-down'; this._icon = this.closed ? 'mdi:chevron-down' : 'mdi:chevron-up';
if(this.$) if(this.$) {
this.$.rows.className = this.closed ? 'closed' : 'open'; this.$.rows.className = this.closed ? 'closed' : 'open';
if(!this.closed) console.log(this.parentNode);
this.$.bar.className = (this.closed || !this.parentNode.nextSibling)? "closed": "open";
}
} }
doToggle(ev) { doToggle(ev) {
@ -97,7 +113,7 @@ class FoldRow extends Polymer.Element {
_addHeader(row, data) _addHeader(row, data)
{ {
this.$.head.appendChild(row); this.$.head.insertBefore(row, this.$.head.firstChild);
} }
_addRow(row, data) _addRow(row, data)
{ {