applying new style throughout controllers

src/popup/app/app.js

@@ -5,6 +5,7 @@
 
         'bit.services',
 
+        'bit.global',
         'bit.accounts',
         'bit.current',
         'bit.vault',

src/popup/app/config.js

@@ -50,39 +50,36 @@
             })
                 .state('tabs.current', {
                     url: "/current",
-                    views: {
-                        'current-tab': {
-                            templateUrl: "app/current/views/current.html",
-                            controller: 'currentController'
-                        }
-                    }
+                    templateUrl: "app/current/views/current.html",
+                    controller: 'currentController'
                 })
                 .state('tabs.vault', {
                     url: "/vault",
-                    views: {
-                        'vault-tab': {
-                            templateUrl: "app/vault/views/vault.html",
-                            controller: 'vaultController'
-                        }
-                    }
+                    templateUrl: "app/vault/views/vault.html",
+                    controller: 'vaultController'
                 })
                 .state('tabs.settings', {
                     url: "/settings",
-                    views: {
-                        'settings-tab': {
-                            templateUrl: "app/settings/views/settings.html",
-                            controller: 'settingsController'
-                        }
-                    }
+                    templateUrl: "app/settings/views/settings.html",
+                    controller: 'settingsController'
                 })
                 .state('tabs.tools', {
                     url: "/tools",
-                    views: {
-                        'tools-tab': {
-                            templateUrl: "app/tools/views/tools.html",
-                            controller: 'toolsController'
-                        }
-                    }
+                    templateUrl: "app/tools/views/tools.html",
+                    controller: 'toolsController'
+                })
+            .state('empty', {
+                url: "/empty",
+                abstract: true,
+                templateUrl: "app/global/enoty.html",
+                data: {
+                    authorize: true
+                }
+            })
+                .state('empty.viewSite', {
+                    url: "/view-site",
+                    templateUrl: "app/vault/views/vaultViewSite.html",
+                    controller: 'vaultViewSiteController'
                 });
     })
     .run(function ($rootScope, userService, loginService, tokenService, $state) {

src/popup/app/current/views/current.html

@@ -1,6 +1,4 @@
 <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">

src/popup/app/global/empty.html

@@ -0,0 +1 @@
+<div ui-view></div>

src/popup/app/services/cipherService.js

@@ -23,7 +23,7 @@
                     });
                 });
             });
-        }
+        };
 
         _service.decryptSite = function (site) {
             var model = {
@@ -50,7 +50,7 @@
                     resolve(model);
                 });
             });
-        }
+        };
 
         _service.decrypt = decrypt;
 

src/popup/app/settings/views/settings.html

@@ -1,24 +1,25 @@
-<ion-view view-title="Settings">
-    <ion-content>
-        <div class="list">
-            <div class="item item-divider">
-                Manage
-            </div>
-            <a class="item" href="#">
-                Folders
-            </a>
-            <a class="item" ng-click="sync()">
-                Sync
-            </a>
-            <div class="item item-divider">
-                Current Session
-            </div>
-            <a class="item" href="#">
-                Lock
-            </a>
-            <a class="item"  ng-click="logOut()">
-                Log out
-            </a>
+<div class="header">
+    <div class="title">Settings</div>
+</div>
+<div class="content">
+    <div class="list">
+        <div class="list-divider">
+            Manage
         </div>
-    </ion-content>
-</ion-view>
+        <a class="list-item" href="#">
+            Folders
+        </a>
+        <a class="list-item" href="#" ng-click="sync()">
+            Sync
+        </a>
+        <div class="list-divider">
+            Current Session
+        </div>
+        <a class="list-item" href="#">
+            Lock
+        </a>
+        <a class="list-item" href="#" ng-click="logOut()">
+            Log out
+        </a>
+    </div>
+</div>

src/popup/app/tools/views/tools.html

@@ -1,7 +1,6 @@
-<ion-view view-title="Tools">
-    <ion-content class="padding">
-        <p>
-            Some content for your tools.
-        </p>
-    </ion-content>
-</ion-view>
+<div class="header">
+    <div class="title">Tools</div>
+</div>
+<div class="content">
+    Some content for your tools.
+</div>

src/popup/app/vault/vaultController.js

@@ -7,9 +7,7 @@
         $scope.folders = [];
         $scope.focusedSiteId = null;
 
-        $scope.$on('$ionicView.enter', function (event, data) {
-            loadVault();
-        });
+        loadVault();
 
         function loadVault() {
             var decSites = [];

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

@@ -1,21 +1,19 @@
-<ion-view view-title="My Vault">
-    <ion-nav-buttons side="secondary">
-        <button class="button button-icon icon ion-ios-plus-empty" ng-click="addSite()"></button>
-    </ion-nav-buttons>
-    <ion-content>
-        <div class="list">
-            <ng-repeat ng-repeat="folder in folders | orderBy: folderSort" ng-show="folders.length">
-                <div class="item item-divider">
-                    {{folder.name}}
-                </div>
-                <ng-repeat ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
-                    <a ng-click="viewSite(site)" class="item item-button-right">
-                        {{site.name}}<br />
-                        {{site.username}}
-                        <span class="button button-clear button-dark"><i class="icon ion-more"></i></span>
-                    </a>
-                </ng-repeat>
-            </ng-repeat>
-        </div>
-    </ion-content>
-</ion-view>
+<div class="header">
+    <a href="#" class="left"><i class="fa fa-chevron-left"></i> Back</a>
+    <a class="right" ng-click="addSite()"><i class="fa fa-plus"></i></a>
+    <div class="title">My Vault</div>
+</div>
+<div class="content">
+    <div class="list">
+        <ng-repeat ng-repeat="folder in folders | orderBy: folderSort" ng-show="folders.length">
+            <div class="list-divider">
+                <i class="fa fa-folder-open"></i> {{folder.name}}
+            </div>
+            <a ng-click="viewSite(site)" class="list-item" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
+                <span class="text">{{site.name}}</span>
+                <span class="detail">{{site.username}}</span>
+                <!--<span class="btn btn-link pull-right"><i class="fa fa-ellipsis-h"></i></span>-->
+            </a>
+        </ng-repeat>
+    </div>
+</div>

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

@@ -1,39 +1,34 @@
-<ion-modal-view ng-controller="vaultViewSiteController">
-    <ion-header-bar class="bar bar-header bar-positive">
-        <button class="button button-clear button-primary" ng-click="close()">Close</button>
-        <h1 class="title">View Site</h1>
-        <button class="button button-clear button-primary" ng-click="editSite()">Edit</button>
-    </ion-header-bar>
-    <ion-content>
-        <div class="list">
-            <div class="item item-divider">
-                Site Information
-            </div>
-            <div class="item">
-                <div>Name</div>
-                {{site.name}}
-            </div>
-            <div class="item">
-                <div>Website</div>
-                {{site.uri}}
-            </div>
-            <div class="item">
-                <div>Username</div>
-                {{site.username}}
-            </div>
-            <div class="item">
-                <div>Password</div>
-                {{site.password}}
-            </div>
-            <div class="item item-divider">
-                Notes
-            </div>
-            <div class="item">
-                {{site.notes}}
-            </div>
-            <div class="item item-divider">
-                &nbsp;
-            </div>
+<div class="header">
+    <a ng-click="close()" class="left">Close</a>
+    <a ng-click="editSite()" class="right">Edit</a>
+    <div class="title">View Site</div>
+</div>
+<div class="content">
+    <div class="list">
+        <div class="list-divider">
+            Site Information
         </div>
-    </ion-content>
-</ion-modal-view>
+        <div class="list-item">
+            <div>Name</div>
+            {{site.name}}
+        </div>
+        <div class="list-item">
+            <div>Website</div>
+            {{site.uri}}
+        </div>
+        <div class="list-item">
+            <div>Username</div>
+            {{site.username}}
+        </div>
+        <div class="list-item">
+            <div>Password</div>
+            {{site.password}}
+        </div>
+        <div class="list-divider">
+            Notes
+        </div>
+        <div class="list-item">
+            {{site.notes}}
+        </div>
+    </div>
+</div>

src/popup/less/popup.less

@@ -30,6 +30,7 @@ body {
             background-color: rgba(255, 255, 255, 0.1);
         }
     }
+
     .title {
         font-weight: bold;
         display: block;
@@ -38,11 +39,13 @@ body {
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
     .left {
         float: left;
         display: block;
         padding: 12px 10px;
     }
+
     .right {
         float: right;
         display: block;
@@ -121,17 +124,28 @@ body {
         border-bottom: 1px solid #ddd;
         color: #333;
         text-decoration: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &:last-child {
             border: none;
         }
+
         .text {
             display: block;
         }
+
         .detail {
             font-size: 12px;
             color: #777;
             display: block;
         }
     }
+
+    .list-divider {
+        background-color: #eeeeee;
+        padding: 10px 10px;
+        border-bottom: 1px solid #ddd;
+    }
 }