apply mocks styling for both distributions

This commit is contained in:
JDonadio 2017-03-07 11:33:17 -03:00
commit a51151b1d4
3 changed files with 99 additions and 70 deletions

View file

@ -1,70 +1,67 @@
<ion-view id="pin-code" ng-controller="pincodeController" hide-tabs hide-back-button="!fromSettings">
<ion-nav-bar class="bar-royal">
<ion-nav-title>{{'Pin Code' | translate}}</ion-nav-title>
<ion-nav-bar class="bar-clear">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<div ng-if="fromSettings" ng-click="close()" class="close" translate>Close</div>
<div class="content">
<div class="block-text row" translate ng-if="!newPincode">Please enter your mobile unlock code</div>
<div class="block-text row" translate ng-if="newPincode">Confirm your mobile unlock code</div>
<div class="app-icon">
<i class="icon big-icon-svg">
<div class="bg app-icon"></div>
</i>
</div>
<div class="block-code">
<div class="row">
<div class="col">
{{currentPincode.substring(0, 1)}}
</div>
<div class="col">
{{currentPincode.substring(1, 2)}}
</div>
<div class="col">
{{currentPincode.substring(2, 3)}}
</div>
<div class="col">
{{currentPincode.substring(3, 4)}}
</div>
<div class="col circle" ng-class="{'filled': currentPincode.length >= 1}"></div>
<div class="col circle" ng-class="{'filled': currentPincode.length >= 2}"></div>
<div class="col circle" ng-class="{'filled': currentPincode.length >= 3}"></div>
<div class="col circle" ng-class="{'filled': currentPincode.length >= 4}"></div>
</div>
</div>
<div class="block-buttons">
<div class="row">
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('1')">1</button>
<div class="col" ng-click="updatePinCode('1')">
<div class="keyboard">1</div>
</div>
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('2')">2</button>
<div class="col" ng-click="updatePinCode('2')">
<div class="keyboard">2</div>
</div>
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('3')">3</button>
<div class="col" ng-click="updatePinCode('3')">
<div class="keyboard">3</div>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('4')">4</button>
<div class="col" ng-click="updatePinCode('4')">
<div class="keyboard">4</div>
</div>
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('5')">5</button>
<div class="col" ng-click="updatePinCode('5')">
<div class="keyboard">5</div>
</div>
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('6')">6</button>
<div class="col" ng-click="updatePinCode('6')">
<div class="keyboard">6</div>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('7')">7</button>
<div class="col" ng-click="updatePinCode('7')">
<div class="keyboard">7</div>
</div>
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('8')">8</button>
<div class="col" ng-click="updatePinCode('8')">
<div class="keyboard">8</div>
</div>
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('9')">9</button>
<div class="col" ng-click="updatePinCode('9')">
<div class="keyboard">9</div>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-light button-stretch icon ion-checkmark" ng-click="save()" ng-disabled=""></button>
<div class="col" ng-click="save()">
<div class="keyboard icon ion-checkmark" ng-disabled=""></div>
</div>
<div class="col" ng-click="updatePinCode('0')">
<div class="">0</div>
</div>
<div class="col">
<button class="button button-light button-stretch" ng-click="updatePinCode('0')">0</button>
</div>
<div class="col">
<button class="button button-light button-stretch icon ion-arrow-left-a" ng-click="delete()"></button>
<div class="keyboard icon ion-arrow-left-a" ng-click="delete()"></div>
</div>
</div>
</div>