Merge pull request #36 from cmgustavo/matias/feature/identity

top-bar with dynamic titles

css/src/main.css

@@ -130,6 +130,63 @@ header .alt-currency {
   font-size: 10px;
 }
 
+.head {
+  background-color: #FFF;
+  height: 62px;
+  border-bottom: 1px solid #eee;
+  position: fixed;
+  z-index: 10;
+  left: 250px;
+  right: 0;
+}
+
+.head .title h1 {
+  float: left;
+  padding: 12px 10px;
+  margin: 0;
+}
+
+.head .menu {
+  float: right;
+  position: relative;
+}
+
+.head .menu a.dropdown {
+  display: block;
+  height: 62px;
+  width: 140px;
+  padding: 22px 5px;
+  text-align: center;
+}
+
+.head .menu a.dropdown:hover,
+.head .menu a.dropdown.hover {
+  border-bottom: 1px solid #fff;
+}
+
+.head .menu ul {
+  position: absolute;
+  right: 0;
+  width: 160px;
+  list-style-type: none;
+  top: 61px;
+}
+
+.head .menu ul.hover {
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-top: 1px solid #fff;
+}
+
+.head .menu ul li a {
+  display: block;
+  padding: 5px 10px;
+}
+
+.head .menu ul li a:hover {
+  background-color: #fff;
+}
+
 .col1 {
   width: 56px;
   float: left;
@@ -209,15 +266,13 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
   color: #CA5649;
   background-color: #E2CFD0;
   position: absolute;
-  margin-left: auto;
-  margin-right: auto;
   left: 250px;
   right: 0;
-  top: 0;
+  top: 62px;
-  width: 100%;
+  padding: 5px 0;
-  padding: 20px 50px;
+  z-index: 9;
-  height: 60px;
+  font-size: 12px;
-  z-index: 9999;
+  text-align: center;
 }
 
 .setup .comment {
@@ -269,7 +324,7 @@ a:hover {
 
 .main {
   margin-left: 250px;
-  padding: 1.5rem;
+  padding: 80px 1.5rem;
   background-color: #F8F8FB;
 }
 

css/src/mobile.css

@@ -14,10 +14,7 @@
 
   .status {
     left: 0;
-    top: 45px;
+    top: 40px;
-    font-size: 13px;
-    font-weight: 700;
-    height: 55px;
   }
 
   .logo-setup {
@@ -42,6 +39,7 @@
     margin-left: 0;
     margin-bottom: -40px;
     padding-bottom: 60px;
+    padding-top: 20px;
   }
 
   .tab-bar {

index.html

@@ -28,7 +28,7 @@
     <div class="off-canvas-wrap">
       <div class="inner-wrap">
         <span class="status" ng-if="$root.reconnecting">
-          <i class="fi-loop icon-rotate m10r"></i>
+          <i class="fi-loop icon-rotate"></i>
           <span translate> Network Error. Attempting to reconnect...</span>
         </span>
         <nav class="tab-bar" ng-if="$root.wallet &&
@@ -65,6 +65,12 @@
           class="sidebar"
           ng-if="$root.iden"></div>
 
+        <div 
+          ng-controller="HeadController"
+          class="head show-for-large-up" 
+          ng-include="'views/includes/head.html'"
+          ng-if="$root.iden"></div>
+
         <section ng-class="{'main' : $root.iden && $root.iden.listWallets().length>=0}" ng-view></section>
 
         <a class="exit-off-canvas"></a>

js/controllers/addresses.js

@@ -4,6 +4,7 @@ angular.module('copayApp.controllers').controller('AddressesController',
   function($scope, $rootScope, $timeout, $modal, controllerUtils) {
     controllerUtils.redirIfNotComplete();
 
+    $rootScope.title = 'Addresses';
 
     $scope.loading = false;
     $scope.showAll = false;

js/controllers/copayers.js

@@ -4,6 +4,7 @@ angular.module('copayApp.controllers').controller('CopayersController',
   function($scope, $rootScope, $location, backupService, controllerUtils) {
     $scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
     $scope.hideAdv = true;
+    $rootScope.title = 'Copayers';
 
     $scope.skipBackup = function() {
       var w = $rootScope.wallet;

js/controllers/create.js

@@ -9,6 +9,7 @@ angular.module('copayApp.controllers').controller('CreateController',
     $scope.isMobile = !!window.cordova;
     $scope.hideAdv = true;
     $scope.networkName = config.networkName;
+    $rootScope.title = 'Create a wallet';
 
     // ng-repeat defined number of times instead of repeating over array?
     $scope.getNumber = function(num) {

js/controllers/head.js

@@ -0,0 +1,53 @@
+'use strict';
+
+angular.module('copayApp.controllers').controller('HeadController', function($scope, $rootScope, notification, controllerUtils) {
+
+  $scope.username = $rootScope.iden.profile.email;
+  $scope.hoverMenu = false;
+
+  $scope.hoverIn = function(){
+    this.hoverMenu = true;
+  };
+
+  $scope.hoverOut = function(){
+    this.hoverMenu = false;
+  };
+
+  $scope.signout = function() {
+    logout();
+  };
+
+  function logout() {
+    controllerUtils.logout();
+  }
+
+  // Ensures a graceful disconnect
+  window.onbeforeunload = function() {
+    controllerUtils.logout();
+  };
+
+  $scope.$on('$destroy', function() {
+    window.onbeforeunload = undefined;
+  });
+
+  if ($rootScope.wallet) {
+    $scope.$on('$idleWarn', function(a, countdown) {
+      if (!(countdown % 5))
+        notification.warning('Session will be closed', $filter('translate')('Your session is about to expire due to inactivity in') + ' ' + countdown + ' ' + $filter('translate')('seconds'));
+    });
+
+    $scope.$on('$idleTimeout', function() {
+      $scope.signout();
+      notification.warning('Session closed', 'Session closed because a long time of inactivity');
+    });
+    $scope.$on('$keepalive', function() {
+      if ($rootScope.wallet) {
+        $rootScope.wallet.keepAlive();
+      }
+    });
+    $rootScope.$watch('title', function(newTitle, oldTitle) {
+      $scope.title = newTitle;
+    });
+  }
+});
+

js/controllers/import.js

@@ -3,7 +3,7 @@
 angular.module('copayApp.controllers').controller('ImportController',
   function($scope, $rootScope, $location, controllerUtils, Passphrase, notification, isMobile) {
 
-    $scope.title = 'Import a backup';
+    $rootScope.title = 'Import a backup';
     $scope.importStatus = 'Importing wallet - Reading backup...';
     $scope.hideAdv = true;
     $scope.is_iOS = isMobile.iOS();

js/controllers/join.js

@@ -5,6 +5,7 @@ angular.module('copayApp.controllers').controller('JoinController',
     $rootScope.fromSetup = false;
     $scope.loading = false;
     $scope.isMobile = !!window.cordova;
+    $rootScope.title = 'Join a wallet';
 
     // QR code Scanner
     var cameraInput;

js/controllers/manage.js

@@ -2,6 +2,8 @@
 angular.module('copayApp.controllers').controller('ManageController', function($scope, $rootScope, $location, controllerUtils, backupService) {
   $scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
 
+  $rootScope.title = 'Manage wallets';
+
   $scope.downloadBackup = function() {
     backupService.profileDownload($rootScope.iden);
   };

js/controllers/more.js

@@ -6,6 +6,7 @@ angular.module('copayApp.controllers').controller('MoreController',
     var w = $rootScope.wallet;
     $scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
 
+    $rootScope.title = 'Settings';
 
     $scope.unitOpts = [{
       name: 'Satoshis (100,000,000 satoshis = 1BTC)',

js/controllers/send.js

@@ -10,7 +10,7 @@ angular.module('copayApp.controllers').controller('SendController',
     preconditions.checkState(w);
     preconditions.checkState(w.settings.unitToSatoshi);
 
-    $scope.title = 'Send';
+    $rootScope.title = 'Send';
     $scope.loading = false;
     var satToUnit = 1 / w.settings.unitToSatoshi;
     $scope.defaultFee = bitcore.TransactionBuilder.FEE_PER_1000B_SAT * satToUnit;

js/controllers/sidebar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('SidebarController', function($scope, $rootScope, $sce, $location, $http, $filter, notification, controllerUtils) {
+angular.module('copayApp.controllers').controller('SidebarController', function($scope, $rootScope, $location, controllerUtils) {
 
   $scope.menu = [{
     'title': 'Receive',
@@ -20,20 +20,6 @@ angular.module('copayApp.controllers').controller('SidebarController', function(
     'link': 'more'
   }];
 
-  $scope.signout = function() {
-    logout();
-  };
-
-  // Ensures a graceful disconnect
-  window.onbeforeunload = function() {
-    controllerUtils.logout();
-  };
-
-  $scope.$on('$destroy', function() {
-    window.onbeforeunload = undefined;
-  });
-
-
   $scope.refresh = function() {
     var w = $rootScope.wallet;
     if (!w) return;
@@ -53,32 +39,7 @@ angular.module('copayApp.controllers').controller('SidebarController', function(
     return item.link && item.link == $location.path().split('/')[1];
   };
 
-  function logout() {
-    controllerUtils.logout();
-  }
-
-  // ng-repeat defined number of times instead of repeating over array?
-  $scope.getNumber = function(num) {
-    return new Array(num);
-  }
-
-
-
   if ($rootScope.wallet) {
-    $scope.$on('$idleWarn', function(a, countdown) {
-      if (!(countdown % 5))
-        notification.warning('Session will be closed', $filter('translate')('Your session is about to expire due to inactivity in') + ' ' + countdown + ' ' + $filter('translate')('seconds'));
-    });
-
-    $scope.$on('$idleTimeout', function() {
-      $scope.signout();
-      notification.warning('Session closed', 'Session closed because a long time of inactivity');
-    });
-    $scope.$on('$keepalive', function() {
-      if ($rootScope.wallet) {
-        $rootScope.wallet.keepAlive();
-      }
-    });
     $rootScope.$watch('wallet.id', function() {
       $scope.walletSelection = false;
     });

js/controllers/transactions.js

@@ -8,7 +8,7 @@ angular.module('copayApp.controllers').controller('TransactionsController',
 
     var w = $rootScope.wallet;
 
-    $scope.title = 'Transactions';
+    $rootScope.title = 'History';
     $scope.loading = false;
     $scope.lastShowed = false;
 

views/addresses.html

@@ -1,9 +1,6 @@
 <div class="addresses" ng-controller="AddressesController">
   <div ng-show='$root.wallet.isReady()'>
-    <h1>
+    <h1 class="hide-for-large-up">{{$root.title}}</h1> 
-      <span translate>Addresses</span>
-      <span class="button primary small side-bar" ng-click="newAddr()" ng-disabled="loading"><i class="fi-plus"></i></span>
-    </h1> 
     <div ng-show="!addresses[0]">
         <i class="fi-bitcoin-circle icon-rotate spinner"></i>
     </div>  
@@ -56,6 +53,10 @@
       <span translate ng-if="!showAll">Show all</span>
       <span translate ng-if="showAll">Show less</span>
     </a>
+
+    <div class="m20t">
+      <a ng-click="newAddr()" ng-disabled="loading">Add <i class="fi-plus"></i></span>
+    </div>
   </div>
 </div>
 

views/copayers.html

@@ -4,26 +4,26 @@
   <div class="row collapse">
     <div class="large-12 columns">
         <div ng-if="!$root.wallet.publicKeyRing.isComplete()">
-          <h1>
+          <h2>
             <span translate>Waiting copayers for</span>
             {{$root.wallet.getName()}} 
             <small>{{$root.wallet.requiredCopayers}}-{{'of'|translate}}-{{$root.wallet.totalCopayers}}</small>
-          </h1>
+          </h2>
           <div class="panel oh">
             <qrcode size="350" data="{{$root.wallet.getSecret()}}"></qrcode>
             <div class="secret">
-              <h2 translate>Share this secret with your other copayers</h2>
+              <h3 translate>Share this secret with your other copayers</h3>
               {{$root.wallet.getSecret()}} 
               <span class="btn-copy" clip-copy="$root.wallet.getSecret()"></span>
             </div>
           </div>
         </div>
-        <h1 ng-if="$root.wallet &&
+        <h2 ng-if="$root.wallet &&
           $root.wallet.publicKeyRing.isComplete()">
           <span translate>Wallet</span> {{$root.wallet.getName()}} 
           <small>{{$root.wallet.requiredCopayers}}-{{'of'|translate}}-{{$root.wallet.totalCopayers}}</small>
           <span translate>created</span>
-        </h1>
+        </h2>
         <div class="box-setup-copayers p20">
           <p class="text-primary m10b" 
             ng-show="$root.wallet && $root.wallet.publicKeyRing.isComplete()" translate>

views/create.html

@@ -6,7 +6,7 @@
   <div class="setup" ng-show="!loading">
     <form name="setupForm" ng-submit="create(setupForm)" novalidate>
 
-      <h1>{{'Create Wallet'|translate}}</h1>
+      <h1 class="hide-for-large-up">{{$root.title}}</h1>
       <div class="row">
         <div class="large-12 columns">
           <label><span translate>Wallet name</span>
@@ -51,6 +51,10 @@
 
 
             <div class="text-right">
+              <a class="back-button m20r" href="#!/manage">
+                <i class="fi-arrow-left"></i> 
+                <span translate>Back</span>
+              </a>
               <button translate  type="submit" class="button secondary m0" ng-disabled="setupForm.$invalid || loading">
                 Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
               </button>

views/import.html

@@ -7,7 +7,7 @@
   <div class="row" ng-show="!loading">
     <div class="large-12 columns">
  
-        <h1>{{title|translate}}</h1>
+        <h1 class="hide-for-large-up">{{$root.title}}</h1>
         <form name="importForm" ng-submit="import(importForm)" novalidate>
             <div ng-show="!is_iOS">
               <legend for="backupFile" class="m10b"> 
@@ -61,7 +61,10 @@
       
 
           <div class="text-right m20t">
-            <a class="back-button text-white m20r" href="#!/">&laquo; <span translate>Back</span></a>
+            <a class="back-button m20r" href="#!/manage">
+              <i class="fi-arrow-left"></i> 
+              <span translate>Back</span>
+            </a>
             <button translate type="submit" class="button primary m0" ng-disabled="importForm.$invalid">
               Import backup
             </button>

views/includes/head.html

@@ -0,0 +1,16 @@
+<div class="title">
+  <h1>{{$root.title}}</h1>
+</div>
+
+<div class="menu" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"
+  ng-click="hoverMenu = !hoverMenu">
+  <a class="dropdown ellipsis" ng-class="{'hover': hoverMenu}">{{username}}</a>
+  <ul ng-show="hoverMenu" ng-class="{'hover': hoverMenu}">
+    <li>
+      <a href="#!/manage" title="Manage wallets">
+        <i class="fi-plus"></i> {{'Manage wallets' | translate }}</a></li>
+    <li><a href="#!/" title="Close" ng-click="signout()">
+      <i class="fi-power"></i> {{'Close'|translate}}</a></li>
+  </ul>
+</div>
+

views/includes/sidebar.html

@@ -86,10 +86,6 @@
         </span>
       </a>
     </li>
-
-    <li>
-      <a href="#!/" class="db p20h" title="Close" ng-click="signout()"><i class="size-21 m20r fi-power"></i> {{'Close'|translate}}</a>
-    </li>
   </ul>
 
   <div class="sidebar-footer text-center">

views/join.html

@@ -5,7 +5,7 @@
   </div>
 
   <div ng-show="!loading">
-    <h1>{{'Join Wallet'|translate}}</h1>
+    <h1 class="hide-for-large-up">{{$root.title}}</h1>
     <div class="row collapse">
       <div class="large-12 columns">
         <form name="joinForm" ng-submit="join(joinForm)" novalidate>
@@ -66,6 +66,10 @@
           </div>
 
           <div class="text-right">
+            <a class="back-button m20r" href="#!/manage">
+              <i class="fi-arrow-left"></i> 
+              <span translate>Back</span>
+            </a>
             <button translate type="submit" class="button primary m0" ng-disabled="joinForm.$invalid">Join</button>
           </div>
         </form>

views/manage.html

@@ -1,5 +1,5 @@
 <div class="backup" ng-controller="ManageController">
-  <h1 translate>Manage Wallets</h1>
+  <h1 class="hide-for-large-up">{{$root.title}}</h1>
   <div class="row collapse">
     <div class="large-12 columns">
       <div class="large-4 columns" >

views/more.html

@@ -1,5 +1,5 @@
 <div class="backup" ng-controller="MoreController">
-  <h1 translate>Settings </h1>
+  <h1 class="hide-for-large-up">{{$root.title}} </h1>
   <div class="large-12 columns panel">
     <h2><i class="fi-download m10r"></i> <span translate>Backup</span> </h2>
     <p translate class="text-gray">

views/send.html

@@ -7,7 +7,7 @@
     </div>
     <div ng-show="txs.length != 0" class="large-12 line-dashed" style="padding: 0;"></div>
 
-    <h1>{{title|translate}}</h1>
+    <h1 class="hide-for-large-up">{{$root.title}}</h1>
     <div class="row collapse m0">
     <div class="large-6 columns">
       <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>

views/transactions.html

@@ -1,7 +1,7 @@
 <div class="transactions" data-ng-controller="TransactionsController" data-ng-init="update()">
   <div ng-show='$root.wallet.isReady()'>
-    <h1 ng-show="wallet.isShared()"> 
+    <h2 ng-show="wallet.isShared()"> 
-      <span translate>Transaction Proposals</span> <small>({{txs.length}})</small></h1>
+      <span translate>Transaction Proposals</span> <small>({{txs.length}})</small></h2>
     <div class="large-12" ng-show="wallet.isShared()">
 
       <div class="last-transactions" ng-repeat="tx in txs | paged">
@@ -14,12 +14,12 @@
       <pagination ng-show="txs.length > txpItemsPerPage" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small primary"></pagination>
     </div>
 
-    <h1 ng-class="{'line-dashed': wallet.isShared()}">
+    <h2 ng-class="{'line-dashed': wallet.isShared()}">
       <span translate>Last transactions</span> 
       <small ng-hide="wallet.isShared() || !loading">
         <i class="fi-bitcoin-circle icon-rotate spinner"></i>
       </small>   
-    </h1>
+    </h2>
 
     <div class="large-12">
       <div class="m10b size-12" ng-hide="wallet.totalCopayers == 1">