tab layout for sharing center

src/app/config.js

@@ -105,17 +105,23 @@ angular
                 controller: 'sharedLoginsController',
                 data: { pageTitle: 'Shared Logins' }
             })
+            .state('backend.sharedLoginsMe', {
+                url: '^/shared/logins/me',
+                templateUrl: 'app/shared/views/sharedLoginsMe.html',
+                controller: 'sharedLoginsMeController',
+                data: { pageTitle: 'Logins Shared with Me' }
+            })
             .state('backend.sharedFolders', {
                 url: '^/shared/folders',
                 templateUrl: 'app/shared/views/sharedFolders.html',
                 controller: 'sharedFoldersController',
                 data: { pageTitle: 'Shared Folders' }
             })
-            .state('backend.sharedMe', {
+            .state('backend.sharedFoldersMe', {
-                url: '^/shared/me',
+                url: '^/shared/folders/me',
-                templateUrl: 'app/shared/views/sharedMe.html',
+                templateUrl: 'app/shared/views/sharedFoldersMe.html',
-                controller: 'sharedMeController',
+                controller: 'sharedFoldersMeController',
-                data: { pageTitle: 'Shared with Me' }
+                data: { pageTitle: 'Folders Shared with Me' }
             })
 
         // Frontend

src/app/shared/sharedFoldersMeController.js

@@ -0,0 +1,6 @@
+angular
+    .module('bit.shared')
+
+    .controller('sharedFoldersMeController', function ($scope, apiService, cryptoService, cipherService, $analytics) {
+
+    });

src/app/shared/sharedLoginsMeController.js

@@ -0,0 +1,6 @@
+angular
+    .module('bit.shared')
+
+    .controller('sharedLoginsMeController', function ($scope, apiService, cryptoService, cipherService, $analytics) {
+
+    });

src/app/shared/sharedMeController.js

@@ -1,6 +0,0 @@
-angular
-    .module('bit.shared')
-
-    .controller('sharedMeController', function ($scope, apiService, cryptoService, cipherService, $analytics) {
-
-    });

src/app/shared/views/sharedFolders.html

@@ -1,15 +1,21 @@
 <section class="content-header">
     <h1>
         Sharing Center
-        <small>folders I've shared</small>
+        <small>folders</small>
     </h1>
 </section>
 <section class="content">
+    <div class="nav-tabs-custom">
+        <ul class="nav nav-tabs">
+            <li class="active"><a ui-sref="backend.sharedFolders">I've shared</a></li>
+            <li><a ui-sref="backend.sharedFoldersMe">Shared with me</a></li>
+        </ul>
+        <div class="tab-content">
             <div ng-show="loading && !folders.length">
-        <p>Loading...</p>
+                Loading...
             </div>
             <div ng-show="!loading && !folders.length">
-        <p>No shared folders.</p>
+                No shared folders.
             </div>
             <div class="table-responsive" ng-show="folders.length">
                 <table class="table table-striped table-hover">
@@ -36,4 +42,6 @@
                     </tbody>
                 </table>
             </div>
+        </div>
+    </div>
 </section>

src/app/shared/views/sharedFoldersMe.html

@@ -0,0 +1,47 @@
+<section class="content-header">
+    <h1>
+        Sharing Center
+        <small>folders</small>
+    </h1>
+</section>
+<section class="content">
+    <div class="nav-tabs-custom">
+        <ul class="nav nav-tabs">
+            <li><a ui-sref="backend.sharedFolders">I've shared</a></li>
+            <li class="active"><a ui-sref="backend.sharedFoldersMe">Shared with me</a></li>
+        </ul>
+        <div class="tab-content">
+            <div ng-show="loading && !folders.length">
+                Loading...
+            </div>
+            <div ng-show="!loading && !folders.length">
+                No shared folders.
+            </div>
+            <div class="table-responsive" ng-show="folders.length">
+                <table class="table table-striped table-hover">
+                    <thead>
+                        <tr>
+                            <th style="width: 75px; min-width: 75px;"></th>
+                            <th>Name</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr ng-repeat="folder in folders">
+                            <td>
+                                <button type="button" ng-click="revoke(folder)" class="btn btn-link btn-table"
+                                        uib-tooltip="Revoke Access">
+                                    <i class="fa fa-lg fa-close"></i>
+                                </button>
+                                <button type="button" ng-click="edit(folder)" class="btn btn-link btn-table"
+                                        uib-tooltip="View/Edit">
+                                    <i class="fa fa-lg fa-pencil"></i>
+                                </button>
+                            </td>
+                            <td>{{folder.name}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>

src/app/shared/views/sharedLogins.html

@@ -1,15 +1,21 @@
 <section class="content-header">
     <h1>
         Sharing Center
-        <small>logins I've shared</small>
+        <small>logins</small>
     </h1>
 </section>
 <section class="content">
+    <div class="nav-tabs-custom">
+        <ul class="nav nav-tabs">
+            <li class="active"><a ui-sref="backend.sharedLogins">I've shared</a></li>
+            <li><a ui-sref="backend.sharedLoginsMe">Shared with me</a></li>
+        </ul>
+        <div class="tab-content">
             <div ng-show="loading && !logins.length">
-        <p>Loading...</p>
+                Loading...
             </div>
             <div ng-show="!loading && !logins.length">
-        <p>No shared logins.</p>
+                No shared logins.
             </div>
             <div class="table-responsive" ng-show="logins.length">
                 <table class="table table-striped table-hover">
@@ -38,4 +44,6 @@
                     </tbody>
                 </table>
             </div>
+        </div>
+    </div>
 </section>

src/app/shared/views/sharedLoginsMe.html

@@ -0,0 +1,49 @@
+<section class="content-header">
+    <h1>
+        Sharing Center
+        <small>logins</small>
+    </h1>
+</section>
+<section class="content">
+    <div class="nav-tabs-custom">
+        <ul class="nav nav-tabs">
+            <li><a ui-sref="backend.sharedLogins">I've shared</a></li>
+            <li class="active"><a ui-sref="backend.sharedLoginsMe">Shared with me</a></li>
+        </ul>
+        <div class="tab-content">
+            <div ng-show="loading && !logins.length">
+                Loading...
+            </div>
+            <div ng-show="!loading && !logins.length">
+                No shared logins.
+            </div>
+            <div class="table-responsive" ng-show="logins.length">
+                <table class="table table-striped table-hover">
+                    <thead>
+                        <tr>
+                            <th style="width: 75px; min-width: 75px;"></th>
+                            <th>Name</th>
+                            <th style="width: 300px;">Username</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr ng-repeat="login in logins">
+                            <td>
+                                <button type="button" ng-click="revoke(login)" class="btn btn-link btn-table"
+                                        uib-tooltip="Revoke Access">
+                                    <i class="fa fa-lg fa-close"></i>
+                                </button>
+                                <button type="button" ng-click="edit(login)" class="btn btn-link btn-table"
+                                        uib-tooltip="View/Edit">
+                                    <i class="fa fa-lg fa-pencil"></i>
+                                </button>
+                            </td>
+                            <td>{{login.name}}</td>
+                            <td>{{login.username}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>

src/app/shared/views/sharedMe.html

@@ -1,9 +0,0 @@
-<section class="content-header">
-    <h1>
-        Sharing Center
-        <small>shared with me</small>
-    </h1>
-</section>
-<section class="content">
-    TODO
-</section>

src/app/views/backendLayout.html

@@ -57,7 +57,8 @@
                     </ul>
                 </li>
                 <li class="treeview"
-                    ng-class="{active: $state.includes('backend.sharedLogins') || $state.includes('backend.sharedFolders') || $state.includes('backend.sharedMe')}">
+                    ng-class="{active: $state.includes('backend.sharedLogins') || $state.includes('backend.sharedLoginsMe') ||
+                        $state.includes('backend.sharedFolders') || $state.includes('backend.sharedFoldersMe')}">
                     <a ui-sref="backend.sharedFolders"><i class="fa fa-users"></i> <span>Sharing Center</span></a>
                     <ul class="treeview-menu">
                         <li>
@@ -70,11 +71,6 @@
                                 <i class="fa fa-circle-o"></i> Shared Logins
                             </a>
                         </li>
-                        <li>
-                            <a ui-sref="backend.sharedMe">
-                                <i class="fa fa-circle-o"></i> Shared with Me
-                            </a>
-                        </li>
                     </ul>
                 </li>
                 <li class="treeview"

src/index.html

@@ -118,8 +118,9 @@
 
     <script src="app/shared/sharedModule.js"></script>
     <script src="app/shared/sharedLoginsController.js"></script>
+    <script src="app/shared/sharedLoginsMeController.js"></script>
     <script src="app/shared/sharedFoldersController.js"></script>
-    <script src="app/shared/sharedMeController.js"></script>
+    <script src="app/shared/sharedFoldersMeController.js"></script>
 
     <script src="app/settings/settingsModule.js"></script>
     <script src="app/settings/settingsController.js"></script>