Fix visibility for shown entities on device card (#22579)

* Update ha-device-entities-card.ts

* Update ha-device-entities-card.ts

* Update src/panels/config/devices/device-detail/ha-device-entities-card.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Update ha-device-entities-card.ts

* Update src/panels/config/devices/device-detail/ha-device-entities-card.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Update ha-device-entities-card.ts

* Update src/panels/config/devices/device-detail/ha-device-entities-card.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Update ha-device-entities-card.ts

* Update ha-device-entities-card.ts

---------

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
ildar170975 2024-11-13 09:56:58 +03:00 committed by GitHub
parent 28703b39da
commit 3c6be8cf99
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,7 +1,8 @@
import "@material/mwc-list/mwc-list"; import "@material/mwc-list/mwc-list";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { until } from "lit/directives/until"; import { until } from "lit/directives/until";
import { computeStateName } from "../../../../common/entity/compute_state_name"; import { computeStateName } from "../../../../common/entity/compute_state_name";
import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefix_from_entity_name"; import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefix_from_entity_name";
@ -86,36 +87,42 @@ export class HaDeviceEntitiesCard extends LitElement {
return html` return html`
<ha-card outlined .header=${this.header}> <ha-card outlined .header=${this.header}>
<div id="entities"> ${shownEntities.length
<mwc-list> ? html`
${shownEntities.map((entry) => <div id="entities" class="move-up">
this.hass.states[entry.entity_id]
? this._renderEntity(entry)
: this._renderEntry(entry)
)}
</mwc-list>
</div>
${hiddenEntities.length
? !this.showHidden
? html`
<button class="show-more" @click=${this._toggleShowHidden}>
${this.hass.localize(
"ui.panel.config.devices.entities.hidden_entities",
{ count: hiddenEntities.length }
)}
</button>
`
: html`
<mwc-list> <mwc-list>
${hiddenEntities.map((entry) => this._renderEntry(entry))} ${shownEntities.map((entry) =>
</mwc-list> this.hass.states[entry.entity_id]
<button class="show-more" @click=${this._toggleShowHidden}> ? this._renderEntity(entry)
${this.hass.localize( : this._renderEntry(entry)
"ui.panel.config.devices.entities.show_less"
)} )}
</button> </mwc-list>
` </div>
: ""} `
: nothing}
${hiddenEntities.length
? html`<div class=${classMap({ "move-up": !shownEntities.length })}>
${!this.showHidden
? html`
<button class="show-more" @click=${this._toggleShowHidden}>
${this.hass.localize(
"ui.panel.config.devices.entities.hidden_entities",
{ count: hiddenEntities.length }
)}
</button>
`
: html`
<mwc-list>
${hiddenEntities.map((entry) => this._renderEntry(entry))}
</mwc-list>
<button class="show-more" @click=${this._toggleShowHidden}>
${this.hass.localize(
"ui.panel.config.devices.entities.show_less"
)}
</button>
`}
</div>`
: nothing}
<div class="card-actions"> <div class="card-actions">
<mwc-button @click=${this._addToLovelaceView}> <mwc-button @click=${this._addToLovelaceView}>
${this.hass.localize( ${this.hass.localize(
@ -257,8 +264,8 @@ export class HaDeviceEntitiesCard extends LitElement {
.disabled-entry { .disabled-entry {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
#entities { .move-up {
margin-top: -24px; /* match the spacing between card title and content of the device info card above it */ margin-top: -24px;
} }
#entities > * { #entities > * {
margin: 8px 16px 8px 8px; margin: 8px 16px 8px 8px;