From e1fd75b262561c148510b970981677fa65825f41 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Sat, 22 Nov 2014 17:34:28 -0300
Subject: [PATCH] New bottom bar menu for small devices

---
 css/src/mobile.css                   | 20 ++++++++++++++++++++
 index.html                           |  5 +++++
 views/includes/bottombar-mobile.html | 13 +++++++++++++
 views/includes/sidebar-mobile.html   | 25 ++++++++++---------------
 4 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 views/includes/bottombar-mobile.html

diff --git a/css/src/mobile.css b/css/src/mobile.css
index 098bb79c8..e5a32430f 100644
--- a/css/src/mobile.css
+++ b/css/src/mobile.css
@@ -39,6 +39,15 @@
     background: #3C4E60;
   }
 
+  .bottom-bar {
+    display: block;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 5;
+    background: #3C4E60;
+  }
+
   .left-off-canvas-menu {
     background: #2C3E50;
   }
@@ -89,6 +98,17 @@
     opacity: 0.6;
   }
 
+  .bottombar-item a {
+    color: #fff;
+    padding: 4px 0;
+    display: block;
+  }
+
+  .bottombar-item a.active {
+    color: #000;
+    background-color: #fff;
+  }
+
   .box-founds {
     background-color: #213140;
   }
diff --git a/index.html b/index.html
index 41424f99e..307d2b898 100644
--- a/index.html
+++ b/index.html
@@ -85,6 +85,11 @@
 
         <section ng-class="{'main':$root.iden && !$root.starting}" ng-view></section>
 
+        <div class="bottom-bar" ng-if="$root.wallet &&
+          $root.wallet.isReady() && !$root.wallet.isLocked">
+          <div ng-include="'views/includes/bottombar-mobile.html'"></div>
+        </div>
+
         <a class="exit-off-canvas"></a>
 
       </div>
diff --git a/views/includes/bottombar-mobile.html b/views/includes/bottombar-mobile.html
new file mode 100644
index 000000000..08436ba85
--- /dev/null
+++ b/views/includes/bottombar-mobile.html
@@ -0,0 +1,13 @@
+<div class="row" ng-controller="SidebarController">
+    <div class="medium-3 small-3 columns text-center bottombar-item" data-ng-repeat="item in menu" ui-route="{{item.link}}" ng-if="item.link!='more'">
+      <a href="#!/{{item.link}}" ng-class="{active: isActive(item)}"> 
+        <i class="size-24 {{item.icon}} db"></i> 
+        <div class="size-10">
+          {{item.title}} 
+          <span class="label alert round" ng-if="item.link=='send' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
+        </div>
+      </a>
+    </div> 
+
+</div>
+
diff --git a/views/includes/sidebar-mobile.html b/views/includes/sidebar-mobile.html
index 6e5d61498..bcd29abf4 100644
--- a/views/includes/sidebar-mobile.html
+++ b/views/includes/sidebar-mobile.html
@@ -22,10 +22,7 @@
     </div>
     <div ng-if="walletSelection">
       <div class="side-nav wallets" ng-show="!wallets.0">
-        <p class="size-12" translate>You do not have another wallets. Creates one more from link below.</p>
-        <div class="text-center">
-          <i class="fi-arrow-down"></i>
-        </div>
+        <p class="size-12" translate>You do not have another wallets.</p>
       </div>
       <ul class="side-nav wallets off-canvas-list" ng-show="wallets.0"
         ng-click="toggleWalletSelection()"
@@ -78,30 +75,28 @@
 
   <div class="line-t p0"></div>
   <ul class="off-canvas-list" ng-show="!walletSelection">
-    <li data-ng-repeat="item in menu" ui-route="{{item.link}}" class="nav-item" data-ng-class="{active: isActive(item)}">
-      <a href="#!/{{item.link}}" class="db p20h"> 
-        <i class="size-24 m20r {{item.icon}}"></i> {{item.title}}
-        <span class="label alert round" ng-if="item.link=='send' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
-      </a>
-    </li> 
     <li>
-      <a href="#!/create" class="db p20h" title="Create new wallet">
+      <a href="#!/more" class="db p20h nav-item" title="Settings">
+        <i class="size-24 m20r fi-widget"></i> {{'Settings' | translate }} </a>
+    </li>
+    <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>
     </li>
     <li>
-    <a href="#!/join" class="db p20h" title="Join shared wallet">
+    <a href="#!/join" class="db p20h nav-item" title="Join shared wallet">
       <i class="size-24 m20r fi-torsos-all"></i> {{'Join shared wallet' | translate }} </a>
     </li>
     <li>
-    <a href="#!/import" class="db p20h" title="Import wallet">
+    <a href="#!/import" class="db p20h nav-item" title="Import wallet">
       <i class="size-24 m20r fi-download"></i> {{'Import wallet' | translate }} </a>
     </li>
     <li>
-      <a href="#!/profile" class="db p20h" title="Profile">
+      <a href="#!/profile" class="db p20h nav-item" title="Profile">
         <i class="size-24 m20r fi-torso"></i> {{'Profile' | translate }} </a>
     </li>
     <li>
-      <a href="#!/" class="db p20h" title="Close"
+      <a href="#!/" class="db p20h nav-item" title="Close"
         ng-click="signout()"><i class="size-24 m20r fi-power"></i> {{'Close'|translate}}</a>
     </li>
   </ul>