From 99e02b4166c8798d08eda1927c20ad5bfd5e4f5a Mon Sep 17 00:00:00 2001
From: James Muehlner <james.muehlner@guac-dev.org>
Date: Mon, 15 Jan 2024 23:44:00 +0000
Subject: [PATCH] WIP: Allow the extension to do its own rendering of fields
 outside the menu if needed.

---
 .../client/controllers/clientController.js    | 25 ++++++++++++++++---
 .../app/client/directives/guacTiledClients.js |  5 ++++
 .../frontend/src/app/client/styles/menu.css   | 14 +++++------
 .../src/app/client/templates/client.html      |  2 +-
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/guacamole/src/main/frontend/src/app/client/controllers/clientController.js b/guacamole/src/main/frontend/src/app/client/controllers/clientController.js
index 29860f23c..3517f2d5f 100644
--- a/guacamole/src/main/frontend/src/app/client/controllers/clientController.js
+++ b/guacamole/src/main/frontend/src/app/client/controllers/clientController.js
@@ -498,17 +498,34 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
         $scope.menu.connectionParameters = newFocusedClient ?
             ManagedClient.getArgumentModel(newFocusedClient) : {};
 
+        // Re-broadcast the updated client
+        $scope.$broadcast('guacClientChanged', newFocusedClient);
+
+    });
+
+    // Track when the protocol changes for the current client - generally
+    // this will be when the protocol is first set for the client
+    $scope.$on('guacClientProtocolUpdated', function protocolChanged(event, focusedClient) {
+
+        // Ignore any updated protocol not for the current focused client
+        if ($scope.focusedClient && $scope.focusedClient === focusedClient)
+
+            // Re-broadcast the updated protocol
+            $scope.$broadcast('guacClientProtocolChanged', focusedClient);
     });
 
     // Automatically update connection parameters that have been modified
     // for the current focused client
-    $scope.$on('guacClientArgumentsUpdated', function focusedClientChanged(event, focusedClient) {
+    $scope.$on('guacClientArgumentsUpdated', function argumentsChanged(event, focusedClient) {
 
-        // Update available connection parameters, if the updated arguments are
-        // for the current focused client - otherwise ignore them
-        if ($scope.focusedClient && $scope.focusedClient === focusedClient)
+        // Ignore any updated arguments not for the current focused client
+        if ($scope.focusedClient && $scope.focusedClient === focusedClient) {
             $scope.menu.connectionParameters = ManagedClient.getArgumentModel(focusedClient);
 
+            // Re-broadcast the updated arguments
+            $scope.$broadcast('guacClientArgumentsChanged', focusedClient);
+        }
+
     });
 
     // Update page icon when thumbnail changes
diff --git a/guacamole/src/main/frontend/src/app/client/directives/guacTiledClients.js b/guacamole/src/main/frontend/src/app/client/directives/guacTiledClients.js
index e43c2603f..3aa60ac74 100644
--- a/guacamole/src/main/frontend/src/app/client/directives/guacTiledClients.js
+++ b/guacamole/src/main/frontend/src/app/client/directives/guacTiledClients.js
@@ -97,6 +97,11 @@ angular.module('client').directive('guacTiledClients', [function guacTiledClient
             $scope.$emit('guacClientArgumentsUpdated', $scope.getFocusedClient());
         }, true);
 
+        // Notify whenever protocol of currently-focused client changes
+        $scope.$watch('getFocusedClient().protocol', function focusedClientParametersChanged() {
+            $scope.$emit('guacClientProtocolUpdated', $scope.getFocusedClient());
+        }, true);
+
         /**
          * Returns a callback for guacClick that assigns or updates keyboard
          * focus to the given client, allowing that client to receive and
diff --git a/guacamole/src/main/frontend/src/app/client/styles/menu.css b/guacamole/src/main/frontend/src/app/client/styles/menu.css
index 81552b168..b5742ab5d 100644
--- a/guacamole/src/main/frontend/src/app/client/styles/menu.css
+++ b/guacamole/src/main/frontend/src/app/client/styles/menu.css
@@ -27,11 +27,11 @@
     background: #EEE;
     box-shadow: inset -1px 0 2px white, 1px 0 2px black;
     z-index: 100;
-    -webkit-transition: left 0.125s;
-    -moz-transition: left 0.125s;
-    -ms-transition: left 0.125s;
-    -o-transition: left 0.125s;
-    transition: left 0.125s;
+    -webkit-transition: left 0.125s, opacity 0.125s;
+    -moz-transition: left 0.125s, opacity 0.125s;
+    -ms-transition: left 0.125s, opacity 0.125s;
+    -o-transition: left 0.125s, opacity 0.125s;
+    transition: left 0.125s, opacity 0.125s;
 }
 
 .menu-content {
@@ -137,10 +137,10 @@
 .menu,
 .menu.closed {
     left: -480px;
-    visibility: hidden;
+    opacity: 0;
 }
 
 .menu.open {
     left: 0px;
-    visibility: visible;
+    opacity: 1;
 }
diff --git a/guacamole/src/main/frontend/src/app/client/templates/client.html b/guacamole/src/main/frontend/src/app/client/templates/client.html
index 943e59953..66dca3a77 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/client.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/client.html
@@ -47,7 +47,7 @@
     
     <!-- Menu -->
     <div class="menu" ng-class="{open: menu.shown}" id="guac-menu">
-        <div class="menu-content" guac-touch-drag="menuDrag">
+        <div class="menu-content" ng-if="menu.shown" guac-touch-drag="menuDrag">
 
             <!-- Stationary header -->
             <div class="header">