jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve matter ping dialog (#19715)

Browse Source
This commit is contained in:
Bram Kragten 2024-02-07 15:52:04 +01:00
parent 297c721229
commit 6671d24fa6
1 changed files with 27 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts
View File

@ -1,12 +1,12 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-circular-progress"; import "../../../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../../../components/ha-dialog"; import { createCloseHeading } from "../../../../../components/ha-dialog";
import { pingMatterNode, MatterPingResult } from "../../../../../data/matter"; import { pingMatterNode, MatterPingResult } from "../../../../../data/matter";
import { haStyleDialog } from "../../../../../resources/styles"; import { haStyle, haStyleDialog } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types"; import { HomeAssistant } from "../../../../../types";
import { MatterPingNodeDialogParams } from "./show-dialog-matter-ping-node"; import { MatterPingNodeDialogParams } from "./show-dialog-matter-ping-node";
@ -40,33 +40,24 @@ class DialogMatterPingNode extends LitElement {
> >
${this._pingResult ${this._pingResult
? html` ? html`
<div class="flex-container"> <h2>
<ha-svg-icon ${this.hass.localize(
.path=${mdiCheckCircle} "ui.panel.config.matter.ping_node.ping_complete"
class="success" )}
></ha-svg-icon> </h2>
<div class="status"> <mwc-list>
<p> ${Object.entries(this._pingResult).map(
${this.hass.localize( ([ip, success]) =>
"ui.panel.config.matter.ping_node.ping_complete" html`<ha-list-item hasMeta noninteractive
)} >${ip}
</p> <ha-svg-icon
</div> slot="meta"
</div> .path=${success ? mdiCheckCircle : mdiAlertCircle}
<div> class=${success ? "success" : "failed"}
<mwc-list> ></ha-svg-icon>
${Object.entries(this._pingResult).map( </ha-list-item>`
([ip, success]) => )}
html`<ha-list-item hasMeta </mwc-list>
>${ip}
<ha-icon
slot="meta"
icon=${success ? "mdi:check" : "mdi:close"}
></ha-icon>
</ha-list-item>`
)}
</mwc-list>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}> <mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")} ${this.hass.localize("ui.common.close")}
</mwc-button> </mwc-button>
@ -146,12 +137,12 @@ class DialogMatterPingNode extends LitElement {
public closeDialog(): void { public closeDialog(): void {
this.device_id = undefined; this.device_id = undefined;
this._status = undefined; this._status = undefined;
this._pingResult = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle,
haStyleDialog, haStyleDialog,
css` css`
.success { .success {
@ -171,23 +162,22 @@ class DialogMatterPingNode extends LitElement {
margin-top: 16px; margin-top: 16px;
} }
.stage ha-svg-icon {
width: 16px;
height: 16px;
}
.stage { .stage {
padding: 8px; padding: 8px;
} }
ha-svg-icon { mwc-list {
width: 68px; --mdc-list-side-padding: 0;
height: 48px;
} }
.flex-container ha-circular-progress, .flex-container ha-circular-progress,
.flex-container ha-svg-icon { .flex-container ha-svg-icon {
margin-right: 20px; margin-right: 20px;
} }
.flex-container ha-svg-icon {
width: 68px;
height: 48px;
}
`, `,
]; ];
} }