expand vault to new window

src/popup/app/vault/vaultController.js

@@ -153,6 +153,11 @@
             $timeout(loadVault, 500);
         });
 
+        $scope.expandVault = function (e) {
+            $analytics.eventTrack('Expand Vault');
+            chrome.tabs.create({ url: '/popup/index.html#!/tab/vault' });
+        };
+
         function storeState() {
             stateService.saveState(stateKey, {
                 scrollY: getScrollY(),

src/popup/app/vault/views/vault.html

@@ -1,11 +1,14 @@
-<div class="header">
+<div class="header header-search">
-    <div class="right">
+    <div class="left">
-        <a href="" ng-click="addLogin()"><i class="fa fa-plus fa-lg"></i></a>
+        <a href="" ng-click="expandVault()"><i class="fa fa-external-link fa-rotate-270 fa-lg"></i></a>
     </div>
     <div class="search">
         <input type="search" placeholder="{{i18n.searchVault}}" ng-model="searchText" id="search" />
         <i class="fa fa-search"></i>
     </div>
+    <div class="right">
+        <a href="" ng-click="addLogin()"><i class="fa fa-plus fa-lg"></i></a>
+    </div>
 </div>
 <div class="content content-tabs">
     <div ng-if="vaultLogins.length && vaultLogins.length >= 100 && vaultFolders.length && (!searchText || searchText.length < 2)">

src/popup/less/components.less

@@ -75,18 +75,34 @@
         }
     }
 
+    &.header-search {
+        .left, .right, .search {
+            display: table-cell;
+            position: relative;
+        }
+
         .search {
+            padding: 0 7px;
+            width: 100%;
             text-align: left;
             position: relative;
 
+            .fa-search {
+                position: absolute;
+                top: 15px;
+                left: 15px;
+                color: lighten(@brand-primary, 30%);
+            }
+
             input {
+                width: 100%;
+                margin: 0;
+                float: none;
                 background: darken(@brand-primary, 8%);
                 border: none;
                 color: white;
                 padding: 5px 10px 5px 30px;
                 border-radius: 5px;
-            width: 85%;
-            margin: 7px 0 0 7px;
                 .placeholder-color(lighten(@brand-primary, 35%));
 
                 &:focus {
@@ -95,35 +111,17 @@
                     background: darken(@brand-primary, 10%);
                 }
             }
-
-        .fa-search {
-            position: absolute;
-            top: 15px;
-            left: 15px;
-            color: lighten(@brand-primary, 30%);
-        }
-    }
-
-    &.header-search {
-        .left, .right, .search {
-            display: table-cell;
-            position: relative;
-        }
-
-        input {
-            width: 100%;
-            margin: 0;
-            float: none;
-        }
-
-        .search {
-            padding: 0 7px;
         }
 
         a {
             white-space: nowrap;
             float: none;
         }
+
+        .fa-external-link {
+            vertical-align: 0;
+            margin: 0 -5px 0 5px;
+        }
     }
 }
 
@@ -264,7 +262,7 @@
             right: 0;
             bottom: 0;
             height: 1px;
-            width: 97%;
+            width: ~"calc(100% - 10px)";
             border-bottom: 1px solid @border-color;
         }