feat(scan): scaffold permission priming in scan view
This commit is contained in:
Jason Dreyzehner
parent
dc4edccf19
commit
ce3812b220
2 changed files with 132 additions and 54 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue