Merge pull request #5092 from jamal-jackson/feature/terms_conditions_polish
terms of use disclaimer view animation
This commit is contained in:
Gustavo Maximiliano Cortez
GitHub
commit
e7ee8b4e21
5 changed files with 139 additions and 81 deletions
|
|
@ -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 = !$scope.shrinkView;
|
||||
}
|
||||
|
||||
$scope.goBack = function() {
|
||||
$state.go('onboarding.backupRequest', {
|
||||
|
|
|
|||
|
|
@ -737,7 +737,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 2.5s ease;
|
||||
&.shrink{
|
||||
transform: scale(.8);
|
||||
}
|
||||
&-container {
|
||||
max-width: 450px;
|
||||
display: flex;
|
||||
|
|
@ -78,57 +82,94 @@
|
|||
top:30%;
|
||||
left:0;
|
||||
}
|
||||
#agree-to-terms {
|
||||
}
|
||||
#terms-of-use{
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
transition: top 1s ease;
|
||||
transition-delay: .25s;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
ion-nav-bar{
|
||||
position: fixed;
|
||||
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;
|
||||
z-index: 15;
|
||||
}
|
||||
.has-header{
|
||||
width:100%;
|
||||
background:#fff;
|
||||
overflow-y:scroll;
|
||||
position:relative;
|
||||
#terms{
|
||||
max-width:400px;
|
||||
padding-top:.5rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 165px;
|
||||
width:90%;
|
||||
}
|
||||
}
|
||||
&.slideUp{
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
#agree-to-terms {
|
||||
background: #fff;
|
||||
padding:1rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
|
||||
&-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;
|
||||
background:#fff;
|
||||
}
|
||||
.checkbox input:after,
|
||||
.checkbox .checkbox-icon:after{
|
||||
border-color:#13e5b6;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,10 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.pane-onboarding{
|
||||
background: #0B1E4F;
|
||||
}
|
||||
|
||||
@import "terms-of-use";
|
||||
@import "onboard-welcome";
|
||||
@import "onboard-tour";
|
||||
|
|
|
|||
|
|
@ -1,32 +1,48 @@
|
|||
<ion-view id="onboarding-disclaimer" class="onboarding" ng-controller="disclaimerController" ng-init=init()>
|
||||
<ion-nav-bar class="bar-stable" ng-if="backedUp == 'false'">
|
||||
<ion-nav-title></ion-nav-title>
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button back-button button-clear" ng-click="goBack()">
|
||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
</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>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">
|
||||
<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">
|
||||
<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>
|
||||
<ion-pane class="pane-onboarding">
|
||||
<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">
|
||||
<button class="button back-button button-clear" ng-click="goBack()">
|
||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
</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>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="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="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>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
<div id="terms-of-use" ng-class="{'slideUp': shrinkView}">
|
||||
<ion-nav-bar class="bar-ligt">
|
||||
<ion-nav-title>{{'Terms of Use' | translate}}</ion-nav-title>
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button no-border" ng-click="openTerms()">
|
||||
<i class="ion-ios-arrow-down"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<div class="has-header">
|
||||
<div ng-include="'views/includes/terms.html'" direction="y"></div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</div>
|
||||
</div>
|
||||
<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"></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.accepted" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-pane>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue