From 46f8b5be56800a472544f6169f5d87ac369df595 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Fri, 11 Nov 2016 13:09:01 -0500 Subject: [PATCH 1/3] started disclaimer animation --- src/js/controllers/onboarding/disclaimer.js | 18 ++-- src/js/routes.js | 3 +- .../views/onboarding/onboard-disclaimer.scss | 93 ++++++++++--------- www/views/onboarding/disclaimer.html | 22 ++--- 4 files changed, 68 insertions(+), 68 deletions(-) diff --git a/src/js/controllers/onboarding/disclaimer.js b/src/js/controllers/onboarding/disclaimer.js index a18be4e6d..dd527ac59 100644 --- a/src/js/controllers/onboarding/disclaimer.js +++ b/src/js/controllers/onboarding/disclaimer.js @@ -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', { diff --git a/src/js/routes.js b/src/js/routes.js index cd935dda2..87dabd6ad 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -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' } } }) diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss index a4e409531..f755da3a6 100644 --- a/src/sass/views/onboarding/onboard-disclaimer.scss +++ b/src/sass/views/onboarding/onboard-disclaimer.scss @@ -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; } - } } diff --git a/www/views/onboarding/disclaimer.html b/www/views/onboarding/disclaimer.html index 96a75f909..1e382662f 100644 --- a/www/views/onboarding/disclaimer.html +++ b/www/views/onboarding/disclaimer.html @@ -1,4 +1,4 @@ - + @@ -9,24 +9,24 @@
-
Quick review!
+
Quick review! {{shrinkView}}
Almost done! Let's review.
Bitcoin is different – it cannot be safely held with a bank or web service.
- + I understand that my funds are held securely on this device, not by a company. - + I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.
-
-
- -

I have read, understood, and agree to the Terms of Use.

- -
-
+
+
+ +

I have read, understood, and agree to the Terms of Use.

+ +
+
From 98a4c9a501455661815a120a62a4ec0a9b4c003f Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Wed, 16 Nov 2016 13:28:59 -0500 Subject: [PATCH 2/3] set independent pane element behind disclaimer view to hold background, refined transform size on shrink --- .../views/onboarding/onboard-disclaimer.scss | 12 ++-- src/sass/views/onboarding/onboarding.scss | 4 ++ www/views/onboarding/disclaimer.html | 62 ++++++++++--------- 3 files changed, 43 insertions(+), 35 deletions(-) diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss index f755da3a6..281976e71 100644 --- a/src/sass/views/onboarding/onboard-disclaimer.scss +++ b/src/sass/views/onboarding/onboard-disclaimer.scss @@ -1,9 +1,9 @@ #onboarding-disclaimer { color: #fff; height: 100%; - transition: transform 2s ease; + transition: transform 1s ease; &.shrink{ - transform: scale(.5); + transform: scale(.98); } &-container { max-width: 450px; @@ -90,9 +90,6 @@ bottom: 0; width: 100%; z-index: 10; - &.header-present{ - bottom: 38px; - } &-content{ max-width: 450px; @include center-block(); @@ -119,6 +116,11 @@ .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 { diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index 4acd9bfc5..6e480b67c 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -53,6 +53,10 @@ width: 100%; } +.pane-onboarding{ + background: #0B1E4F; +} + @import "terms-of-use"; @import "onboard-welcome"; @import "onboard-tour"; diff --git a/www/views/onboarding/disclaimer.html b/www/views/onboarding/disclaimer.html index 1e382662f..557b574ae 100644 --- a/www/views/onboarding/disclaimer.html +++ b/www/views/onboarding/disclaimer.html @@ -1,32 +1,34 @@ - - - - - - - - -
-
Quick review! {{shrinkView}}
-
Almost done! Let's review.
-
Bitcoin is different – it cannot be safely held with a bank or web service.
- - - I understand that my funds are held securely on this device, not by a company. - - - I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase. - - + + + + + + + + + +
+
Quick review! {{shrinkView}}
+
Almost done! Let's review.
+
Bitcoin is different – it cannot be safely held with a bank or web service.
+ + + I understand that my funds are held securely on this device, not by a company. + + + I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase. + + +
+ + +
+
+ +

I have read, understood, and agree to the Terms of Use.

+
- - -
-
- -

I have read, understood, and agree to the Terms of Use.

-
-
+ From 795f816fbdcd3479f2bba269d04805cd9294c44e Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Mon, 21 Nov 2016 10:39:38 -0500 Subject: [PATCH 3/3] added styling and needed improvements to html organization on disclaimer view to create animation for terms display --- src/js/controllers/onboarding/disclaimer.js | 2 +- .../views/onboarding/onboard-disclaimer.scss | 40 ++++++++++++++++++- www/views/onboarding/disclaimer.html | 16 +++++++- 3 files changed, 54 insertions(+), 4 deletions(-) diff --git a/src/js/controllers/onboarding/disclaimer.js b/src/js/controllers/onboarding/disclaimer.js index dd527ac59..7609b64f5 100644 --- a/src/js/controllers/onboarding/disclaimer.js +++ b/src/js/controllers/onboarding/disclaimer.js @@ -34,7 +34,7 @@ angular.module('copayApp.controllers').controller('disclaimerController', functi }; $scope.openTerms = function() { - $scope.shrinkView = true; + $scope.shrinkView = !$scope.shrinkView; } $scope.goBack = function() { diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss index 281976e71..70ceca8e3 100644 --- a/src/sass/views/onboarding/onboard-disclaimer.scss +++ b/src/sass/views/onboarding/onboard-disclaimer.scss @@ -1,9 +1,9 @@ #onboarding-disclaimer { color: #fff; height: 100%; - transition: transform 1s ease; + transition: transform 2.5s ease; &.shrink{ - transform: scale(.98); + transform: scale(.8); } &-container { max-width: 450px; @@ -83,6 +83,41 @@ left:0; } } +#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; + width: 100%; + 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; @@ -90,6 +125,7 @@ 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(); diff --git a/www/views/onboarding/disclaimer.html b/www/views/onboarding/disclaimer.html index 557b574ae..f728ccd9e 100644 --- a/www/views/onboarding/disclaimer.html +++ b/www/views/onboarding/disclaimer.html @@ -10,7 +10,7 @@
-
Quick review! {{shrinkView}}
+
Quick review!
Almost done! Let's review.
Bitcoin is different – it cannot be safely held with a bank or web service.
@@ -24,6 +24,20 @@
+
+ + {{'Terms of Use' | translate}} + + + + +
+
+
+
+