From a678f032844fc38f8f867850d5f3ffc52725d4e5 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 30 Mar 2017 23:49:35 -0400
Subject: [PATCH] button groups for vault

---
 src/app/global/mainController.js | 18 ------
 src/app/vault/views/vault.html   | 94 +++++++++++++++-----------------
 2 files changed, 43 insertions(+), 69 deletions(-)

diff --git a/src/app/global/mainController.js b/src/app/global/mainController.js
index e3ec1a5576..d9e1afeeb6 100644
--- a/src/app/global/mainController.js
+++ b/src/app/global/mainController.js
@@ -26,24 +26,6 @@ angular
 
                 $(document).off('click', '.sidebar li a');
             }
-
-            $('.table-responsive').on('shown.bs.dropdown', function (e) {
-                var t = $(this),
-                    m = $(e.target).find('.dropdown-menu'),
-                    tb = t.offset().top + t.height(),
-                    mb = m.offset().top + m.outerHeight(true),
-                    d = 20; // Space for shadow + scrollbar.
-                if (t[0].scrollWidth > t.innerWidth()) {
-                    if (mb + d > tb) {
-                        t.css('padding-bottom', ((mb + d) - tb));
-                    }
-                }
-                else {
-                    t.css('overflow', 'visible');
-                }
-            }).on('hidden.bs.dropdown', function () {
-                $(this).css({ 'padding-bottom': '', 'overflow': '' });
-            });
         });
 
         $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
diff --git a/src/app/vault/views/vault.html b/src/app/vault/views/vault.html
index 04ee8bda39..0988a1f6a2 100644
--- a/src/app/vault/views/vault.html
+++ b/src/app/vault/views/vault.html
@@ -38,37 +38,33 @@
                 <button type="button" ng-click="addLogin(null, true)" class="btn btn-default btn-flat">Add a Login</button>
             </div>
             <div class="table-responsive" ng-show="favoriteLogins.length">
-                <table class="table table-striped table-hover table-selectable">
-                    <thead>
-                        <tr>
-                            <th style="width: 75px; min-width: 75px;"></th>
-                            <th>Name</th>
-                            <th style="width: 300px;">Username</th>
-                        </tr>
-                    </thead>
+                <table class="table table-striped table-hover table-vmiddle">
                     <tbody>
                         <tr ng-repeat="login in favoriteLogins = (logins | filter: { favorite: true } |
                             filter: (main.searchVaultText || '') | orderBy: ['name', 'username'])">
-                            <td class="actions">
-                                <button type="button" ng-click="deleteLogin(login)" class="btn btn-link btn-table"
-                                        uib-tooltip="Delete">
-                                    <i class="fa fa-lg fa-trash"></i>
-                                </button>
-                                <div class="tooltip-wrapper"
-                                     uib-tooltip="{{login.organizationId ? 'Already shared.' : 'Share'}}">
-                                    <button type="button" ng-click="share(login)" class="btn btn-link btn-table"
-                                            ng-disabled="login.organizationId !== null">
-                                        <i class="fa fa-lg fa-share-alt"></i>
+                            <td style="width: 70px;">
+                                <div class="btn-group">
+                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                        <i class="fa fa-cog"></i> <span class="caret"></span>
                                     </button>
+                                    <ul class="dropdown-menu">
+                                        <li ng-show="!login.organizationId">
+                                            <a href="javascript:void(0)" ng-click="share(login)">
+                                                <i class="fa fa-fw fa-share-alt"></i> Share
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="javascript:void(0)" ng-click="deleteLogin(login)" class="text-red">
+                                                <i class="fa fa-fw fa-trash"></i> Delete
+                                            </a>
+                                        </li>
+                                    </ul>
                                 </div>
                             </td>
-                            <td ng-click="editLogin(login)">
-                                <span ng-click="$event.stopPropagation()">
-                                    <a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a>
-                                </span>
-                            </td>
-                            <td ng-click="editLogin(login)">
-                                <span ng-click="$event.stopPropagation()">{{login.username}}</span>
+                            <td>
+                                <a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a>
+                                <i class="fa fa-user text-muted" uib-tooltip="Shared" ng-show="login.organizationId"></i>
+                                <div class="text-sm text-muted">{{login.username}}</div>
                             </td>
                         </tr>
                     </tbody>
@@ -112,38 +108,34 @@
                 <button type="button" ng-click="addLogin(folder)" class="btn btn-default btn-flat">Add a Login</button>
             </div>
             <div class="table-responsive" ng-show="folderLogins.length">
-                <table class="table table-striped table-hover table-selectable">
-                    <thead>
-                        <tr>
-                            <th style="width: 75px; min-width: 75px;"></th>
-                            <th>Name</th>
-                            <th style="width: 300px;">Username</th>
-                        </tr>
-                    </thead>
+                <table class="table table-striped table-hover table-vmiddle">
                     <tbody>
                         <tr ng-repeat="login in folderLogins = (logins | filter: { folderId: folder.id } |
                             filter: (main.searchVaultText || '') | orderBy: ['name', 'username'])">
-                            <td class="actions">
-                                <button type="button" ng-click="deleteLogin(login)" class="btn btn-link btn-table"
-                                        uib-tooltip="Delete">
-                                    <i class="fa fa-lg fa-trash"></i>
-                                </button>
-                                <div class="tooltip-wrapper"
-                                     uib-tooltip="{{login.organizationId ? 'Already shared.' : 'Share'}}">
-                                    <button type="button" ng-click="share(login)" class="btn btn-link btn-table"
-                                            ng-disabled="login.organizationId !== null">
-                                        <i class="fa fa-lg fa-share-alt"></i>
+                            <td style="width: 70px;">
+                                <div class="btn-group">
+                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                        <i class="fa fa-cog"></i> <span class="caret"></span>
                                     </button>
+                                    <ul class="dropdown-menu">
+                                        <li ng-show="!login.organizationId">
+                                            <a href="javascript:void(0)" ng-click="share(login)">
+                                                <i class="fa fa-fw fa-share-alt"></i> Share
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="javascript:void(0)" ng-click="deleteLogin(login)" class="text-red">
+                                                <i class="fa fa-fw fa-trash"></i> Delete
+                                            </a>
+                                        </li>
+                                    </ul>
                                 </div>
                             </td>
-                            <td ng-click="editLogin(login)">
-                                <span ng-click="$event.stopPropagation()">
-                                    <a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a>
-                                    <i class="fa fa-star text-muted" uib-tooltip="Favorite" ng-show="login.favorite"></i>
-                                </span>
-                            </td>
-                            <td ng-click="editLogin(login)">
-                                <span ng-click="$event.stopPropagation()">{{login.username}}</span>
+                            <td>
+                                <a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a>
+                                <i class="fa fa-star text-muted" uib-tooltip="Favorite" ng-show="login.favorite"></i>
+                                <i class="fa fa-user text-muted" uib-tooltip="Shared" ng-show="login.organizationId"></i>
+                                <div class="text-sm text-muted">{{login.username}}</div>
                             </td>
                         </tr>
                     </tbody>