Clean up the ZHA pairing UI (#14287)

This commit is contained in:
David F. Mulcahey 2022-11-21 15:20:58 -05:00 committed by GitHub
parent fc80daa3e0
commit 3e2fb09251
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 14 deletions

View File

@ -190,12 +190,19 @@ class ZHAAddDevicesPage extends LitElement {
} }
} }
private _deactivate(): void {
this._active = false;
if (this._addDevicesTimeoutHandle) {
clearTimeout(this._addDevicesTimeoutHandle);
}
}
private _subscribe(): void { private _subscribe(): void {
if (!this.hass) { if (!this.hass) {
return; return;
} }
this._active = true; this._active = true;
const data: any = { type: "zha/devices/permit" }; const data: any = { type: "zha/devices/permit", duration: 254 };
if (this._ieeeAddress) { if (this._ieeeAddress) {
data.ieee = this._ieeeAddress; data.ieee = this._ieeeAddress;
} }
@ -204,8 +211,8 @@ class ZHAAddDevicesPage extends LitElement {
data data
); );
this._addDevicesTimeoutHandle = setTimeout( this._addDevicesTimeoutHandle = setTimeout(
() => this._unsubscribe(), () => this._deactivate(),
120000 254000
); );
} }

View File

@ -73,9 +73,9 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
); );
return html` return html`
<ha-card .header=${this.device.user_given_name || this.device.name}> <ha-card>
<div class="card-content"> <div class="card-content">
<div class="info"> <div>
<div class="model">${this.device.model}</div> <div class="model">${this.device.model}</div>
<div class="manuf"> <div class="manuf">
${this.hass.localize( ${this.hass.localize(
@ -87,15 +87,17 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
</div> </div>
<div class="device-entities"> <div class="device-entities">
${entities.map( ${entities.map((entity) =>
(entity) => html` !entity.disabled_by
<state-badge ? html`
@click=${this._openMoreInfo} <state-badge
.title=${entity.stateName!} @click=${this._openMoreInfo}
.stateObj=${this.hass!.states[entity.entity_id]} .title=${entity.stateName!}
slot="item-icon" .stateObj=${this.hass!.states[entity.entity_id]}
></state-badge> slot="item-icon"
` ></state-badge>
`
: ""
)} )}
</div> </div>
<paper-input <paper-input
@ -226,6 +228,10 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
state-badge { state-badge {
cursor: pointer; cursor: pointer;
} }
ha-card {
border: none;
}
`, `,
]; ];
} }

View File

@ -109,6 +109,13 @@ class ZHADevicePairingStatusCard extends LitElement {
padding: 8px; padding: 8px;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
/* Padding is subtracted for nested elements with border radiuses */
border-top-left-radius: calc(
var(--ha-card-border-radius, 12px) - 2px
);
border-top-right-radius: calc(
var(--ha-card-border-radius, 12px) - 2px
);
} }
.discovered.initialized .header { .discovered.initialized .header {
background: var(--success-color); background: var(--success-color);