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 {
|
#tab-scan {
|
||||||
// view background is transparent to show video preview
|
color: #fff;
|
||||||
background: none transparent;
|
text-align: center;
|
||||||
.scanner-controls {
|
background: transparent none;
|
||||||
width: 100%;
|
&-has-problems,
|
||||||
text-align: center;
|
&-loading-camera {
|
||||||
bottom: 0;
|
background-color: $scannerBackgroundColor;
|
||||||
position: absolute;
|
|
||||||
}
|
}
|
||||||
.guides {
|
&-has-problems {
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
.zero-state {
|
||||||
}
|
&-icon {
|
||||||
.qr-scan-guides {
|
display: inline-block;
|
||||||
width: 60%;
|
width: 50px;
|
||||||
max-width: 400px;
|
height: 50px;
|
||||||
margin-bottom: 8em;
|
border-radius: 50%;
|
||||||
max-height: 50%;
|
padding: 13px;
|
||||||
}
|
box-shadow: $subtle-box-shadow;
|
||||||
.icon-flash, .icon-camera-toggle {
|
background-color: #fff;
|
||||||
border-radius: 50%;
|
}
|
||||||
width: 4em;
|
&-heading {
|
||||||
height: 4em;
|
font-size: 20px;
|
||||||
background-color: rgba(13, 13, 13, 0.79);
|
margin: 1rem;
|
||||||
background-repeat: no-repeat;
|
}
|
||||||
background-clip: padding-box;
|
&-description {
|
||||||
background-size: 100%;
|
margin: 0 2rem 120px;
|
||||||
display: inline-block;
|
opacity: .6;
|
||||||
margin: 2em 1em;
|
max-width: 300px;
|
||||||
cursor: pointer;
|
}
|
||||||
// hover for desktop only
|
&-tldr {
|
||||||
body:not(.platform-cordova) &:hover {
|
margin: 1rem auto;
|
||||||
background-color: rgba(31, 40, 78, 0.79);
|
}
|
||||||
}
|
&-description,
|
||||||
&.active, &:active {
|
&-tldr {
|
||||||
background-color: rgba(100, 124, 232, 0.79);
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
&-cta {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 6vh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.icon-flash {
|
&-loading-camera {
|
||||||
background-image: url("../img/icon-flash.svg");
|
|
||||||
}
|
}
|
||||||
.icon-camera-toggle {
|
&-camera-ready {
|
||||||
background-image: url("../img/icon-camera-toggle.svg");
|
// 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 {
|
#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-view id="tab-scan">
|
||||||
<ion-nav-bar class="bar-royal">
|
<ion-nav-bar class="bar-royal">
|
||||||
<ion-nav-title>{{'Scan' | translate}}</ion-nav-title>
|
<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-nav-bar>
|
||||||
<ion-content scroll="false">
|
<ion-content scroll="false">
|
||||||
<div class="guides">
|
<div class="ng-hide" id="tab-scan-has-problems" ng-show="currentState === scannerStates.unauthorized || currentState === scannerStates.denied || currentState === scannerStates.unavailable">
|
||||||
<img class="qr-scan-guides" src="img/bitpay-wallet-qr-scan-guides.svg">
|
<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>
|
||||||
<div class="scanner-controls">
|
<div class="ng-show" id="tab-scan-loading-camera" ng-show="currentState === scannerStates.loading"></div>
|
||||||
<a ng-click="toggleLight()" ng-show="canEnableLight">
|
<div class="ng-hide" id="tab-scan-camera-ready" ng-show="currentState === scannerStates.visible">
|
||||||
<i class="icon">
|
<div class="guides">
|
||||||
<div class="icon-flash" ng-class="{'active': lightActive}"></div>
|
<img class="qr-scan-guides" src="img/bitpay-wallet-qr-scan-guides.svg">
|
||||||
</i>
|
</div>
|
||||||
</a>
|
<div class="scanner-controls">
|
||||||
<a ng-click="toggleCamera()" ng-show="canChangeCamera">
|
<a ng-click="toggleLight()" ng-show="canEnableLight">
|
||||||
<i class="icon">
|
<i class="icon">
|
||||||
<div class="icon-camera-toggle" ng-class="{'active': cameraToggleActive}"></div>
|
<div class="icon-flash" ng-class="{'active': lightActive}"></div>
|
||||||
</i>
|
</i>
|
||||||
</a>
|
</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>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue