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,55 +75,53 @@
         }
     }
 
-    .search {
-        text-align: left;
-        position: relative;
-
-        input {
-            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 {
-                border-radius: 5px;
-                outline: none;
-                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;
+            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;
+                .placeholder-color(lighten(@brand-primary, 35%));
+
+                &:focus {
+                    border-radius: 5px;
+                    outline: none;
+                    background: darken(@brand-primary, 10%);
+                }
+            }
         }
 
         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;
         }