Put attributes in more-info into a foldable section (#9220)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Philip Allgaier 2021-05-25 17:44:02 +02:00 committed by GitHub
parent 0eca602e61
commit 1026e90296
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 74 additions and 22 deletions

View File

@ -1,20 +1,26 @@
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; 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 { until } from "lit/directives/until";
import { haStyle } from "../resources/styles"; import { haStyle } from "../resources/styles";
import { HomeAssistant } from "../types";
import hassAttributeUtil, { import hassAttributeUtil, {
formatAttributeName, formatAttributeName,
} from "../util/hass-attributes-util"; } from "../util/hass-attributes-util";
import "./ha-expansion-panel";
let jsYamlPromise: Promise<typeof import("js-yaml")>; let jsYamlPromise: Promise<typeof import("js-yaml")>;
@customElement("ha-attributes") @customElement("ha-attributes")
class HaAttributes extends LitElement { class HaAttributes extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public stateObj?: HassEntity; @property() public stateObj?: HassEntity;
@property({ attribute: "extra-filters" }) public extraFilters?: string; @property({ attribute: "extra-filters" }) public extraFilters?: string;
@state() private _expanded = false;
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.stateObj) { if (!this.stateObj) {
return html``; return html``;
@ -30,24 +36,37 @@ class HaAttributes extends LitElement {
} }
return html` return html`
<hr /> <ha-expansion-panel
<div> .header=${this.hass.localize(
${attributes.map( "ui.components.attributes.expansion_header"
(attribute) => html`
<div class="data-entry">
<div class="key">${formatAttributeName(attribute)}</div>
<div class="value">${this.formatAttribute(attribute)}</div>
</div>
`
)} )}
${this.stateObj.attributes.attribution outlined
? html` @expanded-will-change=${this.expandedChanged}
<div class="attribution"> >
${this.stateObj.attributes.attribution} <div class="attribute-container">
</div> ${this._expanded
` ? html`
: ""} ${attributes.map(
</div> (attribute) => html`
<div class="data-entry">
<div class="key">${formatAttributeName(attribute)}</div>
<div class="value">
${this.formatAttribute(attribute)}
</div>
</div>
`
)}
${this.stateObj.attributes.attribution
? html`
<div class="attribution">
${this.stateObj.attributes.attribution}
</div>
`
: ""}
`
: ""}
</div>
</ha-expansion-panel>
`; `;
} }
@ -55,6 +74,9 @@ class HaAttributes extends LitElement {
return [ return [
haStyle, haStyle,
css` css`
.attribute-container {
margin-bottom: 8px;
}
.data-entry { .data-entry {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -135,6 +157,10 @@ class HaAttributes extends LitElement {
} }
return Array.isArray(value) ? value.join(", ") : value; return Array.isArray(value) ? value.join(", ") : value;
} }
private expandedChanged(ev) {
this._expanded = ev.detail.expanded;
}
} }
declare global { declare global {

View File

@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { nextRender } from "../common/util/render-status";
import "./ha-svg-icon"; import "./ha-svg-icon";
@customElement("ha-expansion-panel") @customElement("ha-expansion-panel")
@ -37,17 +38,25 @@ class HaExpansionPanel extends LitElement {
this._container.style.removeProperty("height"); this._container.style.removeProperty("height");
} }
private _toggleContainer(): void { private async _toggleContainer(): Promise<void> {
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; const scrollHeight = this._container.scrollHeight;
this._container.style.height = `${scrollHeight}px`; this._container.style.height = `${scrollHeight}px`;
if (this.expanded) { if (!newExpanded) {
setTimeout(() => { setTimeout(() => {
this._container.style.height = "0px"; this._container.style.height = "0px";
}, 0); }, 0);
} }
this.expanded = !this.expanded; this.expanded = newExpanded;
fireEvent(this, "expanded-changed", { expanded: this.expanded }); fireEvent(this, "expanded-changed", { expanded: this.expanded });
} }
@ -111,5 +120,8 @@ declare global {
"expanded-changed": { "expanded-changed": {
expanded: boolean; expanded: boolean;
}; };
"expanded-will-change": {
expanded: boolean;
};
} }
} }

View File

@ -65,6 +65,7 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
</div> </div>
</div> </div>
<ha-attributes <ha-attributes
hass="[[hass]]"
state-obj="[[stateObj]]" state-obj="[[stateObj]]"
extra-filters="current_position,current_tilt_position" extra-filters="current_position,current_tilt_position"
></ha-attributes> ></ha-attributes>

View File

@ -15,7 +15,10 @@ class MoreInfoDefault extends LitElement {
return html``; return html``;
} }
return html` <ha-attributes .stateObj=${this.stateObj}></ha-attributes> `; return html`<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-attributes>`;
} }
} }

View File

@ -113,6 +113,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
</div> </div>
<ha-attributes <ha-attributes
hass="[[hass]]"
state-obj="[[stateObj]]" state-obj="[[stateObj]]"
extra-filters="percentage_step,speed,preset_mode,preset_modes,speed_list,percentage,oscillating,direction" extra-filters="percentage_step,speed,preset_mode,preset_modes,speed_list,percentage,oscillating,direction"
></ha-attributes> ></ha-attributes>

View File

@ -226,6 +226,7 @@ class MoreInfoLight extends LitElement {
` `
: ""} : ""}
<ha-attributes <ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj} .stateObj=${this.stateObj}
extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,entity_id,supported_color_modes,color_mode" extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,entity_id,supported_color_modes,color_mode"
></ha-attributes> ></ha-attributes>

View File

@ -39,6 +39,7 @@ class MoreInfoLock extends LocalizeMixin(PolymerElement) {
> >
</template> </template>
<ha-attributes <ha-attributes
hass="[[hass]]"
state-obj="[[stateObj]]" state-obj="[[stateObj]]"
extra-filters="code_format" extra-filters="code_format"
></ha-attributes> ></ha-attributes>

View File

@ -24,6 +24,7 @@ class MoreInfoPerson extends LitElement {
return html` return html`
<ha-attributes <ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj} .stateObj=${this.stateObj}
extra-filters="id,user_id,editable" extra-filters="id,user_id,editable"
></ha-attributes> ></ha-attributes>

View File

@ -48,6 +48,7 @@ class MoreInfoRemote extends LitElement {
: ""} : ""}
<ha-attributes <ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj} .stateObj=${this.stateObj}
.extraFilters=${filterExtraAttributes} .extraFilters=${filterExtraAttributes}
></ha-attributes> ></ha-attributes>

View File

@ -18,6 +18,7 @@ class MoreInfoTimer extends LitElement {
return html` return html`
<ha-attributes <ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj} .stateObj=${this.stateObj}
extra-filters="remaining" extra-filters="remaining"
></ha-attributes> ></ha-attributes>

View File

@ -190,6 +190,7 @@ class MoreInfoVacuum extends LitElement {
: ""} : ""}
<ha-attributes <ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj} .stateObj=${this.stateObj}
.extraFilters=${filterExtraAttributes} .extraFilters=${filterExtraAttributes}
></ha-attributes> ></ha-attributes>

View File

@ -522,6 +522,9 @@
"calendar": { "calendar": {
"my_calendars": "My Calendars", "my_calendars": "My Calendars",
"today": "Today" "today": "Today"
},
"attributes": {
"expansion_header": "Attributes"
} }
}, },
"dialogs": { "dialogs": {