GUACAMOLE-1866: Clean up UI of configurable "Recent Connections" section.

guacamole/src/main/frontend/src/app/home/controllers/homeController.js

@@ -62,12 +62,14 @@ angular.module('home').controller('homeController', ['$scope', '$injector',
     ];
     
     /**
-     * Returns true if recent connections should be displayed on the Guacamole
+     * Returns whether the "Recent Connections" section should be displayed on
-     * home page, otherwise false.
+     * the home screen.
      * 
      * @returns {!boolean}
+     *     true if recent connections should be displayed on the home screen,
+     *     false otherwise.
      */
-    $scope.willShowRecentConnections = function willShowRecentConnections() {
+    $scope.isRecentConnectionsVisible = function isRecentConnectionsVisible() {
         return preferenceService.preferences.showRecentConnections;
     };
 

guacamole/src/main/frontend/src/app/home/directives/guacRecentConnections.js

@@ -74,16 +74,6 @@ angular.module('home').directive('guacRecentConnections', [function guacRecentCo
                         && guacHistory.removeEntry(recentConnection.entry.id));
             };
             
-            /**
-             * Returns whether or not recent connections should be displayed.
-             * 
-             * @returns {!boolean}
-             *     true if recent connections should be displayed, otherwise false.
-             */
-            $scope.willShowRecentConnections = function willShowRecentConnections() {
-                return preferenceService.preferences.showRecentConnections;
-            };
-
             /**
              * Returns whether recent connections are available for display.
              *

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

@@ -77,9 +77,12 @@ a.home-connection, .empty.balancer a.home-connection-group {
     display: none;
 }
 
-.header-app-name {
+.recent-connections .connection .remove-recent {
-    font-size: 0.85em;
+    visibility: hidden;
-    box-shadow: none;
+}
+
+.recent-connections .connection:hover .remove-recent {
+    visibility: visible;
 }
 
 .recent-connections .connection .remove-recent::after {
@@ -90,11 +93,10 @@ a.home-connection, .empty.balancer a.home-connection-group {
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center center;
-    background-image: url('images/x.svg');
+    background-image: url('images/x-black.svg');
 }
 
 .recent-connections .connection .remove-recent {
-    background-color: red;
     height: 1em;
     width: 1em;
     position: absolute;

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

@@ -1,4 +1,4 @@
-<div class="recent-connections" ng-show="willShowRecentConnections()">
+<div class="recent-connections">
 
     <!-- Text displayed if no recent connections exist -->
     <p class="placeholder" ng-hide="hasRecentConnections()">{{'HOME.INFO_NO_RECENT_CONNECTIONS' | translate}}</p>

guacamole/src/main/frontend/src/app/home/templates/home.html

@@ -2,16 +2,14 @@
 
     <div class="connection-list-ui">
 
-        <div class="header header-app-name">
+        <!-- The recent connections for this user -->
-            <h2 id="section-header-app-name">{{'APP.NAME' | translate}}</h2>
+        <div class="header" ng-show="isRecentConnectionsVisible()">
+            <h2 id="section-header-recent-connections">{{'HOME.SECTION_HEADER_RECENT_CONNECTIONS' | translate}}</h2>
             <guac-user-menu></guac-user-menu>
         </div>
-        
+        <guac-recent-connections
-        <!-- The recent connections for this user -->
+            root-groups="rootConnectionGroups"
-        <div class="header" ng-show="willShowRecentConnections()">
+            ng-show="isRecentConnectionsVisible()"></guac-recent-connections>
-            <h2 id="section-header-recent-connections">{{'HOME.SECTION_HEADER_RECENT_CONNECTIONS' | translate}}</h2>
-        </div>
-        <guac-recent-connections root-groups="rootConnectionGroups" ng-show="willShowRecentConnections()"></guac-recent-connections>
 
         <!-- All connections for this user -->
         <div class="header">
@@ -21,6 +19,7 @@
                 placeholder="'HOME.FIELD_PLACEHOLDER_FILTER' | translate"
                 connection-properties="filteredConnectionProperties"
                 connection-group-properties="filteredConnectionGroupProperties"></guac-group-list-filter>
+            <guac-user-menu></guac-user-menu>
         </div>
         <div class="all-connections">
             <guac-group-list

guacamole/src/main/frontend/src/app/index/styles/headers.css

@@ -78,9 +78,8 @@ h2 {
     margin-bottom: 0;
 }
 
-.header ~ * .header,
+.header:not(.ng-hide) ~ * .header,
-.header ~ .header {
+.header:not(.ng-hide) ~ .header {
-    margin-top: 0;
     border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -106,3 +105,7 @@ h2 {
     border-left: 1px solid rgba(0, 0, 0, 0.125);
     background-color: transparent;
 }
+
+.header:not(.ng-hide) ~ .header .user-menu {
+    display: none;
+}

guacamole/src/main/frontend/src/app/settings/templates/settingsPreferences.html

@@ -6,6 +6,24 @@
         <guac-form content="localeFields" model="preferences" namespace="'SETTINGS_PREFERENCES'"></guac-form>
     </div>
 
+    <!-- Appearance -->
+    <h2 class="header">{{'SETTINGS_PREFERENCES.SECTION_HEADER_APPEARANCE' | translate}}</h2>
+    <div class="settings section appearance">
+        <p>{{'SETTINGS_PREFERENCES.HELP_APPEARANCE' | translate}}</p>
+        <div class='form'>
+            <table class='fields'>
+                <tr>
+                    <th>{{'SETTINGS_PREFERENCES.FIELD_HEADER_SHOW_RECENT_CONNECTIONS' | translate}}</th>
+                    <td><input ng-model="preferences.showRecentConnections" type="checkbox"/></td>
+                </tr>
+                <tr>
+                    <th>{{'SETTINGS_PREFERENCES.FIELD_HEADER_NUMBER_RECENT_CONNECTIONS' | translate}}</th>
+                    <td><input ng-model="preferences.numberOfRecentConnections" type="number" min="1" max="20"/></td>
+                </tr>
+            </table>
+        </div>
+    </div>
+
     <!-- Password update -->
     <h2 class="header" ng-show="canUpdateSelf">{{'SETTINGS_PREFERENCES.SECTION_HEADER_UPDATE_PASSWORD' | translate}}</h2>
     <div class="settings section update-password" ng-show="canUpdateSelf">
@@ -89,24 +107,6 @@
         </div>
     </div>
     
-    <!-- Recent connections -->
-    <h2 class="header">{{'SETTINGS_PREFERENCES.SECTION_HEADER_RECENT_CONNECTIONS' | translate}}</h2>
-    <div class="settings section recent">
-        <p>{{'SETTINGS_PREFERENCES.HELP_RECENT_CONNECTIONS' | translate}}</p>
-        <div class='form'>
-            <table class='fields'>
-                <tr>
-                    <th>{{'SETTINGS_PREFERENCES.FIELD_HEADER_SHOW_RECENT_CONNECTIONS' | translate}}</th>
-                    <td><input ng-model="preferences.showRecentConnections" type="checkbox"/></td>
-                </tr>
-                <tr>
-                    <th>{{'SETTINGS_PREFERENCES.FIELD_HEADER_NUMBER_RECENT_CONNECTIONS' | translate}}</th>
-                    <td><input ng-model="preferences.numberOfRecentConnections" type="number" min="1" max="20"/></td>
-                </tr>
-            </table>
-        </div>
-    </div>
-
     <!-- User attributes section -->
     <div class="attributes" ng-show="canUpdateSelf && attributes.length">
         <guac-form namespace="'USER_ATTRIBUTES'" content="attributes"

guacamole/src/main/frontend/src/images/x-black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g style="fill:#000;fill-opacity:1"><path d="M-203.492 487.824h325.537v71.505h-325.537z" style="fill:#000;stroke:none;fill-opacity:1" transform="rotate(-45 -70.224 18.065)scale(.19138)"/><path d="M-686.345 4.971h325.537v71.505h-325.537z" style="fill:#000;stroke:none;fill-opacity:1" transform="scale(-.19138 .19138)rotate(-45 -192.713 -326.21)"/></g></svg>

guacamole/src/main/frontend/src/translations/en.json

@@ -1075,6 +1075,7 @@
         "FIELD_HEADER_TIMEZONE"                  : "Timezone:",
         "FIELD_HEADER_USERNAME"                  : "Username:",
         
+        "HELP_APPEARANCE"           : "Here you can enable or disable whether the \"Recent Connections\" section is shown on the home screen, and adjust the number of recent connections included.",
         "HELP_DEFAULT_INPUT_METHOD" : "The default input method determines how keyboard events are received by Guacamole. Changing this setting may be necessary when using a mobile device, or when typing through an IME. This setting can be overridden on a per-connection basis within the Guacamole menu.",
         "HELP_DEFAULT_MOUSE_MODE"   : "The default mouse emulation mode determines how the remote mouse will behave in new connections with respect to touches. This setting can be overridden on a per-connection basis within the Guacamole menu.",
         "HELP_INPUT_METHOD_NONE"    : "@:CLIENT.HELP_INPUT_METHOD_NONE",
@@ -1083,7 +1084,6 @@
         "HELP_LOCALE"               : "Options below are related to the locale of the user and will impact how various parts of the interface are displayed.",
         "HELP_MOUSE_MODE_ABSOLUTE"  : "@:CLIENT.HELP_MOUSE_MODE_ABSOLUTE",
         "HELP_MOUSE_MODE_RELATIVE"  : "@:CLIENT.HELP_MOUSE_MODE_RELATIVE",
-        "HELP_RECENT_CONNECTIONS"   : "Here you can enable or disable recent conections in the Guacamole Home Page, and adjust the number of recent connections that will be displayed.",
         "HELP_UPDATE_PASSWORD"      : "If you wish to change your password, enter your current password and the desired new password below, and click \"Update Password\". The change will take effect immediately.",
 
         "INFO_PASSWORD_CHANGED" : "Password changed.",
@@ -1093,9 +1093,9 @@
         "NAME_INPUT_METHOD_OSK"  : "@:CLIENT.NAME_INPUT_METHOD_OSK",
         "NAME_INPUT_METHOD_TEXT" : "@:CLIENT.NAME_INPUT_METHOD_TEXT",
 
+        "SECTION_HEADER_APPEARANCE"           : "Appearance",
         "SECTION_HEADER_DEFAULT_INPUT_METHOD" : "Default Input Method",
         "SECTION_HEADER_DEFAULT_MOUSE_MODE"   : "Default Mouse Emulation Mode",
-        "SECTION_HEADER_RECENT_CONNECTIONS"   : "Recent Connections Preferences",
         "SECTION_HEADER_UPDATE_PASSWORD"      : "Change Password"
 
     },

guacamole/src/main/frontend/src/translations/fr.json

@@ -1045,6 +1045,7 @@
         "FIELD_HEADER_TIMEZONE"                  : "Fuseau horaire:",
         "FIELD_HEADER_USERNAME"                  : "Identifiant:",
 
+        "HELP_APPEARANCE"           : "Vous pouvez ici activer ou désactiver les connexions récentes sur la page d'accueil de Guacamole, et ajuster le nombre de connexions récentes qui seront affichées.",
         "HELP_DEFAULT_INPUT_METHOD" : "La méthode de saisie par défaut détermine comment les événements clavier sont reçus par Guacamole. Modifier ce paramètre peut être nécessaire lors de l'utilisation d'un appareil mobile. Ce paramètre peut être remplacé pour chaque connexion dans le menu de Guacamole.",
         "HELP_DEFAULT_MOUSE_MODE"   : "Le mode d'émulation de la souris par défaut détermine le comportement de la souris distante dans de nouvelles connexions par rapport aux touches. Ce paramètre peut être remplacé pour chaque connexion dans le menu Guacamole.",
         "HELP_INPUT_METHOD_NONE"    : "@:CLIENT.HELP_INPUT_METHOD_NONE",
@@ -1053,7 +1054,6 @@
         "HELP_LOCALE"               : "Les options ci-dessous sont liées à la localisation de l'utilisateur et auront un impact sur l'affichage de différentes parties de l'interface.",
         "HELP_MOUSE_MODE_ABSOLUTE"  : "@:CLIENT.HELP_MOUSE_MODE_ABSOLUTE",
         "HELP_MOUSE_MODE_RELATIVE"  : "@:CLIENT.HELP_MOUSE_MODE_RELATIVE",
-        "HELP_RECENT_CONNECTIONS"   : "Vous pouvez ici activer ou désactiver les connexions récentes sur la page d'accueil de Guacamole, et ajuster le nombre de connexions récentes qui seront affichées.",
         "HELP_UPDATE_PASSWORD"      : "Si vous souhaitez changer votre mot de passe, saisissez votre mot de passe actuel ainsi que le nouveau mot de passe souhaité ci-dessous, puis cliquez sur \"Mettre à jour Mot de passe\". Le changement prendra effet immédiatement.",
 
         "INFO_PASSWORD_CHANGED" : "Mot de passe modifié.",
@@ -1065,7 +1065,6 @@
 
         "SECTION_HEADER_DEFAULT_INPUT_METHOD" : "Méthode de saisie par défaut",
         "SECTION_HEADER_DEFAULT_MOUSE_MODE"   : "Mode d'émulation de la souris par défaut",
-        "SECTION_HEADER_RECENT_CONNECTIONS"   : "Préférences des connexions récentes",
         "SECTION_HEADER_UPDATE_PASSWORD"      : "Modifier Mot de passe"
 
     },