From 793bfee6a2652a7b722c665f00f5c22b6659a56e Mon Sep 17 00:00:00 2001 From: Sebastiaan Pasma Date: Tue, 4 Sep 2018 16:36:05 +0200 Subject: [PATCH 1/3] Changed wallet details transition behaviour --- src/js/controllers/walletDetails.js | 40 +++++++++++++++++------------ src/sass/views/walletDetails.scss | 17 +++++++----- www/views/walletDetails.html | 2 +- 3 files changed, 35 insertions(+), 24 deletions(-) diff --git a/src/js/controllers/walletDetails.js b/src/js/controllers/walletDetails.js index ec787a5f4..f984a9209 100644 --- a/src/js/controllers/walletDetails.js +++ b/src/js/controllers/walletDetails.js @@ -283,25 +283,28 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun }; var prevPos; - + $scope.txHistoryPaddingBottom = 0; function getScrollPosition() { var scrollPosition = $ionicScrollDelegate.getScrollPosition(); if (!scrollPosition) { - $window.requestAnimationFrame(function() { + $timeout(function() { getScrollPosition(); - }); + }, 25); return; } var pos = scrollPosition.top; + if (pos > 0) { + $scope.txHistoryPaddingBottom = "200px"; + } if (pos === prevPos) { - $window.requestAnimationFrame(function() { + $timeout(function() { getScrollPosition(); - }); + }, 25); return; } prevPos = pos; refreshAmountSection(pos); - }; + } function refreshAmountSection(scrollPos) { var AMOUNT_HEIGHT_BASE = 210; @@ -355,18 +358,23 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun } var t = amountTop; - - $scope.altAmountOpacity = (amountHeight - 100) / 80; - $scope.buttonsOpacity = (amountHeight - 140) / 70; - $window.requestAnimationFrame(function() { - $scope.amountHeight = amountHeight + 'px'; - $scope.contentMargin = contentMargin + 'px'; - $scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ') translateY(' + t + 'px)'; - $scope.$digest(); - getScrollPosition(); - }); + if (scrollPos > 50) { + contentMargin = amountHeight = 80; + $scope.altAmountOpacity = 0.01; + $scope.buttonsOpacity = 0.01; + } else { + contentMargin = amountHeight = 210; + $scope.altAmountOpacity = 1; + $scope.buttonsOpacity = 1; + } + $scope.amountHeight = amountHeight + 'px'; + $scope.contentMargin = contentMargin + 'px'; + $scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ') translateY(' + t + 'px)'; + $scope.$digest(); + getScrollPosition(); } + var scrollEffectTimeout; var scrollWatcherInitialized; $scope.$on("$ionicView.enter", function(event, data) { diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index 858229d85..30b5da430 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -159,6 +159,7 @@ padding-top: 0; top: 0; + transition: margin-top 0.5s ease-in-out; margin-bottom: 16px; .scroll { @@ -199,7 +200,8 @@ width: 100%; position: absolute; bottom: 20px; - + transition-delay: 0.25s; + transition: opacity 0.4s ease-in-out; >.col { padding: 5px 10px; margin-bottom: 0; @@ -219,14 +221,15 @@ } } .amount { - width: 100%; - text-align: center; - color: #fff; - height: 230px; - padding-top: 40px; - display: block; align-items: center; + color: #fff; + display: block; + height: 230px; justify-content: center; + padding-top: 40px; + text-align: center; + transition: height 0.5s ease-in-out; + width: 100%; &__balance { -webkit-transform: scale3d(1, 1, 1) translateY(45px); diff --git a/www/views/walletDetails.html b/www/views/walletDetails.html index 6e05862aa..2341adcba 100644 --- a/www/views/walletDetails.html +++ b/www/views/walletDetails.html @@ -300,7 +300,7 @@ {{updatingTxHistoryProgress}} transactions downloaded -
+
From 22e1c397d0a74cc17a4d6f1ea92a5faa30ed7347 Mon Sep 17 00:00:00 2001 From: Sebastiaan Pasma Date: Wed, 5 Sep 2018 16:19:31 +0200 Subject: [PATCH 2/3] Removed duplicate android header + refactored animation to use CSS animations instead of javascript calculated animations --- .../controllers/wallet-details.controller.js | 92 +--------- src/sass/views/walletDetails.scss | 40 +++- www/views/walletDetails.html | 173 +++--------------- 3 files changed, 66 insertions(+), 239 deletions(-) diff --git a/src/js/controllers/wallet-details.controller.js b/src/js/controllers/wallet-details.controller.js index 365ce86a3..7a06d4fb6 100644 --- a/src/js/controllers/wallet-details.controller.js +++ b/src/js/controllers/wallet-details.controller.js @@ -19,8 +19,6 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun var log = new window.BitAnalytics.LogEvent("wallet_details_open", [], [channel]); window.BitAnalytics.LogEventHandlers.postEvent(log); - $scope.amountIsCollapsible = !$scope.isAndroid; - $scope.openExternalLink = function(url, target) { externalLinkService.open(url, target); }; @@ -265,10 +263,12 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun $scope.txHistoryPaddingBottom = 0; function getScrollPosition() { var scrollPosition = $ionicScrollDelegate.getScrollPosition(); + + $timeout(function() { + getScrollPosition(); + }, 200); + if (!scrollPosition) { - $timeout(function() { - getScrollPosition(); - }, 25); return; } var pos = scrollPosition.top; @@ -276,91 +276,16 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun $scope.txHistoryPaddingBottom = "200px"; } if (pos === prevPos) { - $timeout(function() { - getScrollPosition(); - }, 25); return; } prevPos = pos; - refreshAmountSection(pos); + $scope.scrollPosition = pos; } - function refreshAmountSection(scrollPos) { - var AMOUNT_HEIGHT_BASE = 210; - $scope.showBalanceButton = false; - if ($scope.status) { - $scope.showBalanceButton = ($scope.status.totalBalanceSat != $scope.status.spendableAmount); - if ($scope.showBalanceButton) { - AMOUNT_HEIGHT_BASE = 270; - } - } - if (!$scope.amountIsCollapsible) { - var t = ($scope.showBalanceButton ? 15 : 45); - $scope.amountScale = 'translateY(' + t + 'px)'; - return; - } - - scrollPos = scrollPos || 0; - var amountHeight = AMOUNT_HEIGHT_BASE - scrollPos; - if (amountHeight < 80) { - amountHeight = 80; - } - var contentMargin = amountHeight; - if (contentMargin > AMOUNT_HEIGHT_BASE) { - contentMargin = AMOUNT_HEIGHT_BASE; - } - - var amountScale = (amountHeight / AMOUNT_HEIGHT_BASE); - if (amountScale < 0.5) { - amountScale = 0.5; - } - if (amountScale > 1.1) { - amountScale = 1.1; - } - - var s = amountScale; - - // Make space for the balance button when it needs to display. - var TOP_NO_BALANCE_BUTTON = 115; - var TOP_BALANCE_BUTTON = 30; - var top = TOP_NO_BALANCE_BUTTON; - if ($scope.showBalanceButton) { - top = TOP_BALANCE_BUTTON; - } - - var amountTop = ((amountScale - 0.80) / 0.80) * top; - if (amountTop < -2) { - amountTop = -2; - } - if (amountTop > top) { - amountTop = top; - } - - var t = amountTop; - if (scrollPos > 50) { - contentMargin = amountHeight = 80; - $scope.altAmountOpacity = 0.01; - $scope.buttonsOpacity = 0.01; - } else { - contentMargin = amountHeight = 210; - $scope.altAmountOpacity = 1; - $scope.buttonsOpacity = 1; - } - $scope.amountHeight = amountHeight + 'px'; - $scope.contentMargin = contentMargin + 'px'; - $scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ') translateY(' + t + 'px)'; - $scope.$digest(); - getScrollPosition(); - } - - var scrollEffectTimeout; var scrollWatcherInitialized; $scope.$on("$ionicView.enter", function(event, data) { if ($scope.isCordova && $scope.isAndroid) setAndroidStatusBarColor(); - if (scrollWatcherInitialized || !$scope.amountIsCollapsible) { - return; - } scrollWatcherInitialized = true; }); @@ -401,8 +326,11 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun $scope.$on("$ionicView.afterEnter", function(event, data) { $scope.updateAll(); - refreshAmountSection(); + // refreshAmountSection(); refreshInterval = $interval($scope.onRefresh, 10 * 1000); + $timeout(function() { + getScrollPosition(); + }, 1000); }); $scope.$on("$ionicView.afterLeave", function(event, data) { diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index 4e94f6a29..3461d57b6 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -1,3 +1,4 @@ +$wallet-details-transition: all 0.25s ease-in-out; .wallet-details { &__tx-amount { font-size: 16px; @@ -137,6 +138,20 @@ margin-top: 20px; margin-top: env(safe-area-inset-top); } + &.collapse { + ion-content { + margin-top: 40px; + } + .amount { + &__scale, &__error { + -webkit-transform: scale3d(0.5, 0.5, 0.5) translateY(0px); + transform: scale3d(0.5, 0.5, 0.5) translateY(0px); + } + } + .amount-alternative, .send-receive-buttons, .wallet-details-wallet-info { + opacity: 0; + } + } } .bar-header { border: 0; @@ -152,14 +167,14 @@ background-color: inherit !important; } ion-content { - - &.collapsible { - margin-top: 230px; - } - padding-top: 0; top: 0; - transition: margin-top 0.5s ease-in-out; + transition: $wallet-details-transition; + + margin-top: 185px; + @media only screen and (max-height:500px) { + margin-top: 165px; + } margin-bottom: 16px; .scroll { @@ -200,8 +215,7 @@ width: 100%; position: absolute; bottom: 20px; - transition-delay: 0.25s; - transition: opacity 0.4s ease-in-out; + transition: $wallet-details-transition; >.col { padding: 5px 10px; margin-bottom: 0; @@ -224,16 +238,22 @@ align-items: center; color: #fff; display: block; + height: 230px; + @media only screen and (max-height:500px) { + height: 210px; + } + justify-content: center; padding-top: 40px; text-align: center; - transition: height 0.5s ease-in-out; + transition: $wallet-details-transition; width: 100%; &__balance { -webkit-transform: scale3d(1, 1, 1) translateY(45px); transform: scale3d(1, 1, 1) translateY(45px); + transition: $wallet-details-transition; } &__updating { @@ -243,6 +263,7 @@ &-alternative { line-height: 36px; + transition: $wallet-details-transition; } &__button-balance { @@ -258,6 +279,7 @@ &__error { font-size: 14px; padding: 35px 20px; + opacity: 1; } } diff --git a/www/views/walletDetails.html b/www/views/walletDetails.html index 2341adcba..520cc4ab6 100644 --- a/www/views/walletDetails.html +++ b/www/views/walletDetails.html @@ -16,79 +16,74 @@ } -
+
-
+
-
+
{{updateStatusError}}
-
+
This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.
+ class="amount__balance amount__scale">
+ ng-if="status.totalBalanceStr && wallet.network == 'livenet'">
+ ng-if="status.totalBalanceStr && selectedPriceDisplay=='crypto' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning" + class="amount__balance amount__scale">
+ ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'">
-
[Balance Hidden] -
+
Tap and hold to show
-
+
[Scanning Funds] -
+
Please wait
-
+
-
+
Receive @@ -118,136 +113,18 @@
-
+
- + - -
- -
- -
- {{updateStatusError}} -
- -
- This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information. -
- -
- -
- -
-
- -
- -
- -
-
- -
- [Balance Hidden] -
- Tap and hold to show -
-
- - -
- [Scanning Funds] -
- Please wait -
-
- - -
- -
- -
- -
- -
-
-
- Receive -
-
-
-
- Buy Bitcoin -
-
- Send -
-
-
- -
-
- -
-
- - - Wallet not backed up From 525afac92e4231a23bf066031bd00dbdf0e8ea82 Mon Sep 17 00:00:00 2001 From: Sebastiaan Pasma Date: Wed, 5 Sep 2018 16:36:53 +0200 Subject: [PATCH 3/3] scss var name change --- src/sass/views/walletDetails.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index 3461d57b6..6126c6b8b 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -1,4 +1,4 @@ -$wallet-details-transition: all 0.25s ease-in-out; +$wallet-details-collapse-transition: all 0.25s ease-in-out; .wallet-details { &__tx-amount { font-size: 16px; @@ -169,7 +169,7 @@ $wallet-details-transition: all 0.25s ease-in-out; ion-content { padding-top: 0; top: 0; - transition: $wallet-details-transition; + transition: $wallet-details-collapse-transition; margin-top: 185px; @media only screen and (max-height:500px) { @@ -215,7 +215,7 @@ $wallet-details-transition: all 0.25s ease-in-out; width: 100%; position: absolute; bottom: 20px; - transition: $wallet-details-transition; + transition: $wallet-details-collapse-transition; >.col { padding: 5px 10px; margin-bottom: 0; @@ -247,13 +247,13 @@ $wallet-details-transition: all 0.25s ease-in-out; justify-content: center; padding-top: 40px; text-align: center; - transition: $wallet-details-transition; + transition: $wallet-details-collapse-transition; width: 100%; &__balance { -webkit-transform: scale3d(1, 1, 1) translateY(45px); transform: scale3d(1, 1, 1) translateY(45px); - transition: $wallet-details-transition; + transition: $wallet-details-collapse-transition; } &__updating { @@ -263,7 +263,7 @@ $wallet-details-transition: all 0.25s ease-in-out; &-alternative { line-height: 36px; - transition: $wallet-details-transition; + transition: $wallet-details-collapse-transition; } &__button-balance {