GUACAMOLE-723: Persist client panel state across navigation.

guacamole/src/main/webapp/app/client/directives/guacClientPanel.js

@@ -22,7 +22,20 @@
  * panel is fixed to the bottom-right corner of its container and can be
  * manually hidden/exposed by the user.
  */
-angular.module('client').directive('guacClientPanel', [function guacClientPanel() {
+angular.module('client').directive('guacClientPanel', ['$injector', function guacClientPanel($injector) {
+
+    var sessionStorageFactory = $injector.get('sessionStorageFactory');
+
+    /**
+     * Getter/setter for the boolean flag controlling whether the client panel
+     * is currently hidden. This flag is maintained in session-local storage to
+     * allow the state of the panel to persist despite navigation within the
+     * same tab. When hidden, the panel will be collapsed against the right
+     * side of the container. By default, the panel is visible.
+     *
+     * @type Function
+     */
+    var panelHidden = sessionStorageFactory.create(false);
 
     return {
         // Element only
@@ -34,7 +47,7 @@ angular.module('client').directive('guacClientPanel', [function guacClientPanel(
              * The ManagedClient instances associated with the active
              * connections to be displayed within this panel.
              * 
-             * @type ManagedClient[]
+             * @type ManagedClient[]|Object.<String, ManagedClient>
              */
             clients : '='
             
@@ -51,19 +64,28 @@ angular.module('client').directive('guacClientPanel', [function guacClientPanel(
             var scrollableArea = $element.find('.client-panel-connection-list')[0];
 
             /**
-             * Whether the client panel is currently hidden. When hidden, the
+             * On-scope reference to session-local storage of the flag
-             * panel will be collapsed against the right side of the
+             * controlling whether then panel is hidden.
-             * containiner.
-             *
-             * @type Boolean
              */
-            $scope.panelHidden = false;
+            $scope.panelHidden = panelHidden;
+
+            /**
+             * Returns whether this panel currently has any clients associated
+             * with it.
+             *
+             * @return {Boolean}
+             *     true if at least one client is associated with this panel,
+             *     false otherwise.
+             */
+            $scope.hasClients = function hasClients() {
+                return !_.isEmpty($scope.clients);
+            };
 
             /**
              * Toggles whether the client panel is currently hidden.
              */
             $scope.togglePanel = function togglePanel() {
-                $scope.panelHidden = !$scope.panelHidden;
+                panelHidden(!panelHidden());
             };
 
             // Override vertical scrolling, scrolling horizontally instead

guacamole/src/main/webapp/app/client/styles/other-connections.css

@@ -26,6 +26,7 @@
 
 #other-connections .client-panel {
 
+    display: none;
     position: absolute;
     right: 0;
     bottom: 0;
@@ -38,6 +39,10 @@
 
 }
 
+#other-connections .client-panel.has-clients {
+    display: block;
+}
+
 #other-connections .client-panel.hidden {
     max-width: 16px;
 }

guacamole/src/main/webapp/app/client/templates/guacClientPanel.html

@@ -1,5 +1,10 @@
-<div class="client-panel" ng-class="{ 'hidden' : panelHidden }">
+<div class="client-panel"
+     ng-class="{ 'has-clients': hasClients(), 'hidden' : panelHidden() }">
+
+    <!-- Toggle panel visibility -->
     <div class="client-panel-handle" ng-click="togglePanel()"></div>
+
+    <!-- List of connection thumbnails -->
     <ul class="client-panel-connection-list">
         <li ng-repeat="client in clients" class="client-panel-connection">
             <a href="#/client/{{client.id}}">
@@ -10,4 +15,5 @@
             </a>
         </li>
     </ul>
+
 </div>