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

Improve matter share device dialog (#19693)

Browse Source 
* Improve matter share device dialog

* Add border

* Update dialog-matter-open-commissioning-window.ts
This commit is contained in:
Bram Kragten 2024-02-05 18:15:10 +01:00 committed by GitHub
parent 55c6d3a7c4
commit 2ba3a991a9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts
View File

@ -1,18 +1,21 @@
import "@material/mwc-button/mwc-button";
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { mdiCloseCircle } from "@mdi/js";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-circular-progress";
import "../../../../../components/ha-qr-code";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-qr-code";
import { domainToName } from "../../../../../data/integration";
import {
openMatterCommissioningWindow,
MatterCommissioningParameters,
openMatterCommissioningWindow,
} from "../../../../../data/matter";
import { haStyleDialog } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types";
import { brandsUrl } from "../../../../../util/brands-url";
import { MatterOpenCommissioningWindowDialogParams } from "./show-dialog-matter-open-commissioning-window";
import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
@customElement("dialog-matter-open-commissioning-window")
class DialogMatterOpenCommissioningWindow extends LitElement {
@ -52,28 +55,46 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
${this.hass.localize(
"ui.panel.config.matter.open_commissioning_window.success"
)}
<br />
${this.hass.localize(
"ui.panel.config.matter.open_commissioning_window.scan_code"
)}
</p>
<div class="flex-container">
<ha-svg-icon
.path=${mdiCheckCircle}
class="success"
></ha-svg-icon>
<div class="status">
<p>
${this.hass.localize(
"ui.panel.config.matter.open_commissioning_window.sharing_code"
)}: <b>${this._commissionParams.setup_manual_code}</b>
</p>
<div class="sharing-code-container">
<div class="sharing-code">
<img
crossorigin="anonymous"
referrerpolicy="no-referrer"
alt=${domainToName(this.hass.localize, "matter")}
src=${brandsUrl({
domain: "matter",
type: "logo",
darkOptimized: this.hass.themes?.darkMode,
})}
/>
<ha-qr-code
.data=${this._commissionParams.setup_qr_code}
errorCorrectionLevel="quartile"
scale="6"
margin="1"
></ha-qr-code>
<span class="code"
>${this._commissionParams.setup_manual_code.substring(
0,
4
)}-${this._commissionParams.setup_manual_code.substring(
4,
7
)}-${this._commissionParams.setup_manual_code.substring(
7
)}</span
>
</div>
</div>
<ha-qr-code
.data=${this._commissionParams.setup_qr_code}
errorCorrectionLevel="quartile"
scale="6"
></ha-qr-code>
<div></div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
<mwc-button slot="primaryAction" @click=${this._copyCode}>
${this.hass.localize(
"ui.panel.config.matter.open_commissioning_window.copy_code"
)}
</mwc-button>
`
: this._status === "started"
@ -145,9 +166,18 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
}
}
private async _copyCode() {
if (!this._commissionParams) {
return;
}
await copyToClipboard(this._commissionParams.setup_manual_code);
this.closeDialog();
}
public closeDialog(): void {
this.device_id = undefined;
this._status = undefined;
this._commissionParams = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
@ -193,6 +223,30 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
.flex-container ha-svg-icon {
margin-right: 20px;
}
.sharing-code-container {
display: flex;
justify-content: center;
padding-top: 16px;
}
.sharing-code {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
border-radius: 16px;
padding: 16px;
}
.sharing-code img {
width: 160px;
margin-bottom: 8px;
}
.code {
font-family: monospace;
}
`,
];
}

5
src/translations/en.json
View File

@ -4662,8 +4662,9 @@
"start_commissioning": "Share device",
"in_progress": "We're communicating with the device. This may take some time.",
"failed": "The command failed. Additional information may be available in the logs.",
"success": "Your device can now be added to another Matter controller, scan the QR code below or enter the sharing code in the app of the controller you want to add your device to.",
"sharing_code": "Sharing code"
"success": "Your device is ready to be added to another Matter platform.",
"scan_code": "With their app, scan the QR code or enter the sharing code below to finish set up.",
"copy_code": "Copy code"
}
},
"tips": {