jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +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

79
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>
<mwc-list>
${device.entities.map((entityId) => { ${device.entities.map((entityId) => {
const entityStateObj = this.hass.states[entityId]; const entityStateObj = this.hass.states[entityId];
if (!entityStateObj) { if (!entityStateObj) {
return nothing; return nothing;
} }
return html` return html`
<paper-icon-item <ha-list-item
hasMeta
graphic="icon"
.entityId=${entityId} .entityId=${entityId}
@click=${this._showMoreInfo} @click=${this._showMoreInfo}
class="device-entity"
> >
<state-badge <state-badge
.stateObj=${entityStateObj} .stateObj=${entityStateObj}
slot="item-icon" slot="graphic"
></state-badge> ></state-badge>
<paper-item-body>
${computeStateName(entityStateObj)} ${computeStateName(entityStateObj)}
</paper-item-body> </ha-list-item>
</paper-icon-item>
`; `;
})} })}
</mwc-list>
</ha-card> </ha-card>
` `
)} )}
@ -402,6 +401,7 @@ export class HaSceneEditor extends SubscribeMixin(
"ui.panel.config.scene.editor.entities.without_device" "ui.panel.config.scene.editor.entities.without_device"
)} )}
> >
<mwc-list>
${entities.map((entityId) => { ${entities.map((entityId) => {
const entityStateObj = const entityStateObj =
this.hass.states[entityId]; this.hass.states[entityId];
@ -409,18 +409,18 @@ export class HaSceneEditor extends SubscribeMixin(
return nothing; return nothing;
} }
return html` return html`
<paper-icon-item <ha-list-item
hasMeta
graphic="icon"
.entityId=${entityId} .entityId=${entityId}
@click=${this._showMoreInfo} @click=${this._showMoreInfo}
class="device-entity"
> >
<state-badge <state-badge
.stateObj=${entityStateObj} .stateObj=${entityStateObj}
slot="item-icon" slot="graphic"
></state-badge> ></state-badge>
<paper-item-body>
${computeStateName(entityStateObj)} ${computeStateName(entityStateObj)}
</paper-item-body> <div slot="meta">
<ha-icon-button <ha-icon-button
.path=${mdiDelete} .path=${mdiDelete}
.entityId=${entityId} .entityId=${entityId}
@ -429,9 +429,11 @@ export class HaSceneEditor extends SubscribeMixin(
)} )}
@click=${this._deleteEntity} @click=${this._deleteEntity}
></ha-icon-button> ></ha-icon-button>
</paper-icon-item> </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;
}
`, `,
]; ];
} }