diff --git a/src/js/controllers/wallet-details.controller.js b/src/js/controllers/wallet-details.controller.js index 9d306039f..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); }; @@ -262,97 +260,32 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun }; var prevPos; - + $scope.txHistoryPaddingBottom = 0; function getScrollPosition() { var scrollPosition = $ionicScrollDelegate.getScrollPosition(); + + $timeout(function() { + getScrollPosition(); + }, 200); + if (!scrollPosition) { - $window.requestAnimationFrame(function() { - getScrollPosition(); - }); return; } var pos = scrollPosition.top; + if (pos > 0) { + $scope.txHistoryPaddingBottom = "200px"; + } if (pos === prevPos) { - $window.requestAnimationFrame(function() { - getScrollPosition(); - }); return; } prevPos = pos; - refreshAmountSection(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; - - $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(); - }); + $scope.scrollPosition = pos; } var scrollWatcherInitialized; $scope.$on("$ionicView.enter", function(event, data) { if ($scope.isCordova && $scope.isAndroid) setAndroidStatusBarColor(); - if (scrollWatcherInitialized || !$scope.amountIsCollapsible) { - return; - } scrollWatcherInitialized = true; }); @@ -393,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 5c235ad97..6126c6b8b 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -1,3 +1,4 @@ +$wallet-details-collapse-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,13 +167,14 @@ background-color: inherit !important; } ion-content { - - &.collapsible { - margin-top: 230px; - } - padding-top: 0; top: 0; + transition: $wallet-details-collapse-transition; + + margin-top: 185px; + @media only screen and (max-height:500px) { + margin-top: 165px; + } margin-bottom: 16px; .scroll { @@ -199,7 +215,7 @@ width: 100%; position: absolute; bottom: 20px; - + transition: $wallet-details-collapse-transition; >.col { padding: 5px 10px; margin-bottom: 0; @@ -219,18 +235,25 @@ } } .amount { - width: 100%; - text-align: center; - color: #fff; - height: 230px; - padding-top: 40px; - display: block; 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: $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-collapse-transition; } &__updating { @@ -240,6 +263,7 @@ &-alternative { line-height: 36px; + transition: $wallet-details-collapse-transition; } &__button-balance { @@ -255,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 6e05862aa..520cc4ab6 100644 --- a/www/views/walletDetails.html +++ b/www/views/walletDetails.html @@ -16,79 +16,74 @@ } -