From 2eeed3679769f2d210a99b9bce581086922ce31a Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Thu, 19 Mar 2015 14:00:32 -0700
Subject: [PATCH] GUAC-1133: Apply common styling and form to management pages.

---
 .../src/main/webapp/app/index/styles/ui.css   | 38 ---------
 .../main/webapp/app/manage/styles/forms.css   |  9 ---
 .../manage/templates/manageConnections.html   | 39 +++++----
 .../app/manage/templates/manageSessions.html  | 81 ++++++++-----------
 .../app/manage/templates/manageUsers.html     | 46 +++++------
 .../src/main/webapp/translations/en_US.json   |  4 +-
 6 files changed, 73 insertions(+), 144 deletions(-)

diff --git a/guacamole/src/main/webapp/app/index/styles/ui.css b/guacamole/src/main/webapp/app/index/styles/ui.css
index 4c8ca5fb9..87c407bcb 100644
--- a/guacamole/src/main/webapp/app/index/styles/ui.css
+++ b/guacamole/src/main/webapp/app/index/styles/ui.css
@@ -211,44 +211,6 @@ div.section {
     background: inherit;
 }
 
-/*
- * List element fields (editing)
- */
-
-.form .fields th,
-.form .permissions th {
-    font-weight: normal;
-    vertical-align: middle;
-    text-align: left;
-}
-
-.form h2 {
-    border-top: none;
-}
-
-.form h3 {
-    font-size: 1em;
-    margin-bottom: 0.25em;
-}
-
-.form {
-    cursor: auto;
-    animation-name: fadein;
-    -webkit-animation-name: fadein;
-    animation-duration: 0.125s;
-    -webkit-animation-duration: 0.125s;
-}
-
-.object-buttons {
-
-    text-align: right;
-
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    padding-top: 0.5em;
-    margin: 0.5em;
-
-}
-
 /*
  * List element icons
  */
diff --git a/guacamole/src/main/webapp/app/manage/styles/forms.css b/guacamole/src/main/webapp/app/manage/styles/forms.css
index d8d63fd3c..0724562e2 100644
--- a/guacamole/src/main/webapp/app/manage/styles/forms.css
+++ b/guacamole/src/main/webapp/app/manage/styles/forms.css
@@ -30,12 +30,3 @@
     text-align: center;
     margin-bottom: 1em;
 }
-
-.manage .user-add-form {
-    margin-bottom: 0.5em;
-}
-
-.manage .user-add-form input.name {
-    max-width: 80%;
-    width: 20em;
-}
diff --git a/guacamole/src/main/webapp/app/manage/templates/manageConnections.html b/guacamole/src/main/webapp/app/manage/templates/manageConnections.html
index 3404fa47a..e314e299a 100644
--- a/guacamole/src/main/webapp/app/manage/templates/manageConnections.html
+++ b/guacamole/src/main/webapp/app/manage/templates/manageConnections.html
@@ -28,32 +28,29 @@ THE SOFTWARE.
     </div>
 
     <!-- Connection management -->
-    <div class="settings section" ng-show="canManageConnections">
-        <div class="connections">
+    <div class="settings section connections">
+        <p>{{'MANAGE_CONNECTION.HELP_CONNECTIONS' | translate}}</p>
 
-            <p>{{'MANAGE_CONNECTION.HELP_CONNECTIONS' | translate}}</p>
+        <!-- Form action buttons -->
+        <div class="action-buttons">
 
-            <!-- Connection/group creation buttons -->
-            <div class="connection-add-form">
+            <a class="add-connection button"
+               ng-show="canCreateConnections"
+               href="#/manage/connections/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION' | translate}}</a>
 
-                <a class="add-connection button"
-                   ng-show="canCreateConnections"
-                   href="#/manage/connections/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION' | translate}}</a>
+            <a class="add-connection-group button"
+               ng-show="canCreateConnectionGroups"
+               href="#/manage/connectionGroups/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION_GROUP' | translate}}</a>
 
-                <a class="add-connection-group button"
-                   ng-show="canCreateConnectionGroups"
-                   href="#/manage/connectionGroups/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION_GROUP' | translate}}</a>
+        </div>
 
-            </div>
-
-            <!-- List of accessible connections and groups -->
-            <div class="connection-list">
-                <guac-group-list
-                    page-size="25"
-                    connection-group="rootGroup"
-                    connection-template="'app/manage/templates/connection.html'"
-                    connection-group-template="'app/manage/templates/connectionGroup.html'"/>
-            </div>
+        <!-- List of accessible connections and groups -->
+        <div class="connection-list">
+            <guac-group-list
+                page-size="25"
+                connection-group="rootGroup"
+                connection-template="'app/manage/templates/connection.html'"
+                connection-group-template="'app/manage/templates/connectionGroup.html'"/>
         </div>
     </div>
 
diff --git a/guacamole/src/main/webapp/app/manage/templates/manageSessions.html b/guacamole/src/main/webapp/app/manage/templates/manageSessions.html
index 144b09024..70cedf5e2 100644
--- a/guacamole/src/main/webapp/app/manage/templates/manageSessions.html
+++ b/guacamole/src/main/webapp/app/manage/templates/manageSessions.html
@@ -28,57 +28,40 @@ THE SOFTWARE.
     </div>
 
     <!-- User Session management -->
-    <div class="settings section">
-        <div class="sessions">
+    <div class="settings section sessions">
+        <p>{{'MANAGE_SESSION.HELP_SESSIONS' | translate}}</p>
 
-            <p>{{'MANAGE_SESSION.HELP_SESSIONS' | translate}}</p>
-
-            <!-- Form action buttons -->
-            <div class="action-buttons">
-                <button class="delete-sessions danger" ng-disabled="!canDeleteSessions()" ng-click="deleteSessions()">{{'MANAGE_SESSION.ACTION_DELETE' | translate}}</button>
-            </div>
-
-            <!-- List of current user sessions -->
-            <table class="session-list">
-                <thead>
-                    <tr>
-                        <th></th>
-                        <th>
-                            {{'MANAGE_SESSION.TABLE_HEADER_SESSION_USERNAME' | translate}}
-                        </th>
-                        <th>
-                            {{'MANAGE_SESSION.TABLE_HEADER_SESSION_STARTDATE' | translate}}
-                        </th>
-                        <th>
-                            {{'MANAGE_SESSION.TABLE_HEADER_SESSION_REMOTEHOST' | translate}}
-                        </th>
-                        <th>
-                            {{'MANAGE_SESSION.TABLE_HEADER_SESSION_CONNECTION_NAME' | translate}}
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr ng-repeat="wrapper in wrapperPage" class="session">
-                        <td>
-                            <input ng-change="wrapperSelectionChange(wrapper)" type="checkbox" ng-model="wrapper.checked" />
-                        </td>
-                        <td>
-                            {{wrapper.tunnel.username}}
-                        </td>
-                        <td>
-                            {{wrapper.tunnel.startDate | date:'short'}}
-                        </td>
-                        <td>
-                            {{wrapper.tunnel.remoteHost}}
-                        </td>
-                        <td>
-                            {{connections[wrapper.tunnel.identifier].name}}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <guac-pager page="wrapperPage" page-size="25" items="wrappers | orderBy : 'username'"></guac-pager>
+        <!-- Form action buttons -->
+        <div class="action-buttons">
+            <button class="delete-sessions danger" ng-disabled="!canDeleteSessions()" ng-click="deleteSessions()">{{'MANAGE_SESSION.ACTION_DELETE' | translate}}</button>
         </div>
+
+        <!-- List of current user sessions -->
+        <table class="session-list">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>{{'MANAGE_SESSION.TABLE_HEADER_SESSION_USERNAME' | translate}}</th>
+                    <th>{{'MANAGE_SESSION.TABLE_HEADER_SESSION_STARTDATE' | translate}}</th>
+                    <th>{{'MANAGE_SESSION.TABLE_HEADER_SESSION_REMOTEHOST' | translate}}</th>
+                    <th>{{'MANAGE_SESSION.TABLE_HEADER_SESSION_CONNECTION_NAME' | translate}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr ng-repeat="wrapper in wrapperPage" class="session">
+                    <td>
+                        <input ng-change="wrapperSelectionChange(wrapper)" type="checkbox" ng-model="wrapper.checked" />
+                    </td>
+                    <td>{{wrapper.tunnel.username}}</td>
+                    <td>{{wrapper.tunnel.startDate | date:'short'}}</td>
+                    <td>{{wrapper.tunnel.remoteHost}}</td>
+                    <td>{{connections[wrapper.tunnel.identifier].name}}</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <!-- Pager for session list -->
+        <guac-pager page="wrapperPage" page-size="25" items="wrappers | orderBy : 'username'"></guac-pager>
     </div>
 
 </div>
\ No newline at end of file
diff --git a/guacamole/src/main/webapp/app/manage/templates/manageUsers.html b/guacamole/src/main/webapp/app/manage/templates/manageUsers.html
index a0e231191..e61cc3564 100644
--- a/guacamole/src/main/webapp/app/manage/templates/manageUsers.html
+++ b/guacamole/src/main/webapp/app/manage/templates/manageUsers.html
@@ -28,33 +28,29 @@ THE SOFTWARE.
     </div>
 
     <!-- User management -->
-    <div class="settings section" ng-show="canManageUsers">
-        <div class="users">
-
-            <p>{{'MANAGE_USER.HELP_USERS' | translate}}</p>
-
-            <!-- User creation form -->
-            <div class="user-add-form" ng-show="canCreateUsers">
-                <input type="text" ng-model="newUsername" class="name username" autocorrect="off" autocapitalize="off"/>
-                <button class="add-user" ng-click="newUser()">{{'MANAGE_USER.ACTION_NEW_USER' | translate}}</button>
-            </div>
-
-            <!-- List of users this user has access to -->
-            <div class="user-list">
-                <div ng-repeat="user in userPage" class="user list-item">
-                    <a ng-href="#/manage/users/{{user.username}}">
-                        <div class="caption">
-                            <div class="icon user"></div>
-                            <span class="name">{{user.username}}</span>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-            <!-- Pager controls for user list -->
-            <guac-pager page="userPage" page-size="25" items="users | orderBy : 'username'"></guac-pager>
+    <div class="settings section users">
+        <p>{{'MANAGE_USER.HELP_USERS' | translate}}</p>
 
+        <!-- Form action buttons -->
+        <div class="action-buttons" ng-show="canCreateUsers">
+            <input type="text" ng-model="newUsername" class="name username" autocorrect="off" autocapitalize="off"/>
+            <button class="add-user" ng-click="newUser()">{{'MANAGE_USER.ACTION_NEW_USER' | translate}}</button>
         </div>
+
+        <!-- List of users this user has access to -->
+        <div class="user-list">
+            <div ng-repeat="user in userPage" class="user list-item">
+                <a ng-href="#/manage/users/{{user.username}}">
+                    <div class="caption">
+                        <div class="icon user"></div>
+                        <span class="name">{{user.username}}</span>
+                    </div>
+                </a>
+            </div>
+        </div>
+
+        <!-- Pager controls for user list -->
+        <guac-pager page="userPage" page-size="25" items="users | orderBy : 'username'"></guac-pager>
     </div>
 
 </div>
\ No newline at end of file
diff --git a/guacamole/src/main/webapp/translations/en_US.json b/guacamole/src/main/webapp/translations/en_US.json
index 0f85ddd09..deea33679 100644
--- a/guacamole/src/main/webapp/translations/en_US.json
+++ b/guacamole/src/main/webapp/translations/en_US.json
@@ -11,8 +11,8 @@
         "ACTION_LOGIN"              : "Login",
         "ACTION_LOGOUT"             : "Logout",
         "ACTION_MANAGE_CONNECTIONS" : "Manage Connections",
-        "ACTION_MANAGE_SESSIONS"    : "Manage Sessions",
-        "ACTION_MANAGE_USERS"       : "Manage Users",
+        "ACTION_MANAGE_SESSIONS"    : "Active Sessions",
+        "ACTION_MANAGE_USERS"       : "Users",
         "ACTION_NAVIGATE_BACK"      : "Back",
         "ACTION_NAVIGATE_HOME"      : "Home",
         "ACTION_SAVE"               : "Save",