From 583c6fcad6dc78fc962a453311313350d9f077a4 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Wed, 7 Sep 2016 23:07:07 -0400
Subject: [PATCH] new layout for tabs and header

---
 src/popup/app/current/views/current.html |  15 +--
 src/popup/app/global/globalModule.js     |   2 +
 src/popup/app/global/mainController.js   |  10 ++
 src/popup/app/global/tabs.html           |  23 ++--
 src/popup/app/global/tabsController.js   |   6 +
 src/popup/index.html                     |  22 ++--
 src/popup/less/popup.less                | 136 ++++++++++++++++++++++-
 7 files changed, 178 insertions(+), 36 deletions(-)
 create mode 100644 src/popup/app/global/globalModule.js
 create mode 100644 src/popup/app/global/mainController.js
 create mode 100644 src/popup/app/global/tabsController.js

diff --git a/src/popup/app/current/views/current.html b/src/popup/app/current/views/current.html
index 8ba133f0bf..712aa6d51d 100644
--- a/src/popup/app/current/views/current.html
+++ b/src/popup/app/current/views/current.html
@@ -1,7 +1,8 @@
-<ion-view view-title="Current Sites">
-    <ion-content class="padding">
-        <p>
-            Some content for your current sites.
-        </p>
-    </ion-content>
-</ion-view>
+<div class="header">
+    <a href="#" class="left"><i class="fa fa-chevron-left"></i> Back</a>
+    <a href="#" class="right">Save</a>
+    <div class="title">Current Sites</div>
+</div>
+<div class="content">
+    Some content for your current sites.
+</div>
diff --git a/src/popup/app/global/globalModule.js b/src/popup/app/global/globalModule.js
new file mode 100644
index 0000000000..6670e2ba92
--- /dev/null
+++ b/src/popup/app/global/globalModule.js
@@ -0,0 +1,2 @@
+angular
+    .module('bit.global', []);
diff --git a/src/popup/app/global/mainController.js b/src/popup/app/global/mainController.js
new file mode 100644
index 0000000000..0d42af1024
--- /dev/null
+++ b/src/popup/app/global/mainController.js
@@ -0,0 +1,10 @@
+angular
+    .module('bit.global')
+
+    .controller('mainController', function ($scope, $state) {
+        $scope.currentYear = new Date().getFullYear();
+
+        $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
+            
+        });
+    });
diff --git a/src/popup/app/global/tabs.html b/src/popup/app/global/tabs.html
index b732cd8aee..9d23e04f59 100644
--- a/src/popup/app/global/tabs.html
+++ b/src/popup/app/global/tabs.html
@@ -1,14 +1,9 @@
-<ion-tabs class="tabs-icon-top tabs-positive">
-    <ion-tab title="Current Sites" icon="ion-arrow-swap" ui-sref="tabs.current">
-        <ion-nav-view name="current-tab"></ion-nav-view>
-    </ion-tab>
-    <ion-tab title="My Vault" icon="ion-android-lock" ui-sref="tabs.vault">
-        <ion-nav-view name="vault-tab"></ion-nav-view>
-    </ion-tab>
-    <ion-tab title="Tools" icon="ion-settings" ui-sref="tabs.tools">
-        <ion-nav-view name="tools-tab"></ion-nav-view>
-    </ion-tab>
-    <ion-tab title="Settings" icon="ion-gear-a" ui-sref="tabs.settings">
-        <ion-nav-view name="settings-tab"></ion-nav-view>
-    </ion-tab>
-</ion-tabs>
+<div ui-view></div>
+<div class="tabs" ng-controller="tabsController">
+    <ul>
+        <li class="active"><a ui-sref="tabs.current"><i class="fa fa-star fa-2x"></i> Current</a></li>
+        <li><a ui-sref="tabs.vault"><i class="fa fa-lock fa-2x"></i> My Vault</a></li>
+        <li><a ui-sref="tabs.tools"><i class="fa fa-wrench fa-2x"></i> Tools</a></li>
+        <li><a ui-sref="tabs.settings"><i class="fa fa-cogs fa-2x"></i> Settings</a></li>
+    </ul>
+</div>
diff --git a/src/popup/app/global/tabsController.js b/src/popup/app/global/tabsController.js
new file mode 100644
index 0000000000..529a54bf19
--- /dev/null
+++ b/src/popup/app/global/tabsController.js
@@ -0,0 +1,6 @@
+angular
+    .module('bit.global')
+
+    .controller('tabsController', function ($scope) {
+
+    });
diff --git a/src/popup/index.html b/src/popup/index.html
index 39129fb69d..f2bec79d7e 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -1,4 +1,5 @@
-<html ng-app="bit">
+<!DOCTYPE html>
+<html ng-app="bit">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
@@ -29,6 +30,10 @@
     <script src="app/services/loginService.js"></script>
     <script src="app/services/cipherService.js"></script>
 
+    <script src="app/global/globalModule.js"></script>
+    <script src="app/global/mainController.js"></script>
+    <script src="app/global/tabsController.js"></script>
+
     <script src="app/accounts/accountsModule.js"></script>
     <script src="app/accounts/accountsLoginController.js"></script>
 
@@ -46,19 +51,8 @@
 
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>
-
-    <style>
-        body {
-            width: 320px;
-            height: 568px;
-        }
-    </style>
 </head>
-<body>
-    <ion-nav-bar class="bar-positive">
-        <ion-nav-back-button>
-        </ion-nav-back-button>
-    </ion-nav-bar>
-    <ion-nav-view></ion-nav-view>
+<body ng-controller="mainController as main">
+    <div ui-view></div>
 </body>
 </html>
diff --git a/src/popup/less/popup.less b/src/popup/less/popup.less
index 6fa88516d1..6ffca6b970 100644
--- a/src/popup/less/popup.less
+++ b/src/popup/less/popup.less
@@ -1,3 +1,137 @@
-body {
+@import "../../../node_modules/bootstrap/less/bootstrap.less";
 
+@font-family: "Open Sans", sans-serif;
+@brand-primary: #3c8dbc;
+
+body {
+    font-family: @font-family;
+    width: 320px;
+    height: 568px;
+}
+
+.header {
+    min-height: 44px;
+    max-height: 44px;
+    background-color: @brand-primary;
+    color: white;
+    font-family: @font-family;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    
+    a {
+        color: white !important;
+        text-decoration: none;
+        
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+    }
+    .title {
+        font-weight: bold;
+        display: block;
+        padding: 12px 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .left {
+        float: left;
+        display: block;
+        padding: 12px 10px;
+    }
+    .right {
+        float: right;
+        display: block;
+        padding: 12px 10px;
+    }
+}
+
+.content {
+    position: absolute;
+    top: 44px;
+    bottom: 55px;
+    left: 0;
+    right: 0;
+    overflow: auto;
+}
+
+.tabs {
+    width: 100%;
+    height: 55px;
+    background-color: #f5f5f5;
+    border-top: 1px solid #ddd;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    
+    ul {
+        width: 100%;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        
+        li {
+            width: 25%;
+            float: left;
+            display: inline-block;
+            padding: 0;
+            margin: 0;
+            
+            a {
+                text-align: center;
+                display: block;
+                padding: 7px 0;
+                text-decoration: none;
+                color: #777;
+                font-size: 12px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.8);
+                }
+                
+                i {
+                    display: block;
+                    margin-bottom: 2px;
+                }
+            }
+            
+            &.active {
+                a {
+                    color: @brand-primary;
+                }
+            }
+        }
+    }
+}
+
+.list {
+    .list-item {
+        display: block;
+        padding: 10px 10px;
+        background-color: white;
+        border-bottom: 1px solid #ddd;
+        color: #333;
+        text-decoration: none;
+        
+        &:last-child {
+            border: none;
+        }
+        .text {
+            display: block;
+        }
+        .detail {
+            font-size: 12px;
+            color: #777;
+            display: block;
+        }
+    }
 }