Change select camera UI, remove manual QR input (#10844)

src/components/ha-qr-scanner.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-select/mwc-select";
-import type { Select } from "@material/mwc-select/mwc-select";
+import { mdiCamera } from "@mdi/js";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import type QrScanner from "qr-scanner";
@@ -8,6 +8,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { LocalizeFunc } from "../common/translations/localize";
 import "./ha-alert";
+import "./ha-button-menu";
 
 @customElement("ha-qr-scanner")
 class HaQrScanner extends LitElement {
@@ -58,29 +59,37 @@ class HaQrScanner extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html`${this._cameras && this._cameras.length > 1
+    return html`${this._error
-      ? html`<mwc-select
-          .label=${this.localize(
-            "ui.panel.config.zwave_js.add_node.select_camera"
-          )}
-          fixedMenuPosition
-          naturalMenuWidth
-          @closed=${stopPropagation}
-          @selected=${this._cameraChanged}
-        >
-          ${this._cameras!.map(
-            (camera) => html`
-              <mwc-list-item .value=${camera.id}>${camera.label}</mwc-list-item>
-            `
-          )}
-        </mwc-select>`
-      : ""}
-    ${this._error
       ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
       : ""}
     ${navigator.mediaDevices
       ? html`<video></video>
-          <div id="canvas-container"></div>`
+          <div id="canvas-container">
+            ${this._cameras && this._cameras.length > 1
+              ? html`<ha-button-menu
+                  corner="BOTTOM_START"
+                  fixed
+                  @closed=${stopPropagation}
+                >
+                  <ha-icon-button
+                    slot="trigger"
+                    .label=${this.localize(
+                      "ui.panel.config.zwave_js.add_node.select_camera"
+                    )}
+                    .path=${mdiCamera}
+                  ></ha-icon-button>
+                  ${this._cameras!.map(
+                    (camera) => html`
+                      <mwc-list-item
+                        .value=${camera.id}
+                        @click=${this._cameraChanged}
+                        >${camera.label}</mwc-list-item
+                      >
+                    `
+                  )}
+                </ha-button-menu>`
+              : ""}
+          </div>`
       : html`<ha-alert alert-type="warning"
           >${!window.isSecureContext
             ? "You can only use your camera to scan a QR core when using HTTPS."
@@ -135,16 +144,23 @@ class HaQrScanner extends LitElement {
   };
 
   private _cameraChanged(ev: CustomEvent): void {
-    this._qrScanner?.setCamera((ev.target as Select).value);
+    this._qrScanner?.setCamera((ev.target as any).value);
   }
 
   static styles = css`
     canvas {
       width: 100%;
     }
-    mwc-select {
+    #canvas-container {
-      width: 100%;
+      position: relative;
-      margin-bottom: 16px;
+    }
+    ha-button-menu {
+      position: absolute;
+      bottom: 8px;
+      right: 8px;
+      background: #727272b2;
+      color: white;
+      border-radius: 50%;
     }
   `;
 }

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import type { TextField } from "@material/mwc-textfield/mwc-textfield";
 import "@material/mwc-textfield/mwc-textfield";
 import { mdiAlertCircle, mdiCheckCircle, mdiQrcodeScan } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
@@ -183,17 +182,9 @@ class DialogZWaveJSAddNode extends LitElement {
                 .localize=${this.hass.localize}
                 @qr-code-scanned=${this._qrCodeScanned}
               ></ha-qr-scanner>
-              <p>
+              <mwc-button slot="secondaryAction" @click=${this._startOver}>
-                If scanning doesn't work, you can enter the QR code value
+                ${this.hass.localize("ui.panel.config.zwave_js.common.back")}
-                manually:
+              </mwc-button>`
-              </p>
-              <mwc-textfield
-                .label=${this.hass.localize(
-                  "ui.panel.config.zwave_js.add_node.enter_qr_code"
-                )}
-                .disabled=${this._qrProcessing}
-                @keydown=${this._qrKeyDown}
-              ></mwc-textfield>`
           : this._status === "validate_dsk_enter_pin"
           ? html`
                 <p>
@@ -274,7 +265,7 @@ class DialogZWaveJSAddNode extends LitElement {
                 We have not found any device in inclusion mode. Make sure the
                 device is active and in inclusion mode.
               </p>
-              <mwc-button slot="primaryAction" @click=${this._startInclusion}>
+              <mwc-button slot="primaryAction" @click=${this._startOver}>
                 Retry
               </mwc-button>
             `
@@ -373,7 +364,7 @@ class DialogZWaveJSAddNode extends LitElement {
                 </div>
               </div>
               <mwc-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.panel.config.zwave_js.common.close")}
+                ${this.hass.localize("ui.common.close")}
               </mwc-button>
             `
           : this._status === "failed"
@@ -510,15 +501,6 @@ class DialogZWaveJSAddNode extends LitElement {
     this._status = "qr_scan";
   }
 
-  private _qrKeyDown(ev: KeyboardEvent) {
-    if (this._qrProcessing) {
-      return;
-    }
-    if (ev.key === "Enter") {
-      this._handleQrCodeScanned((ev.target as TextField).value);
-    }
-  }
-
   private _qrCodeScanned(ev: CustomEvent): void {
     if (this._qrProcessing) {
       return;
@@ -574,11 +556,7 @@ class DialogZWaveJSAddNode extends LitElement {
       }
     } else if (provisioningInfo.version === 0) {
       this._inclusionStrategy = InclusionStrategy.Security_S2;
-      // this._startInclusion(provisioningInfo);
+      this._startInclusion(provisioningInfo);
-      this._startInclusion(undefined, undefined, {
-        dsk: "34673-15546-46480-39591-32400-22155-07715-45994",
-        security_classes: [0, 1, 7],
-      });
     } else {
       this._error = "This QR code is not supported";
       this._status = "failed";
@@ -636,6 +614,11 @@ class DialogZWaveJSAddNode extends LitElement {
         ZWaveFeature.SmartStart
       )
     ).supported;
+    this._supportsSmartStart = true;
+  }
+
+  private _startOver(_ev: Event) {
+    this._startInclusion();
   }
 
   private _startInclusion(

src/translations/en.json

@@ -2851,7 +2851,7 @@
             "node_id": "Device ID",
             "home_id": "Home ID",
             "source": "Source",
-            "close": "Close",
+            "back": "Back",
             "add_node": "Add device",
             "remove_node": "Remove device",
             "reconfigure_server": "Re-configure Server",