From e2cd188e39cde86637faf598cf914dc1ea4033a9 Mon Sep 17 00:00:00 2001
From: Marty Alcala <marty@bitpay.com>
Date: Wed, 9 Nov 2016 13:15:42 -0500
Subject: [PATCH] add scaling and opacity transitions

---
 src/js/controllers/walletDetails.js | 15 +++++++++++++++
 www/views/walletDetails.html        | 18 +++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/js/controllers/walletDetails.js b/src/js/controllers/walletDetails.js
index 994f741a6..ead4a04dc 100644
--- a/src/js/controllers/walletDetails.js
+++ b/src/js/controllers/walletDetails.js
@@ -239,9 +239,24 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     if(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);
     $window.requestAnimationFrame(function() {
       $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);
     });
   };
diff --git a/www/views/walletDetails.html b/www/views/walletDetails.html
index b7d87870f..dc8156d67 100644
--- a/www/views/walletDetails.html
+++ b/www/views/walletDetails.html
@@ -31,9 +31,21 @@
         </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>
-          <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 style="margin-bottom:.5rem"><span translate>Available</span>: {{status.totalBalanceStr}}</div>
             <div><span translate>Confirming</span>: {{status.pendingAmountStr}}</div>
@@ -54,7 +66,7 @@
       </div>
     </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>
     </div>
   </div> <!-- oh -->