add animations - fix UI
This commit is contained in:
Javier
parent
b4aadeb7be
commit
4964a3d7c3
3 changed files with 54 additions and 46 deletions
|
|
@ -56,57 +56,58 @@
|
|||
<ion-content id="walletHome" class="walletHome tab-view tab-in" scroll="false">
|
||||
<ion-content delegate-handle="balance" on-scroll="freezeScroll()">
|
||||
<ion-refresher
|
||||
pulling-icon="ion-ios-refresh"
|
||||
on-refresh="index.updateAll({triggerTxUpdate: true})">
|
||||
</ion-refresher>
|
||||
<div class="oh pr">
|
||||
<div ng-style="{'background-color':index.backgroundColor}" ng-class="{amount: !shouldCollapse, amountcollapsed: shouldCollapse}">
|
||||
<div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
|
||||
<div class="m15t" ng-show="index.updateError && !shouldCollapse" ng-click='index.updateAll({triggerTxUpdate: true})'>
|
||||
<span class="size-12 db m10b">{{index.updateError|translate}}</span>
|
||||
<button class="outline white tiny round" translate>Tap to retry</button>
|
||||
</div>
|
||||
|
||||
<div ng-show="index.walletScanStatus == 'error' && !shouldCollapse" ng-click='index.retryScan()'>
|
||||
<span translate>Scan status finished with error</span>
|
||||
<br><span translate>Tap to retry</span>
|
||||
</div>
|
||||
|
||||
<div ng-click='index.updateAll({triggerTxUpdate: true})' ng-show="!index.updateError && index.walletScanStatus != 'error' && !index.shouldHideBalance" on-hold="index.onHold()">
|
||||
<strong class="size-36" ng-if="!shouldCollapse">{{index.totalBalanceStr}}</strong>
|
||||
<strong class="size-24" ng-if="shouldCollapse">{{index.totalBalanceStr}}</strong>
|
||||
<div class="size-14" ng-if="index.totalBalanceAlternative && !shouldCollapse">{{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}</div>
|
||||
<div class="size-14"
|
||||
ng-if="index.pendingAmount">
|
||||
<span translate>Pending Confirmation</span>:
|
||||
{{index.pendingAmountStr}}
|
||||
pulling-icon="ion-ios-refresh"
|
||||
on-refresh="index.updateAll({triggerTxUpdate: true})">
|
||||
</ion-refresher>
|
||||
<div class="oh pr">
|
||||
<div ng-style="{'background-color':index.backgroundColor}" ng-class="{amount: !shouldCollapse, amountcollapsed: shouldCollapse}">
|
||||
<div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
|
||||
<div class="m15t" ng-show="index.updateError && !shouldCollapse" ng-click='index.updateAll({triggerTxUpdate: true})'>
|
||||
<span class="size-12 db m10b">{{index.updateError|translate}}</span>
|
||||
<button class="outline white tiny round" translate>Tap to retry</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div ng-show="!index.updateError && index.walletScanStatus != 'error' && index.shouldHideBalance" on-hold="index.onHold()">
|
||||
<div ng-show="index.walletScanStatus == 'error' && !shouldCollapse" ng-click='index.retryScan()'>
|
||||
<span translate>Scan status finished with error</span>
|
||||
<br><span translate>Tap to retry</span>
|
||||
</div>
|
||||
|
||||
<div ng-click='index.updateAll({triggerTxUpdate: true})' ng-show="!index.updateError && index.walletScanStatus != 'error' && !index.shouldHideBalance" on-hold="index.onHold()">
|
||||
<strong class="size-36" ng-if="!shouldCollapse">{{index.totalBalanceStr}}</strong>
|
||||
<strong class="size-24" ng-if="shouldCollapse">{{index.totalBalanceStr}}</strong>
|
||||
<div class="size-14" ng-if="index.totalBalanceAlternative && !shouldCollapse">{{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}</div>
|
||||
<div class="size-14"
|
||||
ng-if="index.pendingAmount">
|
||||
<span translate>Pending Confirmation</span>:
|
||||
{{index.pendingAmountStr}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="!index.updateError && index.walletScanStatus != 'error' && index.shouldHideBalance" on-hold="index.onHold()">
|
||||
<strong class="size-24" translate>[Balance Hidden]</strong>
|
||||
<div class="size-14" ng-if="!shouldCollapse" transalate>
|
||||
Tap and hold to show
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="index.anyOnGoingProcess">
|
||||
<div class="size-36">
|
||||
<strong>...</strong>
|
||||
<div ng-if="index.anyOnGoingProcess">
|
||||
<div class="size-36">
|
||||
<strong>...</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- amount -->
|
||||
</div> <!-- amount -->
|
||||
|
||||
<div ng-class="{walletinfo: !shouldCollapse, walletinfocollapsed: shouldCollapse}">
|
||||
<span ng-include="'views/includes/walletInfo.html'"></span>
|
||||
</div>
|
||||
<div class="camera-icon" ng-show="index.isComplete" ng-if="!shouldCollapse">
|
||||
<qr-scanner on-scan="home.onQrCodeScanned(data)"></qr-scanner>
|
||||
</div>
|
||||
</div> <!-- oh -->
|
||||
<div ng-class="{walletinfo: !shouldCollapse, walletinfocollapsed: shouldCollapse}">
|
||||
<span ng-include="'views/includes/walletInfo.html'"></span>
|
||||
</div>
|
||||
<div class="camera-icon" ng-show="index.isComplete" ng-if="!shouldCollapse">
|
||||
<qr-scanner on-scan="home.onQrCodeScanned(data)"></qr-scanner>
|
||||
</div>
|
||||
</div> <!-- oh -->
|
||||
</ion-content>
|
||||
<ion-content overflow-scroll="true" ng-class="{m150t: !shouldCollapse, m50t: shouldCollapse}" delegate-handle="transactions" on-scroll="collapseBalanceContent(index.updatingTxHistory && index.txProgress > 5)">
|
||||
|
||||
<ion-content overflow-scroll="false" class="fade" ng-class="{m150t: !shouldCollapse, m50t: shouldCollapse}" delegate-handle="transactions" on-scroll="collapseBalanceContent(index.updatingTxHistory && index.txProgress > 5)">
|
||||
<div class="m50b">
|
||||
<div class="oh pr m20t" ng-show="index.incorrectDerivation">
|
||||
<div class="text-center text-warning">
|
||||
|
|
|
|||
|
|
@ -32,21 +32,22 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
|
|||
ret.sendMaxInfo = {};
|
||||
var vanillaScope = ret;
|
||||
|
||||
$scope.collapseBalanceContent = function(val) {
|
||||
if (val) return;
|
||||
$scope.shouldCollapse = $ionicScrollDelegate.$getByHandle('transactions').getScrollPosition().top > 50 ? true : false;
|
||||
$scope.collapseBalanceContent = function(updating) {
|
||||
if (updating) return;
|
||||
|
||||
var scrollPosition = $ionicScrollDelegate.$getByHandle('transactions').getScrollPosition().top;
|
||||
$scope.shouldCollapse = scrollPosition > 50 ? true : false;
|
||||
|
||||
$timeout(function() {
|
||||
$scope.$apply();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.freezeScroll = function() {
|
||||
var scrollPosition = $ionicScrollDelegate.$getByHandle('balance').getScrollPosition().top;
|
||||
var openRatio = $ionicSideMenuDelegate.getOpenRatio();
|
||||
|
||||
if ($ionicScrollDelegate.$getByHandle('balance').getScrollPosition().top < -75) {
|
||||
$ionicScrollDelegate.$getByHandle('balance').freezeScroll(true);
|
||||
return;
|
||||
}
|
||||
if ($ionicSideMenuDelegate.getOpenRatio() != 0)
|
||||
if (scrollPosition < -75 || openRatio != 0)
|
||||
$ionicScrollDelegate.$getByHandle('balance').freezeScroll(true);
|
||||
else
|
||||
$ionicScrollDelegate.$getByHandle('balance').freezeScroll(false);
|
||||
|
|
|
|||
|
|
@ -460,6 +460,10 @@ ul.manage li {
|
|||
}
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: margin-top .2s ease;
|
||||
}
|
||||
|
||||
.dn {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1577,6 +1581,7 @@ input.ng-invalid-match {
|
|||
color: #fff;
|
||||
height: 150px;
|
||||
margin-bottom: 25px;
|
||||
transition: .4s all ease;
|
||||
}
|
||||
|
||||
.amountcollapsed {
|
||||
|
|
@ -1584,6 +1589,7 @@ input.ng-invalid-match {
|
|||
text-align: center;
|
||||
color: #fff;
|
||||
height: 50px;
|
||||
transition: .4s all ease;
|
||||
}
|
||||
|
||||
.alternative-amount {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue