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

ref styling

Browse source
This commit is contained in:
JDonadio 2017-03-17 15:52:34 -03:00
commit 47729129c9
3 changed files with 52 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/js/controllers/pincode.js
View file

@ -1,13 +1,19 @@
'use strict'; 'use strict';
angular.module('copayApp.controllers').controller('pincodeController', function($state, $stateParams, $ionicHistory, $timeout, $scope, $log, configService) { angular.module('copayApp.controllers').controller('pincodeController', function($state, $stateParams, $ionicHistory, $timeout, $scope, $log, configService, appConfigService) {
$scope.$on("$ionicView.beforeEnter", function(event) { $scope.$on("$ionicView.beforeEnter", function(event) {
$scope.currentPincode = $scope.newPincode = ''; $scope.currentPincode = $scope.newPincode = '';
$scope.fromSettings = $stateParams.fromSettings == 'true' ? true : false; $scope.fromSettings = $stateParams.fromSettings == 'true' ? true : false;
$scope.locking = $stateParams.locking == 'true' ? true : false; $scope.locking = $stateParams.locking == 'true' ? true : false;
$scope.match = false;
$scope.appName = appConfigService.name;
}); });
$scope.getFilledClass = function(limit) {
return $scope.currentPincode.length >= limit ? 'filled-' + $scope.appName : null;
};
$scope.delete = function() { $scope.delete = function() {
if ($scope.currentPincode.length > 0) { if ($scope.currentPincode.length > 0) {
$scope.currentPincode = $scope.currentPincode.substring(0, $scope.currentPincode.length - 1); $scope.currentPincode = $scope.currentPincode.substring(0, $scope.currentPincode.length - 1);
@ -15,30 +21,32 @@ angular.module('copayApp.controllers').controller('pincodeController', function(
} }
}; };
function isComplete() { $scope.isComplete = function() {
if ($scope.currentPincode.length < 4) return false; if ($scope.currentPincode.length < 4) return false;
else return true; else return true;
}; };
$scope.updatePinCode = function(value) { $scope.updatePinCode = function(value) {
if (value && !isComplete()) { if (value && !$scope.isComplete()) {
$scope.currentPincode = $scope.currentPincode + value; $scope.currentPincode = $scope.currentPincode + value;
} }
$timeout(function() { $timeout(function() {
$scope.$apply(); $scope.$apply();
}); });
if (!$scope.locking && isComplete()) { if (!$scope.locking && $scope.isComplete()) {
$scope.save(); $scope.save();
} }
}; };
$scope.save = function() { $scope.save = function() {
if (!isComplete()) return; if (!$scope.isComplete()) return;
var config = configService.getSync(); var config = configService.getSync();
var match = config.lockapp.pincode.value == $scope.currentPincode ? true : false; $scope.match = config.lockapp.pincode.value == $scope.currentPincode ? true : false;
$timeout(function() {
$scope.$apply();
});
if (!$scope.locking) { if (!$scope.locking) {
if (match) { if ($scope.match) {
$scope.fromSettings ? saveSettings($scope.locking, '') : $scope.close(150); $scope.fromSettings ? saveSettings($scope.locking, '') : $scope.close(150);
} }
} else { } else {

40
src/sass/views/pincode.scss
View file

@ -34,11 +34,8 @@
} }
} }
.block-code { .block-code {
width: 120px; width: 50%;
margin: auto; margin: auto;
.row {
height: 35px;
}
} }
.block-buttons { .block-buttons {
.col { .col {
@ -47,19 +44,32 @@
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
bottom: 3%; bottom: 3%;
left: 0; left: 5%;
width: 100%; width: 90%;
} }
} }
.circle { @mixin circle {
border: 1px solid #666666; border-radius: 50%;
border-radius: 50%; box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
opacity: 0.6; transition: background-color .2s ease-in-out;
box-shadow: 0 0 1px 0px rgb( 255, 255, 255); padding: 7%;
margin: 2px; margin: 5%;
transition: background-color .2s ease-in-out;
} }
.filled { .circle-copay {
background-color: #666666; @include circle;
border: 1px solid $v-accent-color;
}
.circle-bitpay {
@include circle;
border: 1px solid $v-primary-color;
}
.filled-copay {
background-color: $v-accent-color;
}
.filled-bitpay {
background-color: $v-primary-color;
}
.error {
color: #f13333;
} }
} }

19
www/views/pincode.html
View file

@ -4,8 +4,11 @@
</ion-nav-back-button> </ion-nav-back-button>
</ion-nav-bar> </ion-nav-bar>
<div class="content"> <div class="content">
<div class="block-text row" translate ng-if="!newPincode">Please enter your mobile unlock code</div> <div class="block-text row">
<div class="block-text row" translate ng-if="newPincode">Confirm your mobile unlock code</div> <span translate ng-if="!newPincode && !isComplete()">Please enter your mobile unlock code</span>
<span translate ng-if="newPincode && !isComplete()">Confirm your mobile unlock code</span>
<span translate ng-if="isComplete() && !locking && !match" class="error">Incorrect code, try again.</span>
</div>
<div class="app-icon"> <div class="app-icon">
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<div class="bg"></div> <div class="bg"></div>
@ -13,10 +16,10 @@
</div> </div>
<div class="block-code"> <div class="block-code">
<div class="row"> <div class="row">
<div class="col circle" ng-class="{'filled': currentPincode.length >= 1}"></div> <div class="col circle-{{appName}}" ng-class="getFilledClass(1)"></div>
<div class="col circle" ng-class="{'filled': currentPincode.length >= 2}"></div> <div class="col circle-{{appName}}" ng-class="getFilledClass(2)"></div>
<div class="col circle" ng-class="{'filled': currentPincode.length >= 3}"></div> <div class="col circle-{{appName}}" ng-class="getFilledClass(3)"></div>
<div class="col circle" ng-class="{'filled': currentPincode.length >= 4}"></div> <div class="col circle-{{appName}}" ng-class="getFilledClass(4)"></div>
</div> </div>
</div> </div>
<div class="block-buttons"> <div class="block-buttons">
@ -60,8 +63,8 @@
<div class="col" ng-click="updatePinCode('0')"> <div class="col" ng-click="updatePinCode('0')">
<div class="">0</div> <div class="">0</div>
</div> </div>
<div class="col"> <div class="col" ng-click="delete()">
<div class="keyboard icon ion-arrow-left-a" ng-click="delete()"></div> <div class="keyboard icon ion-arrow-left-a"></div>
</div> </div>
</div> </div>
</div> </div>