Merge pull request #37 from nacardin/feature/walletDetails

update walletDetails header styles

public/views/walletDetails.html

@@ -1,10 +1,13 @@
-<ion-view>
-  <ion-nav-bar class="bar-royal">
-    <ion-nav-title>{{wallet.name}}</ion-nav-title>
-    <ion-nav-back-button>
+<ion-view id="walletDetails">
+  <ion-header-bar ng-style="{'background-color': walletDetailsColor}">
+    <button class="button back-button" ng-click="$ionicGoBack()">
       <i class="icon ion-ios-arrow-thin-left"></i>
-    </ion-nav-back-button>
-  </ion-nav-bar>
+    </button>
+    <h1 class="title">{{walletDetailsName}}</h1>
+    <button class="button search-button">
+      <i class="icon ion-ios-search-strong"></i>
+    </button>
+  </ion-header-bar>
 
   <ion-content ng-controller="walletDetailsController" ng-init="init()" delegate-handle="my-handle">
     <div ng-show="!wallet" translate>
@@ -39,7 +42,7 @@
 
           <div ng-click='updateAll()' ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && !wallet.balanceHidden" on-hold="hideToggle()">
             <strong class="size-36">{{status.totalBalanceStr}}</strong>
-            <div class="size-14" ng-if="status.totalBalanceAlternative">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</div>
+            <div class="size-14 amount-alternative" ng-if="status.totalBalanceAlternative">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</div>
             <div class="size-14" ng-if="status.pendingAmount">
               <span translate>Pending Confirmation</span>: {{status.pendingAmountStr}}
             </div>

src/js/controllers/walletDetails.js

@@ -194,6 +194,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
       return $state.go('wallet.copayers');
     };
 
+    /* Set color for header bar */
+    $rootScope.walletDetailsColor = wallet.color;
+    $rootScope.walletDetailsName = wallet.name;
+
     $scope.wallet = wallet;
     $scope.requiresMultipleSignatures = wallet.credentials.m > 1;
     $scope.newTx = false;

src/sass/common.scss

@@ -36,6 +36,14 @@
   }
 }
 
+.search-button {
+  .icon:before {
+    color: #fff;
+    font-size: 30px !important;
+    margin-left: 5px;
+  }
+}
+
 .button-block {
   width: 90% !important;
   margin-left: auto;

src/sass/main.scss

@@ -339,20 +339,6 @@ ul.wallet-selection.wallets {
   padding-right: 10%;
 }
 
-.amount {
-  width: 100%;
-  text-align: center;
-  padding: 1.5rem 1rem 1.5rem 1rem;
-  color: #fff;
-  height: 150px;
-  margin-bottom: 25px;
-}
-
-.alternative-amount {
-  height: 25px;
-  text-align: center;
-}
-
 .wallet-info {
   position: absolute;
   top: inherit;
@@ -1008,5 +994,6 @@ input[type=number] {
 @import 'mixins/mixins';
 @import "views/add";
 @import "views/tab-home";
+@import "views/walletDetails";
 @import 'views/onboarding/onboarding';
 @import "views/includes/walletActivity";

src/sass/views/walletDetails.scss

@@ -0,0 +1,24 @@
+#walletDetails {
+  .bar-header {
+    border: 0;
+    .title, .button {
+      color: #fff;
+    }
+    .button {
+      background-color: transparent;
+    }
+  }
+
+  .amount {
+    width: 100%;
+    text-align: center;
+    padding: 2.5rem 1rem 1.5rem 1rem;
+    color: #fff;
+    height: 150px;
+    margin-bottom: 25px;
+
+    &-alternative {
+      line-height: 48px;
+    }
+  }
+}