Merge pull request #365 from bitjson/feature/new-qrscanner-permissions
Polish QR scanning for desktop, iOS, and Android
This commit is contained in:
commit
767b523499
9 changed files with 358 additions and 278 deletions
|
|
@ -1,12 +0,0 @@
|
|||
<ion-modal-view ng-controller="scannerController" ng-init="init()">
|
||||
<ion-header-bar align-title="center" class="bar-royal">
|
||||
<button ng-click="cancel()" class="button button-back button-clear" translate>
|
||||
Close
|
||||
</button>
|
||||
<h1 class="title ellipsis" translate>QR-Scanner</h1>
|
||||
</ion-header-bar>
|
||||
<ion-content >
|
||||
<canvas id="qr-canvas" width="200" height="150"></canvas>
|
||||
<video id="qrcode-scanner-video" width="300" height="225"></video>
|
||||
</ion-content>
|
||||
</ion-modal-view>
|
||||
|
|
@ -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="authorize()">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" ng-click="attemptToReactivate()">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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue