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

Removed duplicate android header + refactored animation to use CSS animations instead of javascript calculated animations

Browse source
This commit is contained in:
Sebastiaan Pasma 2018-09-05 16:19:31 +02:00
commit 22e1c397d0
No known key found for this signature in database
GPG key ID: 9A2B0C8B95A1D26F
3 changed files with 66 additions and 239 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);
};
@ -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) {

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

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