Skip to content

Commit

Permalink
Replace paper-listbox in zone area (#19955)
Browse files Browse the repository at this point in the history
* ha-config-zone

* Fixes

* add selected event back

* Fixes

* remove leftover paper-item css rule

* Fixup merge conflict
  • Loading branch information
silamon authored Apr 14, 2024
1 parent 919befa commit 27c53b3
Showing 1 changed file with 57 additions and 65 deletions.
122 changes: 57 additions & 65 deletions src/panels/config/zone/ha-config-zone.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import "@material/mwc-list/mwc-list";
import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-listbox/paper-listbox";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import {
Expand Down Expand Up @@ -48,6 +46,8 @@ import type { HomeAssistant, Route } from "../../../types";
import "../ha-config-section";
import { configSections } from "../ha-panel-config";
import { showZoneDetailDialog } from "./show-dialog-zone-detail";
import "../../../components/ha-list-item";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
import { showHomeZoneDetailDialog } from "./show-dialog-home-zone-detail";

@customElement("ha-config-zone")
Expand Down Expand Up @@ -145,50 +145,54 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
</div>
`
: html`
<paper-listbox
attr-for-selected="data-id"
.selected=${this._activeEntry || ""}
>
<mwc-list>
${this._storageItems.map(
(entry) => html`
<paper-icon-item
data-id=${entry.id}
@click=${this._itemClicked}
<ha-list-item
.entry=${entry}
graphic="icon"
.hasMeta=${!this.narrow}
@request-selected=${this._itemClicked}
.value=${entry.id}
?selected=${this._activeEntry === entry.id}
>
<ha-icon .icon=${entry.icon} slot="item-icon"></ha-icon>
<paper-item-body>${entry.name}</paper-item-body>
<ha-icon .icon=${entry.icon} slot="graphic"></ha-icon>
${entry.name}
${!this.narrow
? html`
<ha-icon-button
.entry=${entry}
@click=${this._openEditEntry}
.path=${mdiPencil}
.label=${hass.localize(
"ui.panel.config.zone.edit_zone"
)}
></ha-icon-button>
<div slot="meta">
<ha-icon-button
.entry=${entry}
@click=${this._openEditEntry}
.path=${mdiPencil}
.label=${hass.localize(
"ui.panel.config.zone.edit_zone"
)}
></ha-icon-button>
</div>
`
: ""}
</paper-icon-item>
</ha-list-item>
`
)}
${this._stateItems.map(
(stateObject) => html`
<paper-icon-item
data-id=${stateObject.entity_id}
@click=${this._stateItemClicked}
<ha-list-item
graphic="icon"
hasMeta
.value=${stateObject.entity_id}
@request-selected=${this._stateItemClicked}
?selected=${this._activeEntry === stateObject.entity_id}
>
<ha-icon
.icon=${stateObject.attributes.icon}
slot="item-icon"
slot="graphic"
>
</ha-icon>
<paper-item-body>
${stateObject.attributes.friendly_name ||
stateObject.entity_id}
</paper-item-body>
<div style="display:inline-block">
${stateObject.attributes.friendly_name ||
stateObject.entity_id}
<div slot="meta">
<ha-icon-button
.entityId=${stateObject.entity_id}
.noEdit=${stateObject.entity_id !== "zone.home" ||
Expand All @@ -212,10 +216,10 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
`
: ""}
</div>
</paper-icon-item>
</ha-list-item>
`
)}
</paper-listbox>
</mwc-list>
`;

return html`
Expand Down Expand Up @@ -377,20 +381,28 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
this._openDialog();
}

private _itemClicked(ev: Event) {
private _itemClicked(ev: CustomEvent) {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}

if (this.narrow) {
this._openEditEntry(ev);
return;
}
const entry: Zone = (ev.currentTarget! as any).entry;
this._zoomZone(entry.id);
const entryId: string = (ev.currentTarget! as any).value;
this._zoomZone(entryId);
this._activeEntry = entryId;
}

private _stateItemClicked(ev: Event) {
const entityId = (ev.currentTarget! as HTMLElement).getAttribute(
"data-id"
)!;
this._zoomZone(entityId);
private _stateItemClicked(ev: CustomEvent) {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}

const entryId: string = (ev.currentTarget! as any).value;
this._zoomZone(entryId);
this._activeEntry = entryId;
}

private async _zoomZone(id: string) {
Expand All @@ -400,6 +412,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
private _openEditEntry(ev: Event) {
const entry: Zone = (ev.currentTarget! as any).entry;
this._openDialog(entry);
ev.stopPropagation();
}

private async _editHomeZone(ev) {
Expand Down Expand Up @@ -497,6 +510,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
}
ha-list-item {
--mdc-list-item-meta-size: 48px;
}
a {
color: var(--primary-color);
}
Expand Down Expand Up @@ -527,40 +543,16 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
flex-grow: 1;
height: 100%;
}
.flex paper-listbox,
.flex mwc-list,
.flex .empty {
border-left: 1px solid var(--divider-color);
width: 250px;
min-height: 100%;
box-sizing: border-box;
}
paper-icon-item {
padding-top: 4px;
padding-bottom: 4px;
cursor: pointer;
}
.overflow paper-icon-item:last-child {
margin-bottom: 80px;
}
paper-icon-item.iron-selected:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
content: "";
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
transition: opacity 15ms linear;
will-change: opacity;
}
ha-card {
margin-bottom: 100px;
}
ha-card paper-item {
cursor: pointer;
}
`;
}
}
Expand Down

0 comments on commit 27c53b3

Please sign in to comment.