mirror of https://github.com/BTCPrivate/copay.git
started disclaimer animation
This commit is contained in:
Jamal Jackson
parent
8199badb32
commit
46f8b5be56
|
|
@ -1,17 +1,18 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('disclaimerController', function($scope, $timeout, $state, $log, $ionicModal, profileService, uxLanguage, externalLinkService, storageService, $stateParams, startupService) {
|
||||
angular.module('copayApp.controllers').controller('disclaimerController', function($scope, $timeout, $state, $log, $ionicModal, profileService, uxLanguage, externalLinkService, storageService, $stateParams, startupService, $rootScope) {
|
||||
|
||||
$scope.$on("$ionicView.afterEnter", function() {
|
||||
startupService.ready();
|
||||
});
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.lang = uxLanguage.currentLanguage;
|
||||
$scope.terms = {};
|
||||
$scope.accept1 = $scope.accept2 = $scope.accept3 = false;
|
||||
$scope.accepted = {};
|
||||
$scope.accepted.first = $scope.accepted.second = $scope.accepted.third = false;
|
||||
$scope.backedUp = $stateParams.backedUp;
|
||||
$scope.resume = $stateParams.resume;
|
||||
$scope.shrinkView = false;
|
||||
$timeout(function() {
|
||||
$scope.$apply();
|
||||
}, 1);
|
||||
|
|
@ -32,14 +33,9 @@ angular.module('copayApp.controllers').controller('disclaimerController', functi
|
|||
externalLinkService.open(url, target);
|
||||
};
|
||||
|
||||
$scope.openTermsModal = function() {
|
||||
$ionicModal.fromTemplateUrl('views/modals/terms.html', {
|
||||
scope: $scope
|
||||
}).then(function(modal) {
|
||||
$scope.termsModal = modal;
|
||||
$scope.termsModal.show();
|
||||
});
|
||||
};
|
||||
$scope.openTerms = function() {
|
||||
$scope.shrinkView = true;
|
||||
}
|
||||
|
||||
$scope.goBack = function() {
|
||||
$state.go('onboarding.backupRequest', {
|
||||
|
|
|
|||
|
|
@ -712,7 +712,8 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
|
|||
url: '/disclaimer/:walletId/:backedUp/:resume',
|
||||
views: {
|
||||
'onboarding': {
|
||||
templateUrl: 'views/onboarding/disclaimer.html'
|
||||
templateUrl: 'views/onboarding/disclaimer.html',
|
||||
controller: 'disclaimerController'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
#onboarding-disclaimer {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
transition: transform 2s ease;
|
||||
&.shrink{
|
||||
transform: scale(.5);
|
||||
}
|
||||
&-container {
|
||||
max-width: 450px;
|
||||
display: flex;
|
||||
|
|
@ -78,57 +82,56 @@
|
|||
top:30%;
|
||||
left:0;
|
||||
}
|
||||
#agree-to-terms {
|
||||
background: #fff;
|
||||
padding:1rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
&.header-present{
|
||||
bottom: 38px;
|
||||
}
|
||||
&-content{
|
||||
max-width: 600px;
|
||||
@include center-block();
|
||||
}
|
||||
.item{
|
||||
color:rgb(58,58,58);
|
||||
padding-bottom: 2.5rem;
|
||||
float: left;
|
||||
.item-content{
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
p{
|
||||
color:rgb(58,58,58);
|
||||
text-align: left;
|
||||
}
|
||||
@media (min-width:450px){
|
||||
p{
|
||||
position: relative;
|
||||
top: .6rem;
|
||||
}
|
||||
}
|
||||
.checkbox input:before,
|
||||
.checkbox .checkbox-icon:before{
|
||||
border-color:$soft-blue;
|
||||
}
|
||||
.checkbox input:checked:before,
|
||||
.checkbox input:checked + .checkbox-icon:before {
|
||||
border-color: rgb(19, 229, 182);
|
||||
}
|
||||
button{
|
||||
margin-top:1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
#agree-to-terms {
|
||||
background: #fff;
|
||||
padding:1rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
&.header-present{
|
||||
bottom: 38px;
|
||||
}
|
||||
&-content{
|
||||
max-width: 450px;
|
||||
@include center-block();
|
||||
}
|
||||
.item{
|
||||
color:rgb(58,58,58);
|
||||
padding-bottom: 2.5rem;
|
||||
float: left;
|
||||
border:none;
|
||||
.item-content{
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
p{
|
||||
color:rgb(58,58,58);
|
||||
text-align: left;
|
||||
}
|
||||
@media (min-width:450px){
|
||||
p{
|
||||
position: relative;
|
||||
top: .6rem;
|
||||
}
|
||||
}
|
||||
.checkbox input:before,
|
||||
.checkbox .checkbox-icon:before{
|
||||
border-color:$soft-blue;
|
||||
}
|
||||
.checkbox input:checked:before,
|
||||
.checkbox input:checked + .checkbox-icon:before {
|
||||
border-color: rgb(19, 229, 182);
|
||||
}
|
||||
button{
|
||||
margin-top:1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height:460px){
|
||||
#onboarding-disclaimer{
|
||||
#agree-to-terms{
|
||||
position: relative;
|
||||
float:left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<ion-view id="onboarding-disclaimer" class="onboarding" ng-controller="disclaimerController" ng-init=init()>
|
||||
<ion-view id="onboarding-disclaimer" class="onboarding" ng-class="{'shrink': shrinkView}" ng-init=init()>
|
||||
<ion-nav-bar class="bar-stable" ng-if="backedUp == 'false'">
|
||||
<ion-nav-title></ion-nav-title>
|
||||
<ion-nav-buttons side="primary">
|
||||
|
|
@ -9,24 +9,24 @@
|
|||
</ion-nav-bar>
|
||||
<ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
|
||||
<div id="onboarding-disclaimer-container">
|
||||
<div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review!</div>
|
||||
<div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review! {{shrinkView}}</div>
|
||||
<div ng-show="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</div>
|
||||
<div class="onboarding-description" id="disclaimer-description" translate>Bitcoin is different – it cannot be safely held with a bank or web service.</div>
|
||||
<ion-list>
|
||||
<ion-checkbox ng-model="accept1">
|
||||
<ion-checkbox ng-model="accepted.first">
|
||||
<span translate>I understand that my funds are held securely on this device, not by a company.</span>
|
||||
</ion-checkbox>
|
||||
<ion-checkbox ng-model="accept2">
|
||||
<ion-checkbox ng-model="accepted.second">
|
||||
<span translate>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</span>
|
||||
</ion-checkbox>
|
||||
</ion-list>
|
||||
</div>
|
||||
<div id="agree-to-terms" ng-if="accept1 && accept2" ng-class="{'header-present': backedUp == 'false'}">
|
||||
<div id="agree-to-terms-content" class="center-block">
|
||||
<ion-checkbox ng-model="terms.accept3"></ion-checkbox>
|
||||
<p translate>I have read, understood, and agree to the <a ng-click="openTermsModal()" translate>Terms of Use</a>.</p>
|
||||
<button ng-disabled="!accept1 || !accept2 || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
<div id="agree-to-terms" ng-if="accepted.first && accepted.second" ng-class="{'header-present': backedUp == 'false'}">
|
||||
<div id="agree-to-terms-content" class="center-block">
|
||||
<ion-checkbox ng-model="terms.accepted.third"></ion-checkbox>
|
||||
<p translate>I have read, understood, and agree to the <a ng-click="openTerms()" translate>Terms of Use</a>.</p>
|
||||
<button ng-disabled="!accepted.first || !accepted.second || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue