mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
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:
parent
28703b39da
commit
3c6be8cf99
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user