From ce3812b2204a0e65d33ee2b80fb2123793977579 Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Mon, 10 Oct 2016 22:57:20 -0400
Subject: [PATCH] feat(scan): scaffold permission priming in scan view

---
 src/sass/views/tab-scan.scss | 139 ++++++++++++++++++++++++-----------
 www/views/tab-scan.html      |  49 ++++++++----
 2 files changed, 133 insertions(+), 55 deletions(-)

diff --git a/src/sass/views/tab-scan.scss b/src/sass/views/tab-scan.scss
index 41d9e7ef1..ad6898c02 100644
--- a/src/sass/views/tab-scan.scss
+++ b/src/sass/views/tab-scan.scss
@@ -1,55 +1,110 @@
+$scannerBackgroundColor: #060d2d;
+
 #tab-scan {
-  // view background is transparent to show video preview
-  background: none transparent;
-  .scanner-controls {
-    width: 100%;
-    text-align: center;
-    bottom: 0;
-    position: absolute;
+  color: #fff;
+  text-align: center;
+  background: transparent none;
+  &-has-problems,
+  &-loading-camera {
+    background-color: $scannerBackgroundColor;
   }
-  .guides {
-    display: flex;
-    position: absolute;
+  &-has-problems {
     height: 100%;
-    width: 100%;
+    display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    top: 0;
-    left: 0;
-  }
-  .qr-scan-guides {
-    width: 60%;
-    max-width: 400px;
-    margin-bottom: 8em;
-    max-height: 50%;
-  }
-  .icon-flash, .icon-camera-toggle {
-    border-radius: 50%;
-    width: 4em;
-    height: 4em;
-    background-color: rgba(13, 13, 13, 0.79);
-    background-repeat: no-repeat;
-    background-clip: padding-box;
-    background-size: 100%;
-    display: inline-block;
-    margin: 2em 1em;
-    cursor: pointer;
-    // hover for desktop only
-    body:not(.platform-cordova) &:hover {
-      background-color: rgba(31, 40, 78, 0.79);
-    }
-    &.active, &:active {
-      background-color: rgba(100, 124, 232, 0.79);
+
+    .zero-state {
+      &-icon {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        padding: 13px;
+        box-shadow: $subtle-box-shadow;
+        background-color: #fff;
+      }
+      &-heading {
+        font-size: 20px;
+        margin: 1rem;
+      }
+      &-description {
+        margin: 0 2rem 120px;
+        opacity: .6;
+        max-width: 300px;
+      }
+      &-tldr {
+        margin: 1rem auto;
+      }
+      &-description,
+      &-tldr {
+        max-width: 300px;
+      }
+      &-cta {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        padding-bottom: 6vh;
+      }
     }
   }
-  .icon-flash {
-    background-image: url("../img/icon-flash.svg");
+  &-loading-camera {
+
   }
-  .icon-camera-toggle {
-    background-image: url("../img/icon-camera-toggle.svg");
+  &-camera-ready {
+    // view background is transparent to show video preview
+    background: none transparent;
+    .scanner-controls {
+      width: 100%;
+      text-align: center;
+      bottom: 0;
+      position: absolute;
+    }
+    .guides {
+      display: flex;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+      top: 0;
+      left: 0;
+    }
+    .qr-scan-guides {
+      width: 60%;
+      max-width: 400px;
+      margin-bottom: 8em;
+      max-height: 50%;
+    }
+    .icon-flash, .icon-camera-toggle {
+      border-radius: 50%;
+      width: 4em;
+      height: 4em;
+      background-color: rgba(13, 13, 13, 0.79);
+      background-repeat: no-repeat;
+      background-clip: padding-box;
+      background-size: 100%;
+      display: inline-block;
+      margin: 2em 1em;
+      cursor: pointer;
+      // hover for desktop only
+      body:not(.platform-cordova) &:hover {
+        background-color: rgba(31, 40, 78, 0.79);
+      }
+      &.active, &:active {
+        background-color: rgba(100, 124, 232, 0.79);
+      }
+    }
+    .icon-flash {
+      background-image: url("../img/icon-flash.svg");
+    }
+    .icon-camera-toggle {
+      background-image: url("../img/icon-camera-toggle.svg");
+    }
   }
 }
 
 #cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview {
-  background-color: #060d2d !important;
+  background-color: $scannerBackgroundColor !important;
 }
diff --git a/www/views/tab-scan.html b/www/views/tab-scan.html
index 27c9cb9c5..288e15915 100644
--- a/www/views/tab-scan.html
+++ b/www/views/tab-scan.html
@@ -1,22 +1,45 @@
 <ion-view id="tab-scan">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Scan' | translate}}</ion-nav-title>
+    <ion-nav-buttons side="primary">
+      <button class="button back-button button-clear ng-hide" ng-click="goBack()" ng-show="canGoBack()">
+        <i class="icon ion-ios-close-empty"></i>
+      </button>
+    </ion-nav-buttons>
   </ion-nav-bar>
   <ion-content scroll="false">
-    <div class="guides">
-      <img class="qr-scan-guides" src="img/bitpay-wallet-qr-scan-guides.svg">
+    <div class="ng-hide" id="tab-scan-has-problems" ng-show="currentState === scannerStates.unauthorized || currentState === scannerStates.denied || currentState === scannerStates.unavailable">
+      <i class="icon zero-state-icon">
+        <img src="img/tab-icons/ico-receive.svg" />
+      </i>
+      <div class="zero-state-heading" translate>Scan QR Codes</div>
+      <div class="zero-state-description" translate>You can scan bitcoin addresses, payment requests, paper wallets, and more.</div>
+      <div class="zero-state-cta">
+        <div class="ng-hide zero-state-tldr" ng-show="currentState === scannerStates.unauthorized" translate>Enable the camera to get started.</div>
+        <div class="ng-hide zero-state-tldr" ng-show="currentState === scannerStates.denied" translate>Enable camera access in your device settings to get started.</div>
+        <div class="ng-hide zero-state-tldr" ng-show="currentState === scannerStates.unavailable" translate>Please connect a camera to get started.</div>
+        <button ng-show="currentState === scannerStates.unauthorized" class="ng-hide button button-standard button-primary" ng-click="attemptActivate">Allow Camera Access</button>
+        <button ng-show="currentState === scannerStates.denied && canOpenSettings" class="ng-hide button button-standard button-primary" ng-click="openSettings">Open Settings</button>
+        <button ng-show="currentState === scannerStates.unavailable" class="ng-hide button button-standard button-primary">Retry Camera</button>
+      </div>
     </div>
-    <div class="scanner-controls">
-      <a ng-click="toggleLight()" ng-show="canEnableLight">
-        <i class="icon">
-          <div class="icon-flash" ng-class="{'active': lightActive}"></div>
-        </i>
-      </a>
-      <a ng-click="toggleCamera()" ng-show="canChangeCamera">
-        <i class="icon">
-          <div class="icon-camera-toggle" ng-class="{'active': cameraToggleActive}"></div>
-        </i>
-      </a>
+    <div class="ng-show" id="tab-scan-loading-camera" ng-show="currentState === scannerStates.loading"></div>
+    <div class="ng-hide" id="tab-scan-camera-ready" ng-show="currentState === scannerStates.visible">
+      <div class="guides">
+        <img class="qr-scan-guides" src="img/bitpay-wallet-qr-scan-guides.svg">
+      </div>
+      <div class="scanner-controls">
+        <a ng-click="toggleLight()" ng-show="canEnableLight">
+          <i class="icon">
+            <div class="icon-flash" ng-class="{'active': lightActive}"></div>
+          </i>
+        </a>
+        <a ng-click="toggleCamera()" ng-show="canChangeCamera">
+          <i class="icon">
+            <div class="icon-camera-toggle" ng-class="{'active': cameraToggleActive}"></div>
+          </i>
+        </a>
+      </div>
     </div>
   </ion-content>
 </ion-view>