Improve QR Code pairing instructions

fttx · Apr 27, 2021 · 49af034 · 49af034
1 parent 658a109
commit 49af034
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/ionic/src/pages/home/pop-over-qrcode.html b/ionic/src/pages/home/pop-over-qrcode.html
@@ -11,20 +11,19 @@
 </ion-header>
 
 <ion-content padding text-center>
-    <p>
+    <p [hidden]="qrCodeUrl == ''">
         <qr-code class="qr-code-element" [value]="qrCodeUrl" [size]="240"></qr-code>
     </p>
 
+    <ion-spinner class="qr-spinner" color="primary" [hidden]="qrCodeUrl != ''"></ion-spinner>
+
     <div style="margin: 20px; font-size: 1.3em">
-        In order to pair the app:
+        Instructions:
         <ol text-left>
-            <li>Launch the app</li>
-            <li>Open the
-                <i>Select server</i> page</li>
-            <li>Tap on the scan icon
-                <ion-icon style="margin-left: 6px; font-size: .9em" name="qr-scanner"></ion-icon>
-            </li>
+            <li>Open the app on your smartphone</li>
+            <li>Open the <b>Select server</b> page by tapping the Wi-Fi shaped icon <ion-icon style="margin-left: 3px; font-size: .9em" name="ios-wifi"></ion-icon></li>
+            <li>Tap on the <b><ion-icon style="margin-left: 3px; font-size: .9em" name="qr-scanner"></ion-icon> QR Code Pairing</b> button</li>
             <li>Scan the QR code above</li>
         </ol>
     </div>
-</ion-content>
+</ion-content>
diff --git a/ionic/src/pages/welcome/welcome.html b/ionic/src/pages/welcome/welcome.html
@@ -21,7 +21,8 @@ <h3>1) Install the app on your smartphone</h3>
       </div>
 
       <h3>2) Launch the app and scan this QR code to connect</h3>
-      <qr-code [value]="qrCodeUrl" [size]="240"></qr-code>
+      <qr-code [hidden]="qrCodeUrl == ''" [value]="qrCodeUrl" [size]="240"></qr-code>
+      <ion-spinner [hidden]="qrCodeUrl != ''" class="qr-spinner" color="primary"></ion-spinner>
 
       <div *ngIf="electronProvider.isDev()">
         <br>
@@ -36,4 +37,4 @@ <h3>2) Launch the app and scan this QR code to connect</h3>
     </div>
   </div>
 
-</ion-content>
+</ion-content>
diff --git a/ionic/src/providers/utils/utils.ts b/ionic/src/providers/utils/utils.ts
@@ -44,9 +44,7 @@ export class UtilsProvider {
         if (defaultLocalAddress) { // Adds the defaultLocalAddress at very beginning of the list
           localAddresses.unshift(defaultLocalAddress);
         }
-        // this.ngZone.run(() => {
         resolve(Config.URL_PAIR + '/?h=' + encodeURIComponent(hostname) + '&a=' + encodeURIComponent(localAddresses.join('-')));
-        // })
       });
     })
   }
@@ -131,7 +129,7 @@ export class UtilsProvider {
   }
 
   public upgradeDisplayValue(requireRestart = false) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       // mark the update as "started"
       this.store.set('upgraded_displayValue', false);
 

diff --git a/ionic/src/theme/variables.scss b/ionic/src/theme/variables.scss
@@ -170,3 +170,8 @@ blockquote {
   left: 0;
 }
 
+.qr-spinner {
+  width: 100px;
+  height: 100px;
+  margin: 50px auto;
+}