prelim wallet details header collapse transition

src/js/controllers/walletDetails.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, profileService, lodash, configService, gettextCatalog, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicHistory) {
+angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, profileService, lodash, configService, gettextCatalog, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicHistory, $ionicScrollDelegate, $window) {
 
   var HISTORY_SHOW_LIMIT = 10;
   var currentTxHistoryPage = 0;
@@ -230,6 +230,22 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
    //$state.transitionTo('tabs.preferences.backupWarning');
   };
 
+  $scope.amountHeight = '180px';
+
+  $scope.getScrollPosition = function(){
+    console.log($ionicScrollDelegate.getScrollPosition().top);
+    var pos = $ionicScrollDelegate.getScrollPosition().top;
+    var amountHeight = 180 - pos;
+    if(amountHeight < 80) {
+      amountHeight = 80;
+    }
+    console.log('amountHeight', amountHeight);
+    $window.requestAnimationFrame(function() {
+      $scope.amountHeight = amountHeight + 'px';
+      $scope.$evalAsync(angular.noop);
+    });
+  };
+
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
 
     $scope.walletId = data.stateParams.walletId;

src/sass/views/walletDetails.scss

@@ -104,9 +104,16 @@
   .nav-bar-block, .bar {
   background-color: inherit !important;
   }
+  ion-content {
+    margin-top: 180px;
+    padding-top: 0;
+    top: 0;
+    //top: 40px;
+  }
   .amount-wrapper {
     position: relative;
     overflow: visible;
+    //margin-top: 40px;
 
     .amount-bg {
       content: '';
@@ -120,10 +127,14 @@
   .amount {
     width: 100%;
     text-align: center;
-    padding: 2rem 1rem 1.5rem 1rem;
+    //padding: 2rem 1rem 1.5rem 1rem;
     color: #fff;
-    height: 140px;
+    height: 180px;
     margin-bottom: 10px;
+    padding-top: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &-alternative {
       line-height: 36px;
@@ -157,7 +168,7 @@
 }
 
 .wallet-not-backed-up-warning {
-  margin-top: -15px;
+  //margin-top: -15px;
   margin-bottom: 1rem;
   background: #E15061;
   text-align: center;

www/views/walletDetails.html

@@ -10,14 +10,62 @@
     </ion-nav-buttons>
   </ion-nav-bar>
 
-  <ion-content>
+
+  <div class="amount-wrapper" ng-show="wallet && wallet.isComplete()" ng-style="{'background-color':wallet.color}">
+    <div class="amount-bg" ng-style="{'background-color':wallet.color}"></div>
+    <div ng-style="{'background-color':wallet.color, 'height': amountHeight}" class="amount">
+      <div ng-if="!notAuthorized && !updatingStatus">
+
+        <div ng-show="updateStatusError">
+          <a class="button button-outline button-light button-small" ng-click='update()' translate>Tap to retry</a>
+        </div>
+
+        <div ng-show="walletNotRegistered">
+          <span class="size-12 db m10b" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
+          <a class="button button-outline button-light button-small" ng-click='recreate()' translate>Recreate</a>
+        </div>
+
+        <div ng-show="wallet.walletScanStatus == 'error'" ng-click='retryScan()'>
+          <span translate>Scan status finished with error</span>
+          <br><span translate>Tap to retry</span>
+        </div>
+
+
+        <div ng-click='updateAll(true)' ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && !wallet.balanceHidden" on-hold="hideToggle()">
+          <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 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>
+          </div>
+        </div>
+
+        <div ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && wallet.balanceHidden" on-hold="hideToggle()">
+          <strong class="size-24" translate>[Balance Hidden]</strong>
+          <div class="size-14" translate>
+            Tap and hold to show
+          </div>
+        </div>
+      </div>
+      <div ng-if="updatingStatus">
+        <div class="size-36">
+          <strong>...</strong>
+        </div>
+      </div>
+    </div> <!-- amount -->
+
+    <div class="wallet-details-wallet-info">
+      <span ng-include="'views/includes/walletInfo.html'"></span>
+    </div>
+  </div> <!-- oh -->
+  <ion-content on-scroll="getScrollPosition()" ng-style="{'margin-top': amountHeight}">
     <ion-refresher
       ng-if="isAndroid"
       pulling-icon="ion-ios-refresh"
       spinner="ios-small"
       on-refresh="onRefresh()">
     </ion-refresher>
-    <div class="amount-wrapper" ng-show="wallet && wallet.isComplete()" ng-style="{'background-color':wallet.color}">
+    <!-- <div class="amount-wrapper" ng-show="wallet && wallet.isComplete()" ng-style="{'background-color':wallet.color}">
       <div class="amount-bg" ng-style="{'background-color':wallet.color}"></div>
       <div ng-style="{'background-color':wallet.color}" class="amount">
         <div ng-if="!notAuthorized && !updatingStatus">
@@ -58,12 +106,12 @@
             <strong>...</strong>
           </div>
         </div>
-      </div> <!-- amount -->
+      </div>
 
       <div class="wallet-details-wallet-info">
         <span ng-include="'views/includes/walletInfo.html'"></span>
       </div>
-    </div> <!-- oh -->
+    </div> -->
     <a class="wallet-not-backed-up-warning" ng-show="!isBackedUp" ng-click="backup()">
       Wallet not backed up
     </a>