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

GUACAMOLE-724: Migrate tiled thumbnail rendering to same flex layout as client view.

Browse Source
This commit is contained in:
Michael Jumper
2021-07-03 14:58:42 -07:00
parent 1f2007eb28
commit c9900434c4
6 changed files with 41 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
guacamole/src/main/frontend/src/app/client/directives/guacThumbnail.js
View File

@@ -43,20 +43,6 @@ angular.module('client').directive('guacThumbnail', [function guacThumbnail() {
// Required services
var $window = $injector.get('$window');
/**
* The optimal thumbnail width, in pixels.
*
* @type Number
*/
var THUMBNAIL_WIDTH = 320;
/**
* The optimal thumbnail height, in pixels.
*
* @type Number
*/
var THUMBNAIL_HEIGHT = 240;
/**
* The display of the current Guacamole client instance.
*
@@ -126,32 +112,7 @@ angular.module('client').directive('guacThumbnail', [function guacThumbnail() {
// Update scale when display is resized
$scope.$watch('client.managedDisplay.size', function setDisplaySize(size) {
var width;
var height;
// If no display size yet, assume optimal thumbnail size
if (!size || size.width === 0 || size.height === 0) {
width = THUMBNAIL_WIDTH;
height = THUMBNAIL_HEIGHT;
}
// Otherwise, generate size that fits within thumbnail bounds
else {
var scale = Math.min(THUMBNAIL_WIDTH / size.width, THUMBNAIL_HEIGHT / size.height, 1);
width = size.width * scale;
height = size.height * scale;
}
// Generate dummy background image
var thumbnail = document.createElement("canvas");
thumbnail.width = width;
thumbnail.height = height;
$scope.thumbnail = thumbnail.toDataURL("image/png");
// Init display scale
$scope.$evalAsync($scope.updateDisplayScale);
});
}]

40
guacamole/src/main/frontend/src/app/client/directives/guacTiledThumbnails.js
View File

@@ -44,27 +44,31 @@ angular.module('client').directive('guacTiledThumbnails', [function guacTiledThu
directive.controller = ['$scope', '$injector', '$element',
function guacTiledThumbnailsController($scope, $injector, $element) {
/**
* Returns the CSS width that should be applied to each tile to
* achieve an even arrangement.
*
* @returns {String}
* The CSS width that should be applied to each tile.
*/
$scope.getTileWidth = function getTileWidth() {
return Math.floor(100 / $scope.clientGroup.columns) + '%';
};
// Required types
var ManagedClientGroup = $injector.get('ManagedClientGroup');
/**
* Returns the CSS height that should be applied to each tile to
* achieve an even arrangement.
*
* @returns {String}
* The CSS height that should be applied to each tile.
* The overall height of the thumbnail view of the tiled grid of
* clients within the client group, in pixels. This value is
* intentionally based off a snapshot of the current browser size at
* the time the directive comes into existence to ensure the contents
* of the thumbnail are familiar in appearance and aspect ratio.
*/
$scope.getTileHeight = function getTileHeight() {
return Math.floor(100 / $scope.clientGroup.rows) + '%';
};
$scope.height = Math.min(window.innerHeight, 128);
/**
* The overall width of the thumbnail view of the tiled grid of
* clients within the client group, in pixels. This value is
* intentionally based off a snapshot of the current browser size at
* the time the directive comes into existence to ensure the contents
* of the thumbnail are familiar in appearance and aspect ratio.
*/
$scope.width = window.innerWidth / window.innerHeight * $scope.height;
/**
* @borrows ManagedClientGroup.getClientGrid
*/
$scope.getClientGrid = ManagedClientGroup.getClientGrid;
}];

5
guacamole/src/main/frontend/src/app/client/styles/thumbnail-display.css
View File

@@ -25,11 +25,6 @@ div.thumbnail-main {
font-size: 0px;
}
.thumbnail-main img {
max-width: 100%;
}
.thumbnail-main .display {
position: absolute;
pointer-events: none;
}

7
guacamole/src/main/frontend/src/app/client/templates/guacThumbnail.html
View File

@@ -1,10 +1,11 @@
<div class="thumbnail-main" guac-resize="updateDisplayScale">
<!-- Display -->
<div class="displayOuter">
<div class="displayMiddle">
<div class="display">
</div>
<!-- Dummy background thumbnail -->
<img alt="" ng-src="{{thumbnail}}">
</div>
</div>
</div>

19
guacamole/src/main/frontend/src/app/client/templates/guacTiledThumbnails.html
View File

@@ -1,7 +1,14 @@
<ul class="tiled-client-list">
<li class="client-tile"
ng-repeat="client in clientGroup.clients"
ng-style="{ 'width' : getTileWidth(), 'height' : getTileHeight() }">
<div class="tiled-client-grid" ng-style="{
'width' : width + 'px',
'height' : height + 'px',
}">
<div class="tiled-client-row" ng-repeat="clientRow in getClientGrid(clientGroup)">
<div class="tiled-client-cell" ng-repeat="client in clientRow">
<div class="client-tile" ng-if="client">
<guac-thumbnail client="client"></guac-thumbnail>
</li>
</ul>
</div>
</div>
</div>
</div>

5
guacamole/src/main/frontend/src/app/index/styles/other-connections.css
View File

@@ -102,11 +102,6 @@
}
#other-connections .client-panel-connection .thumbnail-main img {
max-width: none;
max-height: 128px;
}
#other-connections .client-panel-connection a[href]::before {
display: block;