mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 02:46:38 +00:00
Put attributes in more-info into a foldable section (#9220)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
0eca602e61
commit
1026e90296
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -522,6 +522,9 @@
|
|||||||
"calendar": {
|
"calendar": {
|
||||||
"my_calendars": "My Calendars",
|
"my_calendars": "My Calendars",
|
||||||
"today": "Today"
|
"today": "Today"
|
||||||
|
},
|
||||||
|
"attributes": {
|
||||||
|
"expansion_header": "Attributes"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dialogs": {
|
"dialogs": {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user