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

src/js/controllers/wallet-details.controller.js

@@ -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) {

src/sass/views/walletDetails.scss

@@ -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: $wallet-details-transition;
-      transition: opacity 0.4s ease-in-out;
       >.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;
     }
 
   }

www/views/walletDetails.html

@@ -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}"
+      ng-style="{'background-color':wallet.color}"
-      class="amount"
+      class="amount collapsible"
-      ng-class="{collapsible: amountIsCollapsible, 'wallet-background-color-default': !wallet.color, 'no-alternative': wallet.network != 'livenet'}"
+      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}"
+        class="amount__balance amount__scale">
-        ng-class="{amount__balance: amountIsCollapsible}">
         <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-if="status.totalBalanceStr && wallet.network == 'livenet'">
-          ng-style="{opacity: altAmountOpacity}">
           <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 && selectedPriceDisplay=='crypto' && !updateStatusError && !wallet.balanceHidden && !wallet.scanning"
-        ng-if="status.totalBalanceStr"
+        class="amount__balance amount__scale">
-        ng-class="{amount__balance: amountIsCollapsible}">
         <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-if="status.totalBalanceAlternative && wallet.network == 'livenet'">
-          ng-style="{opacity: altAmountOpacity}">
           <formatted-amount value="{{status.totalBalanceAlternative}}" currency="{{status.alternativeIsoCode}}"></formatted-amount>
         </div>
       </div>
 
-      <div ng-style="{'transform': amountScale}"
+      <div
-      class="amount__balance"
+      class="amount__balance amount__scale"
-      ng-show="!updateStatusError && wallet.balanceHidden  && !wallet.scanning"
+      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}"
+      <div
-      class="amount__balance"
+      class="amount__balance amount__scale"
-      ng-show="!updateStatusError && wallet.scanning">
+      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>
-          &nbsp;
-          <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>
-          &nbsp;
-          <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>