From e58005ae237284da07fbb716a9b79bcdb1b6098e Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Sat, 3 Jul 2021 16:34:14 -0700
Subject: [PATCH] GUACAMOLE-724: Leverage DOM rather than CSS to show/hide
 connection tile headers.

CSS, though clean, results in delays in element size changes. When
switching between a view that has tile headers and a view that does
not, this manifests as visible "popping" as client displays are
initially sized to fit the area without the header followed by the area
with the header. Leveraging AngularJS directly ensures that such
changes occur in lockstep with the connection process.
---
 .../src/app/client/styles/tiled-client-grid.css     | 13 -------------
 .../src/app/client/templates/guacTiledClients.html  | 10 +++++-----
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/guacamole/src/main/frontend/src/app/client/styles/tiled-client-grid.css b/guacamole/src/main/frontend/src/app/client/styles/tiled-client-grid.css
index 06bcaf62a..b7d044fb2 100644
--- a/guacamole/src/main/frontend/src/app/client/styles/tiled-client-grid.css
+++ b/guacamole/src/main/frontend/src/app/client/styles/tiled-client-grid.css
@@ -80,19 +80,6 @@
     padding: 0 0.25em;
     font-size: 0.8em;
     color: white;
-    display: none;
-}
-
-.tiled-client-grid.multiple-clients .client-tile .client-tile-name {
-    display: block;
-}
-
-.tiled-client-grid.multiple-clients .client-tile {
-    border: 1px solid #444;
-}
-
-.tiled-client-grid .client-tile.focused {
-    border-color: #3161a9;
 }
 
 .tiled-client-grid .client-tile.focused .client-tile-name {
diff --git a/guacamole/src/main/frontend/src/app/client/templates/guacTiledClients.html b/guacamole/src/main/frontend/src/app/client/templates/guacTiledClients.html
index 3f79153f7..619fdb062 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/guacTiledClients.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/guacTiledClients.html
@@ -1,6 +1,4 @@
-<div class="tiled-client-grid"
-    ng-class="{  'multiple-clients' : hasMultipleClients(clientGroup) }">
-
+<div class="tiled-client-grid">
     <div class="tiled-client-row" ng-repeat="clientRow in getClientGrid(clientGroup)">
         <div class="tiled-client-cell" ng-repeat="client in clientRow">
 
@@ -10,7 +8,10 @@
                     'shared'  : isShared(client)
                 }"
                 guac-click="getFocusAssignmentCallback(client)">
-                <h3 class="client-tile-name"><img class="client-tile-shared-indicator" src="images/share-white.svg"> {{ client.title }}</h3>
+                <h3 class="client-tile-name" ng-if="hasMultipleClients(clientGroup)">
+                    <img class="client-tile-shared-indicator" src="images/share-white.svg">
+                    {{ client.title }}
+                </h3>
                 <guac-client client="client" emulate-absolute-mouse="emulateAbsoluteMouse"></guac-client>
 
                 <!-- Client-specific status/error dialog -->
@@ -19,5 +20,4 @@
 
         </div>
     </div>
-
 </div>