anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #327 from Bitcoin-com/wallet/task/567

Browse source 
Improvement - 567 - Stuttering animation when scrolling transaction history.
This commit is contained in:
Jean-Baptiste Dominguez 2018-09-06 17:16:53 +09:00 • committed by GitHub
commit b0178c0673
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/js/controllers/wallet-details.controller.js
View file

@ -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) {

49
src/sass/views/walletDetails.scss
View file

@ -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;
}
}