Replace paper-items from ha-config-area-page (#17550)

This commit is contained in:
Simon Lamon 2023-08-14 09:44:13 +02:00 committed by GitHub
parent c561df70dd
commit 67441a63b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,7 +1,6 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@material/mwc-list";
import { mdiImagePlus, mdiPencil } from "@mdi/js"; import { mdiImagePlus, mdiPencil } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { import {
HassEntity, HassEntity,
UnsubscribeFunc, UnsubscribeFunc,
@ -53,6 +52,7 @@ import {
loadAreaRegistryDetailDialog, loadAreaRegistryDetailDialog,
showAreaRegistryDetailDialog, showAreaRegistryDetailDialog,
} from "./show-dialog-area-registry-detail"; } from "./show-dialog-area-registry-detail";
import "../../../components/ha-list-item";
declare type NameAndEntity<EntityType extends HassEntity> = { declare type NameAndEntity<EntityType extends HassEntity> = {
name: string; name: string;
@ -282,22 +282,24 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
outlined outlined
.header=${this.hass.localize("ui.panel.config.devices.caption")} .header=${this.hass.localize("ui.panel.config.devices.caption")}
>${devices.length >${devices.length
? devices.map( ? html`<mwc-list>
(device) => html` ${devices.map(
<a href="/config/devices/device/${device.id}"> (device) => html`
<paper-item> <a href="/config/devices/device/${device.id}">
<paper-item-body> ${device.name} </paper-item-body> <ha-list-item hasMeta>
<ha-icon-next></ha-icon-next> <span>${device.name}</span>
</paper-item> <ha-icon-next slot="meta"></ha-icon-next>
</a> </ha-list-item>
` </a>
) `
)}
</mwc-list>`
: html` : html`
<paper-item class="no-link" <div class="no-entries">
>${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.no_devices" "ui.panel.config.devices.no_devices"
)}</paper-item )}
> </div>
`} `}
</ha-card> </ha-card>
<ha-card <ha-card
@ -307,27 +309,30 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
)} )}
> >
${entities.length ${entities.length
? entities.map((entity) => ? html`<mwc-list>
["scene", "script", "automation"].includes( ${entities.map((entity) =>
computeDomain(entity.entity_id) ["scene", "script", "automation"].includes(
) computeDomain(entity.entity_id)
? "" )
: html` ? ""
<paper-item : html`
@click=${this._openEntity} <ha-list-item
.entity=${entity} @click=${this._openEntity}
> .entity=${entity}
<paper-item-body> ${entity.name} </paper-item-body> hasMeta
<ha-icon-next></ha-icon-next> >
</paper-item> <span>${entity.name}</span>
` <ha-icon-next slot="meta"></ha-icon-next>
) </ha-list-item>
`
)}</mwc-list
>`
: html` : html`
<paper-item class="no-link" <div class="no-entries">
>${this.hass.localize( ${this.hass.localize(
"ui.panel.config.areas.editor.no_linked_entities" "ui.panel.config.areas.editor.no_linked_entities"
)}</paper-item )}
> </div>
`} `}
</ha-card> </ha-card>
</div> </div>
@ -346,12 +351,14 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
"ui.panel.config.areas.assigned_to_area" "ui.panel.config.areas.assigned_to_area"
)}: )}:
</h3> </h3>
${groupedAutomations.map((automation) => <mwc-list>
this._renderAutomation( ${groupedAutomations.map((automation) =>
automation.name, this._renderAutomation(
automation.entity automation.name,
) automation.entity
)}` )
)}</mwc-list
>`
: ""} : ""}
${relatedAutomations?.length ${relatedAutomations?.length
? html`<h3> ? html`<h3>
@ -359,20 +366,22 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
"ui.panel.config.areas.targeting_area" "ui.panel.config.areas.targeting_area"
)}: )}:
</h3> </h3>
${relatedAutomations.map((automation) => <mwc-list>
this._renderAutomation( ${relatedAutomations.map((automation) =>
automation.name, this._renderAutomation(
automation.entity automation.name,
) automation.entity
)}` )
)}</mwc-list
>`
: ""} : ""}
${!groupedAutomations?.length && !relatedAutomations?.length ${!groupedAutomations?.length && !relatedAutomations?.length
? html` ? html`
<paper-item class="no-link" <div class="no-entries">
>${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.automation.no_automations" "ui.panel.config.devices.automation.no_automations"
)}</paper-item )}
> </div>
` `
: ""} : ""}
</ha-card> </ha-card>
@ -392,9 +401,11 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
"ui.panel.config.areas.assigned_to_area" "ui.panel.config.areas.assigned_to_area"
)}: )}:
</h3> </h3>
${groupedScenes.map((scene) => <mwc-list>
this._renderScene(scene.name, scene.entity) ${groupedScenes.map((scene) =>
)}` this._renderScene(scene.name, scene.entity)
)}</mwc-list
>`
: ""} : ""}
${relatedScenes?.length ${relatedScenes?.length
? html`<h3> ? html`<h3>
@ -402,17 +413,19 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
"ui.panel.config.areas.targeting_area" "ui.panel.config.areas.targeting_area"
)}: )}:
</h3> </h3>
${relatedScenes.map((scene) => <mwc-list>
this._renderScene(scene.name, scene.entity) ${relatedScenes.map((scene) =>
)}` this._renderScene(scene.name, scene.entity)
)}</mwc-list
>`
: ""} : ""}
${!groupedScenes?.length && !relatedScenes?.length ${!groupedScenes?.length && !relatedScenes?.length
? html` ? html`
<paper-item class="no-link" <div class="no-entries">
>${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.scene.no_scenes" "ui.panel.config.devices.scene.no_scenes"
)}</paper-item )}
> </div>
` `
: ""} : ""}
</ha-card> </ha-card>
@ -448,11 +461,11 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
: ""} : ""}
${!groupedScripts?.length && !relatedScripts?.length ${!groupedScripts?.length && !relatedScripts?.length
? html` ? html`
<paper-item class="no-link" <div class="no-entries">
>${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.script.no_scripts" "ui.panel.config.devices.script.no_scripts"
)}</paper-item )}
> </div>
` `
: ""} : ""}
</ha-card> </ha-card>
@ -545,10 +558,10 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
: undefined : undefined
)} )}
> >
<paper-item .disabled=${!entityState.attributes.id}> <ha-list-item .disabled=${!entityState.attributes.id} hasMeta>
<paper-item-body> ${name} </paper-item-body> <span>${name}</span>
<ha-icon-next></ha-icon-next> <ha-icon-next slot="meta"></ha-icon-next>
</paper-item> </ha-list-item>
</a> </a>
${!entityState.attributes.id ${!entityState.attributes.id
? html` ? html`
@ -569,10 +582,10 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
: undefined : undefined
)} )}
> >
<paper-item .disabled=${!entityState.attributes.id}> <ha-list-item .disabled=${!entityState.attributes.id} hasMeta>
<paper-item-body> ${name} </paper-item-body> <span>${name}</span>
<ha-icon-next></ha-icon-next> <ha-icon-next slot="meta"></ha-icon-next>
</paper-item> </ha-list-item>
</a> </a>
${!entityState.attributes.id ${!entityState.attributes.id
? html` ? html`
@ -593,10 +606,10 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
url = `/config/script/edit/${entry.unique_id}`; url = `/config/script/edit/${entry.unique_id}`;
} }
return html`<a href=${url}> return html`<a href=${url}>
<paper-item> <ha-list-item hasMeta>
<paper-item-body> ${name} </paper-item-body> <span>${name}</span>
<ha-icon-next></ha-icon-next> <ha-icon-next slot="meta"></ha-icon-next>
</paper-item> </ha-list-item>
</a>`; </a>`;
} }
@ -696,20 +709,11 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
margin-top: 0; margin-top: 0;
} }
paper-item {
cursor: pointer;
font-size: var(--paper-font-body1_-_font-size);
}
a { a {
text-decoration: none; text-decoration: none;
color: var(--primary-text-color); color: var(--primary-text-color);
} }
paper-item.no-link {
cursor: default;
}
ha-card > a:first-child { ha-card > a:first-child {
display: block; display: block;
} }
@ -744,6 +748,11 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
height: 235px; height: 235px;
overflow: auto; overflow: auto;
} }
.no-entries {
text-align: center;
padding: 16px;
color: var(--secondary-text-color);
}
`, `,
]; ];
} }