Fixes layouts and improves appearance of balance page.

src/js/controllers/modals/walletBalance.js

@@ -1,9 +0,0 @@
-'use strict';
-
-angular.module('copayApp.controllers').controller('walletBalanceController', function($scope) {
-
-  $scope.close = function() {
-    $scope.walletBalanceModal.hide();
-  };
-
-});

src/js/controllers/walletDetails.js

@@ -114,6 +114,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
       $scope.walletBalanceModal = modal;
       $scope.walletBalanceModal.show();
     });
+
+    $scope.close = function() {
+      $scope.walletBalanceModal.hide();
+    };
   };
 
   $scope.recreate = function() {
@@ -243,11 +247,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
   };
 
   var prevPos;
-  var screenInactive = true;
 
   function getScrollPosition() {
     var scrollPosition = $ionicScrollDelegate.getScrollPosition();
-    if (!scrollPosition || screenInactive) {
+    if (!scrollPosition) {
       $window.requestAnimationFrame(function() {
         getScrollPosition();
       });
@@ -280,11 +283,31 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
 
     var s = amountScale;
 
+    // Make space for the balance button when it needs to display.
+    var TOP_NO_BALANCE_BUTTON = 45;
+    var TOP_BALANCE_BUTTON = 10;
+    var top = TOP_NO_BALANCE_BUTTON;
+    $scope.showBalanceButton = ($scope.wallet.status.totalBalanceSat != $scope.wallet.status.spendableAmount);
+    if ($scope.showBalanceButton) {
+      top = TOP_BALANCE_BUTTON;
+      $scope.showBalanceButton = true;
+    }
+
+    var amountTop = ((amountScale - 0.5) / 0.5) * top;
+    if (amountTop < 5) {
+      amountTop = 5;
+    }
+    if (amountTop > top) {
+      amountTop = top;
+    }
+
+    var t = amountTop;
+
     $scope.altAmountOpacity = (amountHeight - 100) / 80;
     $window.requestAnimationFrame(function() {
       $scope.amountHeight = amountHeight + 'px';
       $scope.contentMargin = contentMargin + 'px';
-      $scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ')';
+      $scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ') translateY(' + t + 'px)';
       $scope.$digest();
       getScrollPosition();
     });
@@ -294,16 +317,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
 
   $scope.$on("$ionicView.enter", function(event, data) {
     setAndroidStatusBarColor();
-    $timeout(function() {
-      screenInactive = false;
-    }, 200);
     if (scrollWatcherInitialized || !$scope.amountIsCollapsible) {
       return;
     }
     scrollWatcherInitialized = true;
-    $timeout(function() {
-      getScrollPosition();
-    }, 100);
   });
 
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
@@ -317,6 +334,7 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     });
 
     $scope.updateAll();
+    getScrollPosition();
 
     listeners = [
       $rootScope.$on('bwsEvent', function(e, walletId) {
@@ -337,7 +355,6 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
   });
 
   $scope.$on("$ionicView.leave", function(event, data) {
-    screenInactive = true;
     lodash.each(listeners, function(x) {
       x();
     });

src/sass/views/tab-home.scss

@@ -111,10 +111,10 @@
         font-weight: 300;
         color: $light-gray;
       }
-      &__icon {
-        width: 15px;
+      &__status-icon {
+        font-size: 18px;
         position: relative;
-        top: 3px;
+        top: 1px;
         color: $light-gray;
       }
     }

src/sass/views/walletBalance.scss

@@ -4,17 +4,28 @@
 
     font-size: 16px;
 
-    &--available {
+    &--total {
       color: $mid-gray;
       font-weight: bold;
     }
 
+    &--available {
+      color: #09C286;;
+      font-weight: bold;
+    }
+
     &--confirming {
-      color: #09C286;
+      color: #FF9900;
+      font-weight: bold;
     }
 
     &--locked {
-      color: $dark-gray;
+      color: #FF9900;
+      font-weight: bold;
+    }
+
+    &--alternative {
+      color: $light-gray;
     }
 
   }
@@ -74,18 +85,29 @@
   &__heading {
     font-size: 17px;
     color: #445;
-    margin: 1rem 1rem 0 1rem;
+    margin: 1rem 1rem 1rem 1rem;
   }
 
   &__description {
-    font-size: 15px;
+    font-size: 12.5px;
     color: #667;
-    margin: 1rem;
+    margin: 0.7rem;
+    line-height: 16px;
   }
 
 }
 
 #wallet-balance {
+  .bar-header {
+    border: 0;
+    background: none;
+    .title, .button {
+      color: #fff;
+    }
+    .button {
+      background-color: transparent;
+    }
+  }
 
   ion-content {
     background: #F5F5F5;

src/sass/views/walletDetails.scss

@@ -130,7 +130,7 @@
   ion-content {
 
     &.collapsible {
-      margin-top: 180px;
+      margin-top: 210px;
     }
 
     padding-top: 0;
@@ -179,8 +179,7 @@
     }
 
     &__balance {
-      transform: scale3d(1, 1, 1);
-      margin-top: 5px;
+      transform: scale3d(1, 1, 1) translateY(45px);
     }
 
     &__updating {
@@ -196,14 +195,11 @@
       line-height: 100%;
     }
 
-    &__top {
-      margin-top: 45px;
-    }
-
     &__button-balance {
       background-color: transparent;
       border: 1px solid rgba(255,255,255,0.25);
     }
+
   }
   .item.item-footer {
     font-weight: lighter;