jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace paper-items in Scene Editor (#18101)

Browse Source
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
1 changed files with 64 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/panels/config/scene/ha-scene-editor.ts
View File

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