mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 00:06:35 +00:00
Replace paper-items in Scene Editor (#18101)
This commit is contained in:
parent
bf9e2cd404
commit
63095f1501
@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user