wallet-bar for small devices

css/src/mobile.css

@@ -58,12 +58,6 @@
     text-align: center;
   }
 
-  header h1.left-sidebar {
-    margin: 5px 10px;
-    text-align: left;
-    font-size: 16px;
-  }
-
   .col3 a {
     height: 45px;
     padding: 12px 5px;
@@ -233,8 +227,8 @@
     border-bottom: none;
   }
 
-  .photo-container {
+  .side-nav li.nav-item.selected {
-    margin-right: 5px;
+    background-color: #3C4E60;
   }
 
 }

js/controllers/homeWallet.js

@@ -1,9 +1,16 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('HomeWalletController', function($scope, $rootScope, $timeout, $filter, rateService, notification) {
+angular.module('copayApp.controllers').controller('HomeWalletController', function($scope, $rootScope, $timeout, $filter, $location, rateService, notification, identityService) {
   $scope.init = function() {
     $rootScope.title = 'Home';
 
+    // fix for Safari and mobile devices
+    var walletId = $location.hash();
+    if (walletId) {
+      $location.hash('');
+      identityService.setFocusedWallet(walletId);
+    }
+
     $scope.rateService = rateService;
     $scope.isRateAvailable = false;
 
@@ -100,8 +107,6 @@ angular.module('copayApp.controllers').controller('HomeWalletController', functi
     },1)
   }, 100);
 
-
-
   $scope.sign = function(ntxid) {
     var w = $rootScope.wallet;
     $scope.loading = true;

js/controllers/sidebar.js

@@ -1,6 +1,8 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('SidebarController', function($scope, $rootScope, $location, $timeout, identityService) {
+angular.module('copayApp.controllers').controller('SidebarController', function($scope, $rootScope, $location, $timeout, identityService, isMobile) {
+
+  $scope.isMobile = isMobile.any()
 
   $scope.menu = [{
     'title': 'Home',
@@ -49,7 +51,6 @@ angular.module('copayApp.controllers').controller('SidebarController', function(
     $scope.setWallets();
   };
 
-
   $scope.init = function() {
     // This should be called only once.
 
@@ -90,8 +91,8 @@ angular.module('copayApp.controllers').controller('SidebarController', function(
   $scope.setWallets = function() {
     if (!$rootScope.iden) return;
     var ret = _.filter($rootScope.iden.listWallets(), function(w) {
-      return !identityService.isFocused(w.getId());
+      return w;
     });
-    $scope.wallets = ret;
+    $scope.wallets = _.sortBy(ret, 'name');
   };
 });

views/includes/bottombar-mobile.html

@@ -1,4 +1,4 @@
-<div class="row collapse" ng-controller="SidebarController">
+<div class="row collapse">
     <div class="medium-3 small-3 columns text-center bottombar-item" ng-repeat="item in menu" ui-route="{{item.link}}" ng-if="item.link!='more'">
       <a ng-click="go(item.link)" ng-class="{active: isActive(item)}"> 
         <i class="size-36 {{item.icon}} db"></i> 

views/includes/sidebar-mobile.html

@@ -1,18 +1,16 @@
-<div ng-controller="SidebarController" ng-init="username = $root.iden.getName()">
+<div ng-init="username = $root.iden.getName()">
-  <header>
+  <div class="text-center off-canvas-list">
-    <h1 class="left-sidebar">
+    <a href="#!/profile" class="columns m10v" title="Profile">
-      <span class="photo-container m20r">
+      <div class="photo-container">
         <img gravatar-src="'{{username}}'" gravatar-size="35">
+      </div>
+      <p class="text-black m5">{{username}}</p>
+      <span class="db text-gray size-10" >
+        <i class="fi-torso"></i> {{'ViewProfile' | translate }} 
       </span>
-      <span class="m5t">{{username}}</span>
-    </h1>
-  </header>
-  <ul class="off-canvas-list">
-    <li>
-      <a href="#!/profile" class="db p20h nav-item" title="Profile">
-        <i class="size-24 m20r fi-torso"></i> {{'My profile' | translate }}
     </a>
-    </li>
+    </div>
+  <ul class="off-canvas-list">
     <li>
     <a href="#!/create" class="db p20h nav-item" title="Create new wallet">
       <i class="size-24 m20r fi-plus"></i> {{'Create new wallet' | translate }} </a>

views/includes/sidebar.html

@@ -1,4 +1,4 @@
-<div ng-controller="SidebarController" ng-init="init()">
+<div>
   <header ng-show="$root.wallet">
     <div class="col1">
       <div class="avatar-wallet">{{$root.wallet.getName() | limitTo: 1}}</div>
@@ -53,7 +53,11 @@
 
   <div>
     <ul class="side-nav wallets" ng-class="{'pullDown': walletSelection}" ng-show="wallets[0]">
-      <li data-ng-repeat="item in wallets track by $index" class="nav-item" ng-if="item.id != $root.wallet.id" ng-click="switchWallet(item.id)">
+      <li 
+        ng-repeat="item in wallets track by $index" 
+        class="nav-item" 
+        ng-if="item.id != $root.wallet.id" 
+        ng-click="switchWallet(item.id)">
         <div class="col1">
           <div class="avatar-wallet">{{(item.name || item.id) | limitTo: 1}}</div>
         </div>

views/includes/walletbar-mobile.html

@@ -1,5 +1,5 @@
-<div ng-controller="SidebarController" ng-init="init()">
+<div>
-  <header>
+  <header ng-show="$root.wallet">
     <h1>My wallets</h1>
   </header>
   <div class="side-nav text-center off-canvas-list" ng-show="!wallets[0]">
@@ -8,14 +8,15 @@
       <i class="m10r fi-plus"></i> {{'Create new wallet' | translate }} </a>
   </div>
   <ul class="side-nav wallets off-canvas-list" ng-show="wallets[0]">
-    <li data-ng-repeat="item in wallets track by $index"
+    <li 
-    class="nav-item" 
+      ng-repeat="item in wallets track by $index"
-    ng-click="switchWallet(item.id)">
+      ng-class="{'selected': item.id == $root.wallet.id}"
+      class="nav-item">
     <div class="col1">
       <div class="avatar-wallet">{{(item.name || item.id) | limitTo: 1}}</div>
     </div>
     <div class="col2">
-      <a href class="size-12 wallet-item">
+      <a href="#!/homeWallet#{{item.id}}" class="size-12 wallet-item">
         <div class="oh">
           <div class="right size-10 type-wallet">
             [ {{item.requiredCopayers}} of {{item.totalCopayers}} ]</div>