safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUACAMOLE-724: Leverage DOM rather than CSS to show/hide connection tile headers.

Browse Source 
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.
This commit is contained in:
Michael Jumper
2021-07-03 16:34:14 -07:00
parent 8c0af308da
commit e58005ae23
2 changed files with 5 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
guacamole/src/main/frontend/src/app/client/styles/tiled-client-grid.css
View File

@@ -80,19 +80,6 @@
padding: 0 0.25em; padding: 0 0.25em;
font-size: 0.8em; font-size: 0.8em;
color: white; 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 { .tiled-client-grid .client-tile.focused .client-tile-name {

10
guacamole/src/main/frontend/src/app/client/templates/guacTiledClients.html
View File

@@ -1,6 +1,4 @@
<div class="tiled-client-grid" <div class="tiled-client-grid">
ng-class="{ 'multiple-clients' : hasMultipleClients(clientGroup) }">
<div class="tiled-client-row" ng-repeat="clientRow in getClientGrid(clientGroup)"> <div class="tiled-client-row" ng-repeat="clientRow in getClientGrid(clientGroup)">
<div class="tiled-client-cell" ng-repeat="client in clientRow"> <div class="tiled-client-cell" ng-repeat="client in clientRow">
@@ -10,7 +8,10 @@
'shared' : isShared(client) 'shared' : isShared(client)
}" }"
guac-click="getFocusAssignmentCallback(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> <guac-client client="client" emulate-absolute-mouse="emulateAbsoluteMouse"></guac-client>
<!-- Client-specific status/error dialog --> <!-- Client-specific status/error dialog -->
@@ -19,5 +20,4 @@
</div> </div>
</div> </div>
</div> </div>