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

5
src/sass/ionic.scss
View file

@ -19,5 +19,10 @@ $ios-transition-duration: 200ms;
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
ion-nav-bar.hide { display: block !important; }
// the ion tabs element never needs it's own background (backgrounds are
// rendered by the tabs), and the default background would cover the scanner
ion-tabs.ion-tabs-transparent {
background: none transparent;
}
@import "../../bower_components/ionic/scss/ionic";

54
src/sass/views/tab-scan.scss Normal file
View file

@ -0,0 +1,54 @@
#tab-scan {
// 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;
}
.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;
}