Replace paper-items in Scene Editor (#18101)

This commit is contained in:
Simon Lamon 2023-10-09 14:29:58 +02:00 committed by GitHub
parent bf9e2cd404
commit 63095f1501
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,14 +1,11 @@
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-list/mwc-list";
import {
mdiContentDuplicate,
mdiContentSave,
mdiDelete,
mdiDotsVertical,
} from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { HassEvent } from "home-assistant-js-websocket";
import {
css,
@ -35,6 +32,7 @@ import "../../../components/ha-card";
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-picker";
import "../../../components/ha-list-item";
import "../../../components/ha-svg-icon";
import "../../../components/ha-textfield";
import {
@ -238,7 +236,7 @@ export class HaSceneEditor extends SubscribeMixin(
.path=${mdiDotsVertical}
></ha-icon-button>
<mwc-list-item .disabled=${!this.sceneId} graphic="icon">
<ha-list-item .disabled=${!this.sceneId} graphic="icon">
${this.hass.localize(
"ui.panel.config.scene.picker.duplicate_scene"
)}
@ -246,9 +244,9 @@ export class HaSceneEditor extends SubscribeMixin(
slot="graphic"
.path=${mdiContentDuplicate}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item
<ha-list-item
.disabled=${!this.sceneId}
class=${classMap({ warning: Boolean(this.sceneId) })}
graphic="icon"
@ -260,7 +258,7 @@ export class HaSceneEditor extends SubscribeMixin(
.path=${mdiDelete}
>
</ha-svg-icon>
</mwc-list-item>
</ha-list-item>
</ha-button-menu>
${this._errors ? html` <div class="errors">${this._errors}</div> ` : ""}
<div
@ -337,27 +335,28 @@ export class HaSceneEditor extends SubscribeMixin(
@click=${this._deleteDevice}
></ha-icon-button>
</h1>
${device.entities.map((entityId) => {
const entityStateObj = this.hass.states[entityId];
if (!entityStateObj) {
return nothing;
}
return html`
<paper-icon-item
.entityId=${entityId}
@click=${this._showMoreInfo}
class="device-entity"
>
<state-badge
.stateObj=${entityStateObj}
slot="item-icon"
></state-badge>
<paper-item-body>
<mwc-list>
${device.entities.map((entityId) => {
const entityStateObj = this.hass.states[entityId];
if (!entityStateObj) {
return nothing;
}
return html`
<ha-list-item
hasMeta
graphic="icon"
.entityId=${entityId}
@click=${this._showMoreInfo}
>
<state-badge
.stateObj=${entityStateObj}
slot="graphic"
></state-badge>
${computeStateName(entityStateObj)}
</paper-item-body>
</paper-icon-item>
`;
})}
</ha-list-item>
`;
})}
</mwc-list>
</ha-card>
`
)}
@ -402,36 +401,39 @@ export class HaSceneEditor extends SubscribeMixin(
"ui.panel.config.scene.editor.entities.without_device"
)}
>
${entities.map((entityId) => {
const entityStateObj =
this.hass.states[entityId];
if (!entityStateObj) {
return nothing;
}
return html`
<paper-icon-item
.entityId=${entityId}
@click=${this._showMoreInfo}
class="device-entity"
>
<state-badge
.stateObj=${entityStateObj}
slot="item-icon"
></state-badge>
<paper-item-body>
${computeStateName(entityStateObj)}
</paper-item-body>
<ha-icon-button
.path=${mdiDelete}
<mwc-list>
${entities.map((entityId) => {
const entityStateObj =
this.hass.states[entityId];
if (!entityStateObj) {
return nothing;
}
return html`
<ha-list-item
hasMeta
graphic="icon"
.entityId=${entityId}
.label=${this.hass.localize(
"ui.panel.config.scene.editor.entities.delete"
)}
@click=${this._deleteEntity}
></ha-icon-button>
</paper-icon-item>
`;
})}
@click=${this._showMoreInfo}
>
<state-badge
.stateObj=${entityStateObj}
slot="graphic"
></state-badge>
${computeStateName(entityStateObj)}
<div slot="meta">
<ha-icon-button
.path=${mdiDelete}
.entityId=${entityId}
.label=${this.hass.localize(
"ui.panel.config.scene.editor.entities.delete"
)}
@click=${this._deleteEntity}
></ha-icon-button>
</div>
</ha-list-item>
`;
})}
</mwc-list>
</ha-card>
`
: ""}
@ -966,35 +968,6 @@ export class HaSceneEditor extends SubscribeMixin(
ha-config-section:last-child {
padding-bottom: 20px;
}
.triggers,
.script {
margin-top: -16px;
}
.triggers ha-card,
.script ha-card {
margin-top: 16px;
}
.add-card mwc-button {
display: block;
text-align: center;
}
.card-menu {
position: absolute;
top: 0;
right: 0;
z-index: 1;
color: var(--primary-text-color);
}
.rtl .card-menu {
right: auto;
left: 0;
}
.card-menu paper-item {
cursor: pointer;
}
paper-icon-item {
padding: 8px 16px;
}
ha-card ha-icon-button {
color: var(--secondary-text-color);
}
@ -1003,9 +976,6 @@ export class HaSceneEditor extends SubscribeMixin(
position: relative;
top: -8px;
}
.device-entity {
cursor: pointer;
}
span[slot="introduction"] a {
color: var(--primary-color);
}
@ -1029,6 +999,11 @@ export class HaSceneEditor extends SubscribeMixin(
ha-textfield {
display: block;
}
div[slot="meta"] {
display: flex;
justify-content: center;
align-items: center;
}
`,
];
}