From 1026e902962d527cf7067e34a3bf9cff5638c070 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Tue, 25 May 2021 17:44:02 +0200 Subject: [PATCH] Put attributes in more-info into a foldable section (#9220) Co-authored-by: Bram Kragten --- src/components/ha-attributes.ts | 62 +++++++++++++------ src/components/ha-expansion-panel.ts | 18 +++++- .../more-info/controls/more-info-cover.js | 1 + .../more-info/controls/more-info-default.ts | 5 +- .../more-info/controls/more-info-fan.js | 1 + .../more-info/controls/more-info-light.ts | 1 + .../more-info/controls/more-info-lock.js | 1 + .../more-info/controls/more-info-person.ts | 1 + .../more-info/controls/more-info-remote.ts | 1 + .../more-info/controls/more-info-timer.ts | 1 + .../more-info/controls/more-info-vacuum.ts | 1 + src/translations/en.json | 3 + 12 files changed, 74 insertions(+), 22 deletions(-) diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts index 79de3b3a68..68d3111caa 100644 --- a/src/components/ha-attributes.ts +++ b/src/components/ha-attributes.ts @@ -1,20 +1,26 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { until } from "lit/directives/until"; import { haStyle } from "../resources/styles"; +import { HomeAssistant } from "../types"; import hassAttributeUtil, { formatAttributeName, } from "../util/hass-attributes-util"; +import "./ha-expansion-panel"; let jsYamlPromise: Promise; @customElement("ha-attributes") class HaAttributes extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + @property() public stateObj?: HassEntity; @property({ attribute: "extra-filters" }) public extraFilters?: string; + @state() private _expanded = false; + protected render(): TemplateResult { if (!this.stateObj) { return html``; @@ -30,24 +36,37 @@ class HaAttributes extends LitElement { } return html` -
-
- ${attributes.map( - (attribute) => html` -
-
${formatAttributeName(attribute)}
-
${this.formatAttribute(attribute)}
-
- ` + - ${this.stateObj.attributes.attribution} -
- ` - : ""} - + outlined + @expanded-will-change=${this.expandedChanged} + > +
+ ${this._expanded + ? html` + ${attributes.map( + (attribute) => html` +
+
${formatAttributeName(attribute)}
+
+ ${this.formatAttribute(attribute)} +
+
+ ` + )} + ${this.stateObj.attributes.attribution + ? html` +
+ ${this.stateObj.attributes.attribution} +
+ ` + : ""} + ` + : ""} +
+ `; } @@ -55,6 +74,9 @@ class HaAttributes extends LitElement { return [ haStyle, css` + .attribute-container { + margin-bottom: 8px; + } .data-entry { display: flex; flex-direction: row; @@ -135,6 +157,10 @@ class HaAttributes extends LitElement { } return Array.isArray(value) ? value.join(", ") : value; } + + private expandedChanged(ev) { + this._expanded = ev.detail.expanded; + } } declare global { diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index 9bed7d4fcf..f553e3ffc6 100644 --- a/src/components/ha-expansion-panel.ts +++ b/src/components/ha-expansion-panel.ts @@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, query } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../common/dom/fire_event"; +import { nextRender } from "../common/util/render-status"; import "./ha-svg-icon"; @customElement("ha-expansion-panel") @@ -37,17 +38,25 @@ class HaExpansionPanel extends LitElement { this._container.style.removeProperty("height"); } - private _toggleContainer(): void { + private async _toggleContainer(): Promise { + const newExpanded = !this.expanded; + fireEvent(this, "expanded-will-change", { expanded: newExpanded }); + + if (newExpanded) { + // allow for dynamic content to be rendered + await nextRender(); + } + const scrollHeight = this._container.scrollHeight; this._container.style.height = `${scrollHeight}px`; - if (this.expanded) { + if (!newExpanded) { setTimeout(() => { this._container.style.height = "0px"; }, 0); } - this.expanded = !this.expanded; + this.expanded = newExpanded; fireEvent(this, "expanded-changed", { expanded: this.expanded }); } @@ -111,5 +120,8 @@ declare global { "expanded-changed": { expanded: boolean; }; + "expanded-will-change": { + expanded: boolean; + }; } } diff --git a/src/dialogs/more-info/controls/more-info-cover.js b/src/dialogs/more-info/controls/more-info-cover.js index 4e26d57e86..6431959047 100644 --- a/src/dialogs/more-info/controls/more-info-cover.js +++ b/src/dialogs/more-info/controls/more-info-cover.js @@ -65,6 +65,7 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) { diff --git a/src/dialogs/more-info/controls/more-info-default.ts b/src/dialogs/more-info/controls/more-info-default.ts index b30cc74a7c..381454bf9d 100644 --- a/src/dialogs/more-info/controls/more-info-default.ts +++ b/src/dialogs/more-info/controls/more-info-default.ts @@ -15,7 +15,10 @@ class MoreInfoDefault extends LitElement { return html``; } - return html` `; + return html``; } } diff --git a/src/dialogs/more-info/controls/more-info-fan.js b/src/dialogs/more-info/controls/more-info-fan.js index f7eb73e011..5ef80331c1 100644 --- a/src/dialogs/more-info/controls/more-info-fan.js +++ b/src/dialogs/more-info/controls/more-info-fan.js @@ -113,6 +113,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) { diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index 5ebc5166ae..ed0c1a096d 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -226,6 +226,7 @@ class MoreInfoLight extends LitElement { ` : ""} diff --git a/src/dialogs/more-info/controls/more-info-lock.js b/src/dialogs/more-info/controls/more-info-lock.js index 7c7fe6f3c7..346e1a8625 100644 --- a/src/dialogs/more-info/controls/more-info-lock.js +++ b/src/dialogs/more-info/controls/more-info-lock.js @@ -39,6 +39,7 @@ class MoreInfoLock extends LocalizeMixin(PolymerElement) { > diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts index f1b610d26d..59cab3c14b 100644 --- a/src/dialogs/more-info/controls/more-info-person.ts +++ b/src/dialogs/more-info/controls/more-info-person.ts @@ -24,6 +24,7 @@ class MoreInfoPerson extends LitElement { return html` diff --git a/src/dialogs/more-info/controls/more-info-remote.ts b/src/dialogs/more-info/controls/more-info-remote.ts index c8e9c8b779..421537bf67 100644 --- a/src/dialogs/more-info/controls/more-info-remote.ts +++ b/src/dialogs/more-info/controls/more-info-remote.ts @@ -48,6 +48,7 @@ class MoreInfoRemote extends LitElement { : ""} diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts index 92d06002bb..daf2e8e97f 100644 --- a/src/dialogs/more-info/controls/more-info-timer.ts +++ b/src/dialogs/more-info/controls/more-info-timer.ts @@ -18,6 +18,7 @@ class MoreInfoTimer extends LitElement { return html` diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts index ca6a5fb73b..c1841b7a5f 100644 --- a/src/dialogs/more-info/controls/more-info-vacuum.ts +++ b/src/dialogs/more-info/controls/more-info-vacuum.ts @@ -190,6 +190,7 @@ class MoreInfoVacuum extends LitElement { : ""} diff --git a/src/translations/en.json b/src/translations/en.json index 8eca3f64cd..cfa351e689 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -522,6 +522,9 @@ "calendar": { "my_calendars": "My Calendars", "today": "Today" + }, + "attributes": { + "expansion_header": "Attributes" } }, "dialogs": {