Merge pull request #119 from glyptodon/management-ui-style

GUAC-1133: Clean up management UI style.

guacamole/src/main/webapp/app/home/styles/home.css

@@ -41,16 +41,6 @@ div.recent-connections {
     text-align: center;
 }
 
-.no-recent {
-
-    color: rgba(255, 255, 255, 0.5);
-    text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
-    opacity: 0.5;
-    
-    font-size: 2em;
-    font-weight: bolder;
-}
-
 div.recent-connections div.connection {
     -moz-border-radius: 0.5em;
     -webkit-border-radius: 0.5em;

guacamole/src/main/webapp/app/home/templates/guacRecentConnections.html

@@ -22,7 +22,7 @@
     -->
 
     <!-- Text displayed if no recent connections exist -->
-    <p class="no-recent" ng-hide="hasRecentConnections()">{{'HOME.INFO_NO_RECENT_CONNECTIONS' | translate}}</p>
+    <p class="placeholder" ng-hide="hasRecentConnections()">{{'HOME.INFO_NO_RECENT_CONNECTIONS' | translate}}</p>
 
     <!-- All active connections -->
     <div ng-repeat="activeConnection in activeConnections" class="connection">

guacamole/src/main/webapp/app/index/styles/buttons.css

@@ -73,6 +73,12 @@ button.danger:active, a.button.danger:active {
     background: #932;
 }
 
+input[type="submit"]:disabled, button:disabled, button.danger:disabled {
+    background-color: #3C3C3C;
+    color: rgba(255, 255, 255, 0.5);
+    opacity: 0.75;
+}
+
 .button.logout, .button.manage, .button.back, .button.home, .button.change-password {
     background-repeat: no-repeat;
     background-size: 1em;

guacamole/src/main/webapp/app/index/styles/lists.css

@@ -83,3 +83,14 @@ div.recent-connections .protocol {
     margin-left: 0.25em;
 }
 
+.placeholder {
+
+    color: rgba(255, 255, 255, 0.5);
+    text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
+    text-align: center;
+    opacity: 0.5;
+
+    font-size: 2em;
+    font-weight: bolder;
+
+}

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
  */

guacamole/src/main/webapp/app/manage/controllers/manageConnectionController.js

@@ -291,7 +291,7 @@ angular.module('manage').controller('manageConnectionController', ['$scope', '$i
      * Cancels all pending edits, returning to the management page.
      */
     $scope.cancel = function cancel() {
-        $location.url('/manage/');
+        $location.path('/manage/modules/connections/');
     };
     
     /**
@@ -313,7 +313,7 @@ angular.module('manage').controller('manageConnectionController', ['$scope', '$i
         // Save the connection
         connectionService.saveConnection($scope.connection)
         .success(function savedConnection() {
-            $location.path('/manage/');
+            $location.path('/manage/modules/connections/');
         })
 
         // Notify of any errors
@@ -363,7 +363,7 @@ angular.module('manage').controller('manageConnectionController', ['$scope', '$i
         // Delete the connection
         connectionService.deleteConnection($scope.connection)
         .success(function deletedConnection() {
-            $location.path('/manage/');
+            $location.path('/manage/modules/connections/');
         })
 
         // Notify of any errors

guacamole/src/main/webapp/app/manage/controllers/manageConnectionGroupController.js

@@ -171,7 +171,7 @@ angular.module('manage').controller('manageConnectionGroupController', ['$scope'
      * Cancels all pending edits, returning to the management page.
      */
     $scope.cancel = function cancel() {
-        $location.path('/manage/');
+        $location.path('/manage/modules/connections/');
     };
    
     /**
@@ -183,7 +183,7 @@ angular.module('manage').controller('manageConnectionGroupController', ['$scope'
         // Save the connection
         connectionGroupService.saveConnectionGroup($scope.connectionGroup)
         .success(function savedConnectionGroup() {
-            $location.path('/manage/');
+            $location.path('/manage/modules/connections/');
         })
 
         // Notify of any errors
@@ -233,7 +233,7 @@ angular.module('manage').controller('manageConnectionGroupController', ['$scope'
         // Delete the connection group
         connectionGroupService.deleteConnectionGroup($scope.connectionGroup)
         .success(function deletedConnectionGroup() {
-            $location.path('/manage/');
+            $location.path('/manage/modules/connections/');
         })
 
         // Notify of any errors

guacamole/src/main/webapp/app/manage/controllers/manageUserController.js

@@ -400,7 +400,7 @@ angular.module('manage').controller('manageUserController', ['$scope', '$injecto
      * Cancels all pending edits, returning to the management page.
      */
     $scope.cancel = function cancel() {
-        $location.path('/manage/');
+        $location.path('/manage/modules/users/');
     };
             
     /**
@@ -426,7 +426,7 @@ angular.module('manage').controller('manageUserController', ['$scope', '$injecto
             // Upon success, save any changed permissions
             permissionService.patchPermissions($scope.user.username, permissionsAdded, permissionsRemoved)
             .success(function patchedUserPermissions() {
-                $location.path('/manage/');
+                $location.path('/manage/modules/users/');
             })
 
             // Notify of any errors
@@ -488,7 +488,7 @@ angular.module('manage').controller('manageUserController', ['$scope', '$injecto
         // Delete the user 
         userService.deleteUser($scope.user)
         .success(function deletedUser() {
-            $location.path('/manage/');
+            $location.path('/manage/modules/users/');
         })
 
         // Notify of any errors

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;
-}

guacamole/src/main/webapp/app/manage/styles/sessions.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2015 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+.manage table.session-list {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.manage table.session-list tr.session:hover {
+    background: #CDA;
+}
+
+.manage table.session-list th {
+    background: rgba(0, 0, 0, 0.125);
+}
+
+.manage table.session-list th,
+.manage table.session-list td {
+    border: 1px solid #AAA;
+    padding: 0.5em 1em;
+}
+
+.manage table.session-list .select-session {
+    min-width: 2em;
+    text-align: center;
+}

guacamole/src/main/webapp/app/manage/templates/connection.html

@@ -33,7 +33,7 @@
 
         <!-- Active user count -->
         <span class="activeUserCount" ng-show="item.activeConnections">
-            {{'MANAGE.INFO_ACTIVE_USER_COUNT' | translate:'{USERS: item.activeConnections}'}}
+            {{'MANAGE_CONNECTION.INFO_ACTIVE_USER_COUNT' | translate:'{USERS: item.activeConnections}'}}
         </span>
         
     </div>

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="settings section connections">
-        <div class="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 -->
+            <a class="add-connection button"
-            <div class="connection-add-form">
+               ng-show="canCreateConnections"
+               href="#/manage/connections/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION' | translate}}</a>
 
-                <a class="add-connection button"
+            <a class="add-connection-group button"
-                   ng-show="canCreateConnections"
+               ng-show="canCreateConnectionGroups"
-                   href="#/manage/connections/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION' | translate}}</a>
+               href="#/manage/connectionGroups/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION_GROUP' | translate}}</a>
 
-                <a class="add-connection-group button"
+        </div>
-                   ng-show="canCreateConnectionGroups"
-                   href="#/manage/connectionGroups/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION_GROUP' | translate}}</a>
 
-            </div>
+        <!-- List of accessible connections and groups -->
-
+        <div class="connection-list">
-            <!-- List of accessible connections and groups -->
+            <guac-group-list
-            <div class="connection-list">
+                page-size="25"
-                <guac-group-list
+                connection-group="rootGroup"
-                    page-size="25"
+                connection-template="'app/manage/templates/connection.html'"
-                    connection-group="rootGroup"
+                connection-group-template="'app/manage/templates/connectionGroup.html'"/>
-                    connection-template="'app/manage/templates/connection.html'"
-                    connection-group-template="'app/manage/templates/connectionGroup.html'"/>
-            </div>
         </div>
     </div>
 

guacamole/src/main/webapp/app/manage/templates/manageSessions.html

@@ -28,57 +28,45 @@ THE SOFTWARE.
     </div>
 
     <!-- User Session management -->
-    <div class="settings section">
+    <div class="settings section sessions">
-        <div class="sessions">
+        <p>{{'MANAGE_SESSION.HELP_SESSIONS' | translate}}</p>
 
-            <p>{{'MANAGE_SESSION.HELP_SESSIONS' | translate}}</p>
+        <!-- Form action buttons -->
-
+        <div class="action-buttons">
-            <!-- Form action buttons -->
+            <button class="delete-sessions danger" ng-disabled="!canDeleteSessions()" ng-click="deleteSessions()">{{'MANAGE_SESSION.ACTION_DELETE' | translate}}</button>
-            <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>
         </div>
+
+        <!-- List of current user sessions -->
+        <table class="session-list">
+            <thead>
+                <tr>
+                    <th class="select-session"></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 class="select-session">
+                        <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>
+
+        <!-- Text displayed if no sessions exist -->
+        <p class="placeholder" ng-hide="wrapperPage.length">
+            {{'MANAGE_SESSION.INFO_NO_SESSIONS' | translate}}
+        </p>
+
+        <!-- Pager for session list -->
+        <guac-pager page="wrapperPage" page-size="25" items="wrappers | orderBy : 'username'"></guac-pager>
     </div>
 
 </div>

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="settings section users">
-        <div class="users">
+        <p>{{'MANAGE_USER.HELP_USERS' | translate}}</p>
-
-            <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>
 
+        <!-- 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>

guacamole/src/main/webapp/app/userMenu/directives/guacUserMenu.js

@@ -97,29 +97,30 @@ angular.module('userMenu').directive('guacUserMenu', [function guacUserMenu() {
              * @type Boolean
              */
             $scope.manageUsersDisabled = 
-                    ($location.path() === '/manage/modules/user');
+                    ($location.path() === '/manage/modules/users/');
 
             /**
-             * Whether the option to go to the connection management interface is
+             * Whether the option to go to the connection management interface
-             * disabled. Note that shis is different from canManageConnections,
+             * is disabled. Note that shis is different from
-             * which deals with whether permission to manage is granted. A user
+             * canManageConnections, which deals with whether permission to
-             * may have permission, yet see this option as currently disabled.
+             * manage is granted. A user may have permission, yet see this
+             * option as currently disabled.
              *
              * @type Boolean
              */
             $scope.manageConnectionsDisabled = 
-                    ($location.path() === '/manage/modules/connections');
+                    ($location.path() === '/manage/modules/connections/');
 
             /**
              * Whether the option to go to the session management interface is
-             * disabled. Note that shis is different from canManageConnections,
+             * disabled. Note that shis is different from canManageSessions,
              * which deals with whether permission to manage is granted. A user
              * may have permission, yet see this option as currently disabled.
              *
              * @type Boolean
              */
             $scope.manageSessionsDisabled = 
-                    ($location.path() === '/manage/modules/sessions');
+                    ($location.path() === '/manage/modules/sessions/');
 
             /**
              * Whether the current user has sufficient permissions to use the
@@ -350,21 +351,21 @@ angular.module('userMenu').directive('guacUserMenu', [function guacUserMenu() {
              * Navigates to the user management interface.
              */
             $scope.manageUsers = function manageUsers() {
-                $location.path('/manage/modules/users');
+                $location.path('/manage/modules/users/');
             };
 
             /**
              * Navigates to the connection management interface.
              */
             $scope.manageConnections = function manageConnections() {
-                $location.path('/manage/modules/connections');
+                $location.path('/manage/modules/connections/');
             };
 
             /**
              * Navigates to the user session management interface.
              */
             $scope.manageSessions = function manageSessions() {
-                $location.path('/manage/modules/sessions');
+                $location.path('/manage/modules/sessions/');
             };
 
             /**

guacamole/src/main/webapp/app/userMenu/templates/guacUserMenu.html

@@ -30,35 +30,43 @@
 
             <!-- Home -->
             <li>
-                <a class="home" ng-click="navigateHome()" ng-class="{disabled: homeDisabled}" href="#/">
+                <a class="home" ng-click="navigateHome()"
+                   ng-class="{disabled: homeDisabled}" href="#/">
                     {{'USER_MENU.ACTION_NAVIGATE_HOME' | translate}}
                 </a>
             </li>
 
             <!-- Manage Users -->
             <li>
-                <a class="manage-users" ng-click="manageUsers()" ng-class="{disabled: manageUsersDisabled}" ng-show="canManageUsers" href="#/manage/modules/users">
+                <a class="manage-users" ng-click="manageUsers()"
+                   ng-class="{disabled: manageUsersDisabled}"
+                   ng-show="canManageUsers" href="#/manage/modules/users/">
                     {{'USER_MENU.ACTION_MANAGE_USERS' | translate}}
                 </a>
             </li>
 
             <!-- Manage Connections -->
             <li>
-                <a class="manage-connections" ng-click="manageConnections()" ng-class="{disabled: manageConnectionsDisabled}" ng-show="canManageConnections" href="#/manage/modules/connections">
+                <a class="manage-connections" ng-click="manageConnections()"
+                   ng-class="{disabled: manageConnectionsDisabled}"
+                   ng-show="canManageConnections" href="#/manage/modules/connections/">
                     {{'USER_MENU.ACTION_MANAGE_CONNECTIONS' | translate}}
                 </a>
             </li>
 
             <!-- Manage Sessions -->
             <li>
-                <a class="manage-sessions" ng-click="manageSessions()" ng-class="{disabled: manageSessionsDisabled}" ng-show="canManageSessions" href="#/manage/modules/sessions">
+                <a class="manage-sessions" ng-click="manageSessions()"
+                   ng-class="{disabled: manageSessionsDisabled}"
+                   ng-show="canManageSessions" href="#/manage/modules/sessions/">
                     {{'USER_MENU.ACTION_MANAGE_SESSIONS' | translate}}
                 </a>
             </li>
 
             <!-- Change password -->
             <li>
-                <a class="change-password" ng-click="showPasswordUpdate()" ng-show="canChangePassword">
+                <a class="change-password" ng-click="showPasswordUpdate()"
+                   ng-show="canChangePassword">
                     {{'USER_MENU.ACTION_CHANGE_PASSWORD' | translate}}
                 </a>
             </li>

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_SESSIONS"    : "Active Sessions",
-        "ACTION_MANAGE_USERS"       : "Manage Users",
+        "ACTION_MANAGE_USERS"       : "Users",
         "ACTION_NAVIGATE_BACK"      : "Back",
         "ACTION_NAVIGATE_HOME"      : "Home",
         "ACTION_SAVE"               : "Save",
@@ -165,7 +165,7 @@
         "INFO_CONNECTION_ACTIVE_NOW"       : "Active Now",
         "INFO_CONNECTION_NOT_USED"         : "This connection has not yet been used.",
 
-        "SECTION_HEADER_CONNECTIONS"     : "Connections",
+        "SECTION_HEADER_CONNECTIONS"     : "Manage Connections",
         "SECTION_HEADER_EDIT_CONNECTION" : "Edit Connection",
         "SECTION_HEADER_HISTORY"         : "Usage History",
         "SECTION_HEADER_PARAMETERS"      : "Parameters",
@@ -245,10 +245,12 @@
         
         "HELP_SESSIONS" : "All currently-active Guacamole sessions are listed here. If you wish to kill one or more sessions, check the box next to those sessions and click \"Kill Sessions\". Killing a session will immediately disconnect the user from the associated connection.",
         
-        "SECTION_HEADER_SESSIONS" : "Sessions",
+        "INFO_NO_SESSIONS" : "No active sessions",
+
+        "SECTION_HEADER_SESSIONS" : "Active Sessions",
         
         "TABLE_HEADER_SESSION_USERNAME"        : "Username",
-        "TABLE_HEADER_SESSION_STARTDATE"       : "Start date",
+        "TABLE_HEADER_SESSION_STARTDATE"       : "Active since",
         "TABLE_HEADER_SESSION_REMOTEHOST"      : "Remote host",
         "TABLE_HEADER_SESSION_CONNECTION_NAME" : "Connection name",