mirror of https://github.com/BTCPrivate/copay.git
add scaling and opacity transitions
This commit is contained in:
parent
c3ef412383
commit
e2cd188e39
|
@ -239,9 +239,24 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
||||||
if(amountHeight < 80) {
|
if(amountHeight < 80) {
|
||||||
amountHeight = 80;
|
amountHeight = 80;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var amountScale = amountHeight/180;
|
||||||
|
if(amountScale < 0.5) {
|
||||||
|
amountScale = 0.5;
|
||||||
|
}
|
||||||
|
if(amountScale > 1.1) {
|
||||||
|
amountScale = 1.1;
|
||||||
|
}
|
||||||
|
var s = amountScale;
|
||||||
|
|
||||||
|
$scope.altAmountOpacity = (amountHeight - 100)/80;
|
||||||
|
|
||||||
console.log('amountHeight', amountHeight);
|
console.log('amountHeight', amountHeight);
|
||||||
$window.requestAnimationFrame(function() {
|
$window.requestAnimationFrame(function() {
|
||||||
$scope.amountHeight = amountHeight + 'px';
|
$scope.amountHeight = amountHeight + 'px';
|
||||||
|
$scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s+ ')';
|
||||||
|
console.log('$scope.amountScale', $scope.amountScale);
|
||||||
|
console.log('$scope.altAmountOpacity', $scope.altAmountOpacity);
|
||||||
$scope.$evalAsync(angular.noop);
|
$scope.$evalAsync(angular.noop);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
@ -31,9 +31,21 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div ng-click='updateAll(true)' ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && !wallet.balanceHidden" on-hold="hideToggle()">
|
<div
|
||||||
|
ng-click='updateAll(true)'
|
||||||
|
ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && !wallet.balanceHidden"
|
||||||
|
on-hold="hideToggle()"
|
||||||
|
ng-style="{'transform': amountScale}"
|
||||||
|
>
|
||||||
<strong ng-if="!status.pendingAmount" class="size-36">{{status.totalBalanceStr}}</strong>
|
<strong ng-if="!status.pendingAmount" class="size-36">{{status.totalBalanceStr}}</strong>
|
||||||
<div ng-if="!status.pendingAmount" class="size-14 amount-alternative" ng-if="status.totalBalanceAlternative">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</div>
|
<div
|
||||||
|
ng-if="!status.pendingAmount"
|
||||||
|
class="size-14 amount-alternative"
|
||||||
|
ng-if="status.totalBalanceAlternative"
|
||||||
|
ng-style="{opacity: altAmountOpacity}"
|
||||||
|
>
|
||||||
|
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||||
|
</div>
|
||||||
<div class="size-20" ng-if="status.pendingAmount">
|
<div class="size-20" ng-if="status.pendingAmount">
|
||||||
<div style="margin-bottom:.5rem"><span translate>Available</span>: {{status.totalBalanceStr}}</div>
|
<div style="margin-bottom:.5rem"><span translate>Available</span>: {{status.totalBalanceStr}}</div>
|
||||||
<div><span translate>Confirming</span>: {{status.pendingAmountStr}}</div>
|
<div><span translate>Confirming</span>: {{status.pendingAmountStr}}</div>
|
||||||
|
@ -54,7 +66,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- amount -->
|
</div> <!-- amount -->
|
||||||
|
|
||||||
<div class="wallet-details-wallet-info">
|
<div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}">
|
||||||
<span ng-include="'views/includes/walletInfo.html'"></span>
|
<span ng-include="'views/includes/walletInfo.html'"></span>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- oh -->
|
</div> <!-- oh -->
|
||||||
|
|
Loading…
Reference in New Issue