anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

feat(scan): create Scan tab and scannerService, implement QRScanner and controls

Browse source
This commit is contained in:
Jason Dreyzehner 2016-09-30 21:35:23 -04:00
commit f901c95f67
13 changed files with 393 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

37
public/img/bitpay-wallet-qr-scan-guides.svg Normal file
View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="QR-scanner-guides" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 271 236" style="enable-background:new 0 0 271 236;" xml:space="preserve">
<style type="text/css">
.st0{filter:url(#filter-2);}
.st1{fill:none;stroke:#647CE8;stroke-width:2;}
.st2{fill:#FFFFFF;fill-opacity:0.3;}
</style>
<filter filterUnits="objectBoundingBox" height="200%" id="filter-2" width="200%" x="-50%" y="-50%">
<feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feMorphology in="SourceAlpha" operator="erode" radius="1" result="shadowInner"></feMorphology>
<feOffset dx="0" dy="0" in="shadowInner" result="shadowInner"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="6"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" type="matrix" values="0 0 0 0 0.392156863 0 0 0 0 0.48627451 0 0 0 0 0.909803922 0 0 0 1 0">
</feColorMatrix>
</filter>
<g id="scan-line">
<g class="st0">
<line x1="11" y1="111" x2="260" y2="111"/>
</g>
<g>
<path id="line" class="st1" d="M11,111h249"/>
</g>
</g>
<path id="top-left" class="st2" d="M28,10h53.1c2.8,0,5-2.2,5-5s-2.2-5-5-5H23c-2.8,0-5,2.2-5,5v58c0,2.8,2.2,5,5,5s5-2.2,5-5V10z"
/>
<path id="bottom-left" class="st2" d="M28,224.7v-53.1c0-2.8-2.2-5-5-5s-5,2.2-5,5v58.1c0,2.8,2.2,5,5,5h58c2.8,0,5-2.2,5-5
c0-2.8-2.2-5-5-5H28z"/>
<path id="top-right" class="st2" d="M244,10v53.1c0,2.8,2.2,5,5,5s5-2.2,5-5V5c0-2.8-2.2-5-5-5h-58c-2.8,0-5,2.2-5,5s2.2,5,5,5H244z
"/>
<path id="bottom-right" class="st2" d="M244.1,225.6H191c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5h58.1c2.8,0,5-2.2,5-5v-58
c0-2.8-2.2-5-5-5s-5,2.2-5,5V225.6z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

16
public/img/icon-camera-toggle.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="camera-toggle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.8;fill:none;stroke:#FFFFFF;}
.st1{opacity:0.386;fill:#FFFFFF;enable-background:new ;}
</style>
<path id="top-arrow-line" class="st0" d="M10.5,18.1c0-4.7,4.3-8.5,9.5-8.5c3.7,0,6.9,1.9,8.5,4.7"/>
<path id="bottom-arrow-line" class="st0" d="M29.5,21c0,4.7-4.3,8.5-9.5,8.5c-3.7,0-6.9-1.9-8.5-4.7"/>
<polyline id="top-arrow-head" class="st0" points="28.9,11.1 28.4,14.1 25,13.7 "/>
<polyline id="bottom-arrow-head" class="st0" points="11,27.8 11.4,24.8 14.8,25.2 "/>
<path id="camera" class="st1" d="M24.6,21.9c0,0.8-0.7,1.5-1.5,1.5H17c-0.8,0-1.5-0.7-1.5-1.5v-3.5c0-0.8,0.7-1.5,1.5-1.5h1l0.8-1.1
h2.5l0.8,1.1h1c0.8,0,1.5,0.7,1.5,1.5V21.9z M20.1,21.9c1.1,0,2.1-0.8,2.1-1.9s-0.9-1.9-2.1-1.9C18.9,18.1,18,19,18,20
S18.9,21.9,20.1,21.9z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

9
public/img/icon-flash.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Flash_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.8;fill:#FFFFFF;enable-background:new ;}
</style>
<polygon id="bolt" class="st0" points="15,21.4 19.6,21.4 18,30 25,18.6 20.4,18.6 22,10 "/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 536 B

4
public/img/tab-icons/ico-scan-selected.svg
View file

@ -5,7 +5,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" opacity="0.9">
<g id="Icons/Tabs/Scan/2" transform="translate(1.000000, -6.000000)" stroke-width="1.5" stroke="#FFFFFF">
<g id="Icons/Tabs/Scan/2" transform="translate(1.000000, -6.000000)" stroke-width="1.5" stroke="#647CE8">
<g id="scan" transform="translate(-1.000000, 6.000000)">
<g id="Scan">
<path d="M10.4803945,1.62179474 L6.04824505,1.62179474 M5.74546723,1.62179474 L5.74546723,5.91363686" id="Line-Copy-2" stroke-linejoin="round"></path>
@ -17,4 +17,4 @@
</g>
</g>
</g>
</svg>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Before After
Before After

22
public/views/tab-scan.html Normal file
View file

@ -0,0 +1,22 @@
<ion-view id="tab-scan">
<ion-nav-bar class="bar-royal">
<ion-nav-title>{{'Scan' | translate}}</ion-nav-title>
</ion-nav-bar>
<ion-content scroll="false">
<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>
</ion-content>
</ion-view>

2
public/views/tab-send.html
View file

@ -8,7 +8,7 @@
<label class="item item-input bitcoin-address">
<i class="icon ion-social-bitcoin placeholder-icon"></i>
<div class="qr-scan-icon" ng-style="{'width': '100%'}">
<qr-scanner class="qr-icon size-24" ng-style="{'top': '3px'}" on-scan="onQrCodeScanned(data)"></qr-scanner>
<a ui-sref="tabs.scan" ng-style="{'top': '6px'}"><i class="icon ion-qr-scanner"></i></a>
<input type="text"
placeholder="{{'Search or enter bitcoin address' | translate}}"
ng-model="formData.search"

15
public/views/tabs.html
View file

@ -1,9 +1,4 @@
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': hideTabs}">
<ion-tabs class="tabs-icon-top tabs-color-active-positive ion-tabs-transparent" ng-class="{'tabs-item-hide': hideTabs}">
<ion-tab title="Home" icon-off="ico-home" icon-on="ico-home-selected" ui-sref="tabs.home">
<ion-nav-view name="tab-home"></ion-nav-view>
@ -13,12 +8,8 @@ navigation history that also transitions its views in and out.
<ion-nav-view name="tab-receive"></ion-nav-view>
</ion-tab>
<!-- this actually NEVER gets rendered -->
<qr-scanner class="qr-icon size-24" style="display:none" set-fn="setScanFn(theScanFn)" on-scan="onScan(data)"></qr-scanner>
<ion-tab title="Scan" icon-off="ico-scan" ng-click="scan()" >
<ion-tab title="Scan" icon-off="ico-scan" icon-on="ico-scan-selected" ui-sref="tabs.scan">
<ion-nav-view name="tab-scan"></ion-nav-view>
</ion-tab>
<ion-tab title="Send" icon-off="ico-send" icon-on="ico-send-selected" ui-sref="tabs.send">