Merge pull request #327 from Bitcoin-com/wallet/task/567
Improvement - 567 - Stuttering animation when scrolling transaction history.
This commit is contained in:
Jean-Baptiste Dominguez
GitHub
commit
b0178c0673
3 changed files with 76 additions and 238 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,79 +16,74 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<div class="bp-content" ng-class="{'status-bar': isCordova}">
|
||||
<div class="bp-content" ng-class="{'status-bar': isCordova, 'collapse': scrollPosition > 50}">
|
||||
|
||||
<div class="amount-wrapper" ng-show="wallet && wallet.isComplete() && amountIsCollapsible" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color':wallet.color}">
|
||||
<div class="amount-wrapper" ng-show="wallet && wallet.isComplete()" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color':wallet.color}">
|
||||
|
||||
<div
|
||||
ng-style="{'background-color':wallet.color, 'height': amountHeight}"
|
||||
class="amount"
|
||||
ng-class="{collapsible: amountIsCollapsible, 'wallet-background-color-default': !wallet.color, 'no-alternative': wallet.network != 'livenet'}"
|
||||
ng-style="{'background-color':wallet.color}"
|
||||
class="amount collapsible"
|
||||
ng-class="{'wallet-background-color-default': !wallet.color, 'no-alternative': wallet.network != 'livenet'}"
|
||||
>
|
||||
|
||||
<div class="amount__error" ng-style="{opacity: altAmountOpacity}" ng-show="updateStatusError">
|
||||
<div class="amount__error" ng-show="updateStatusError">
|
||||
<span>{{updateStatusError}}</span>
|
||||
</div>
|
||||
|
||||
<div class="amount__error" ng-style="{opacity: altAmountOpacity}" ng-show="walletNotRegistered">
|
||||
<div class="amount__error" ng-show="walletNotRegistered">
|
||||
<span translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ng-show="selectedPriceDisplay=='fiat' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning"
|
||||
ng-if="selectedPriceDisplay=='fiat' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning"
|
||||
on-hold="hideToggle()"
|
||||
ng-style="{'transform': amountScale}"
|
||||
ng-class="{amount__balance: amountIsCollapsible}">
|
||||
class="amount__balance amount__scale">
|
||||
<strong class="size-36" ng-show="status.totalBalanceAlternative">
|
||||
<formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
|
||||
</strong>
|
||||
<div
|
||||
class="size-14 amount-alternative"
|
||||
ng-if="status.totalBalanceStr && wallet.network == 'livenet'"
|
||||
ng-style="{opacity: altAmountOpacity}">
|
||||
ng-if="status.totalBalanceStr && wallet.network == 'livenet'">
|
||||
<formatted-amount value="{{status.totalBalanceStr}}" size-equal="true"></formatted-amount>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ng-show="selectedPriceDisplay=='crypto' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning"
|
||||
on-hold="hideToggle()"
|
||||
ng-style="{'transform': amountScale}"
|
||||
ng-if="status.totalBalanceStr"
|
||||
ng-class="{amount__balance: amountIsCollapsible}">
|
||||
ng-if="status.totalBalanceStr && selectedPriceDisplay=='crypto' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning"
|
||||
class="amount__balance amount__scale">
|
||||
<strong class="size-36">
|
||||
<formatted-amount value="{{status.totalBalanceStr}}"></formatted-amount>
|
||||
</strong>
|
||||
<div
|
||||
class="size-14 amount-alternative"
|
||||
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
|
||||
ng-style="{opacity: altAmountOpacity}">
|
||||
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'">
|
||||
<formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-style="{'transform': amountScale}"
|
||||
class="amount__balance"
|
||||
ng-show="!updateStatusError && wallet.balanceHidden && !wallet.scanning"
|
||||
<div
|
||||
class="amount__balance amount__scale"
|
||||
ng-if="!updateStatusError && wallet.balanceHidden && !wallet.scanning"
|
||||
on-hold="hideToggle()">
|
||||
<strong class="size-24" translate>[Balance Hidden]</strong>
|
||||
<div ng-style="{opacity: altAmountOpacity}" class="size-14 amount-alternative" translate>
|
||||
<div class="size-14 amount-alternative" translate>
|
||||
Tap and hold to show
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-style="{'transform': amountScale}"
|
||||
class="amount__balance"
|
||||
ng-show="!updateStatusError && wallet.scanning">
|
||||
<div
|
||||
class="amount__balance amount__scale"
|
||||
ng-if="!updateStatusError && wallet.scanning">
|
||||
<strong class="size-24" translate>[Scanning Funds]</strong>
|
||||
<div ng-style="{opacity: altAmountOpacity}" class="size-14 amount-alternative" translate>
|
||||
<div class="size-14 amount-alternative" translate>
|
||||
Please wait
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-if="!wallet.balanceHidden && !wallet.scanning && showBalanceButton" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
|
||||
<div ng-if="!wallet.balanceHidden && !wallet.scanning && showBalanceButton" class="amount__scale">
|
||||
<button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
|
||||
<i class="icon ion-ios-checkmark-outline"></i>
|
||||
<strong>
|
||||
|
|
@ -101,7 +96,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="send-receive-buttons row" ng-if="(status.availableBalanceSat || status.availableBalanceSat === 0) && (buttonsOpacity > 0 || isAndroid)" ng-style="{opacity: buttonsOpacity}">
|
||||
<div class="send-receive-buttons row" ng-if="(status.availableBalanceSat || status.availableBalanceSat === 0)">
|
||||
<div class="col">
|
||||
<div class="button button-outline button-white-outline" ng-click="goToReceive()">
|
||||
<span translate>Receive</span>
|
||||
|
|
@ -118,136 +113,18 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}">
|
||||
<div class="wallet-details-wallet-info">
|
||||
<span ng-include="'views/includes/walletInfo.html'"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-content ng-style="{'margin-top': contentMargin}" ng-class="{collapsible: amountIsCollapsible}">
|
||||
<ion-content class="amount__balance">
|
||||
<ion-refresher
|
||||
pulling-icon="ion-ios-refresh"
|
||||
spinner="ios-small"
|
||||
on-refresh="onRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!-- Start Balance view duplicate (for Android compatibility) -->
|
||||
<div class="amount-wrapper" ng-show="wallet && wallet.isComplete() && !amountIsCollapsible" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color':wallet.color}">
|
||||
|
||||
<div
|
||||
ng-style="{'background-color':wallet.color, 'height': amountHeight}"
|
||||
class="amount"
|
||||
ng-class="{collapsible: amountIsCollapsible, 'wallet-background-color-default': !wallet.color, 'no-alternative': wallet.network != 'livenet'}"
|
||||
>
|
||||
|
||||
<div class="amount__error" ng-style="{opacity: altAmountOpacity}" ng-show="updateStatusError">
|
||||
<span>{{updateStatusError}}</span>
|
||||
</div>
|
||||
|
||||
<div class="amount__error" ng-style="{opacity: altAmountOpacity}" ng-show="walletNotRegistered">
|
||||
<span translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ng-click='updateAll(true)'
|
||||
ng-show="selectedPriceDisplay=='crypto' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning"
|
||||
on-hold="hideToggle()"
|
||||
ng-style="{'transform': amountScale}"
|
||||
ng-class="{amount__balance: amountIsCollapsible}">
|
||||
<strong ng-if="status.totalBalanceStr" class="size-36"><formatted-amount value="{{status.totalBalanceStr}}"></formatted-amount></strong>
|
||||
<div
|
||||
class="size-14 amount-alternative"
|
||||
ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
|
||||
ng-style="{opacity: altAmountOpacity}">
|
||||
<formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ng-click='updateAll(true)'
|
||||
ng-show="selectedPriceDisplay=='fiat' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning"
|
||||
on-hold="hideToggle()"
|
||||
ng-style="{'transform': amountScale}"
|
||||
ng-class="{amount__balance: amountIsCollapsible}">
|
||||
<strong class="size-36"><formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount></strong>
|
||||
<div
|
||||
class="size-14 amount-alternative"
|
||||
ng-if="status.totalBalanceStr && wallet.network == 'livenet'"
|
||||
ng-style="{opacity: altAmountOpacity}">
|
||||
<formatted-amount value="{{status.totalBalanceStr}}"></formatted-amount>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-style="{'transform': amountScale}"
|
||||
class="amount__balance"
|
||||
ng-show="!updateStatusError && wallet.balanceHidden && !wallet.scanning"
|
||||
on-hold="hideToggle()">
|
||||
<strong class="size-24" translate>[Balance Hidden]</strong>
|
||||
<div ng-style="{opacity: altAmountOpacity}" class="size-16 amount-alternative" translate>
|
||||
Tap and hold to show
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-style="{'transform': amountScale}"
|
||||
class="amount__balance"
|
||||
ng-show="!updateStatusError && wallet.scanning">
|
||||
<strong class="size-24" translate>[Scanning Funds]</strong>
|
||||
<div ng-style="{opacity: altAmountOpacity}" class="size-16 amount-alternative" translate>
|
||||
Please wait
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-if="selectedPriceDisplay=='crypto' && !wallet.balanceHidden && !wallet.scanning && showBalanceButton" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
|
||||
<button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
|
||||
<i class="icon ion-ios-checkmark-outline"></i>
|
||||
<strong>
|
||||
{{status.spendableBalanceStr}}
|
||||
</strong>
|
||||
|
||||
<span>
|
||||
<formatted-amount value="{{status.spendableBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div ng-if="selectedPriceDisplay=='fiat' && !wallet.balanceHidden && !wallet.scanning && showBalanceButton" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
|
||||
<button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
|
||||
<i class="icon ion-ios-checkmark-outline"></i>
|
||||
<strong>
|
||||
<formatted-amount value="{{status.spendableBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
|
||||
</strong>
|
||||
|
||||
<span>
|
||||
{{status.spendableBalanceStr}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="send-receive-buttons row" ng-if="(status.availableBalanceSat || status.availableBalanceSat === 0) && (buttonsOpacity > 0 || isAndroid)" ng-style="{opacity: buttonsOpacity}">
|
||||
<div class="col">
|
||||
<div class="button button-outline button-white-outline" ng-click="goToReceive()">
|
||||
<span translate>Receive</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="button button-outline button-white-outline" ng-if="!status.availableBalanceSat" ng-click="goToBuy()">
|
||||
<span translate>Buy Bitcoin</span>
|
||||
</div>
|
||||
<div class="button button-outline button-white-outline" ng-if="status.availableBalanceSat>0" ng-click="goToSend()">
|
||||
<span translate>Send</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}">
|
||||
<span ng-include="'views/includes/walletInfo.html'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Balance view duplicate (for Android compatibility) -->
|
||||
|
||||
|
||||
<a class="wallet-not-backed-up-warning" ng-if="wallet.needsBackup" ui-sref="tabs.wallet.backupWarning({from: 'tabs.wallet'})" translate>
|
||||
Wallet not backed up
|
||||
</a>
|
||||
|
|
@ -300,7 +177,7 @@
|
|||
<span translate>{{updatingTxHistoryProgress}} transactions downloaded</span>
|
||||
</div>
|
||||
|
||||
<div class="wallet-details__list" ng-show="txHistory[0] && !updatingTxHistory">
|
||||
<div ng-style="{'padding-bottom': txHistoryPaddingBottom}" class="wallet-details__list" ng-show="txHistory[0] && !updatingTxHistory">
|
||||
<div ng-repeat="btx in txHistory track by $index" ng-click="openTxModal(btx)">
|
||||
<span ng-include="'views/includes/walletHistory.html'"></span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue