Improve matter share device dialog (#19693)

* Improve matter share device dialog * Add border * Update dialog-matter-open-commissioning-window.ts
home-assistant · Feb 5, 2024 · 2ba3a99 · 2ba3a99
1 parent 55c6d3a
commit 2ba3a99
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 25 deletions.
diff --git a/.../config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts b/.../config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts
@@ -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;
+        }
       `,
     ];
   }

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -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": {