diff --git a/guacamole/src/main/frontend/src/app/client/directives/guacThumbnail.js b/guacamole/src/main/frontend/src/app/client/directives/guacThumbnail.js index 86816759b..3b518e7df 100644 --- a/guacamole/src/main/frontend/src/app/client/directives/guacThumbnail.js +++ b/guacamole/src/main/frontend/src/app/client/directives/guacThumbnail.js @@ -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); - }); }] diff --git a/guacamole/src/main/frontend/src/app/client/directives/guacTiledThumbnails.js b/guacamole/src/main/frontend/src/app/client/directives/guacTiledThumbnails.js index 0c3916c48..6436f0603 100644 --- a/guacamole/src/main/frontend/src/app/client/directives/guacTiledThumbnails.js +++ b/guacamole/src/main/frontend/src/app/client/directives/guacTiledThumbnails.js @@ -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; }]; diff --git a/guacamole/src/main/frontend/src/app/client/styles/thumbnail-display.css b/guacamole/src/main/frontend/src/app/client/styles/thumbnail-display.css index c9c9c4f6c..468c51aca 100644 --- a/guacamole/src/main/frontend/src/app/client/styles/thumbnail-display.css +++ b/guacamole/src/main/frontend/src/app/client/styles/thumbnail-display.css @@ -25,11 +25,6 @@ div.thumbnail-main { font-size: 0px; } -.thumbnail-main img { - max-width: 100%; -} - .thumbnail-main .display { - position: absolute; pointer-events: none; } \ No newline at end of file diff --git a/guacamole/src/main/frontend/src/app/client/templates/guacThumbnail.html b/guacamole/src/main/frontend/src/app/client/templates/guacThumbnail.html index e0af90495..931016eee 100644 --- a/guacamole/src/main/frontend/src/app/client/templates/guacThumbnail.html +++ b/guacamole/src/main/frontend/src/app/client/templates/guacThumbnail.html @@ -1,10 +1,11 @@
-
+
+
+
+
+
- - -
\ No newline at end of file diff --git a/guacamole/src/main/frontend/src/app/client/templates/guacTiledThumbnails.html b/guacamole/src/main/frontend/src/app/client/templates/guacTiledThumbnails.html index e1b0ef336..010899c90 100644 --- a/guacamole/src/main/frontend/src/app/client/templates/guacTiledThumbnails.html +++ b/guacamole/src/main/frontend/src/app/client/templates/guacTiledThumbnails.html @@ -1,7 +1,14 @@ - \ No newline at end of file +
+
+
+ +
+ +
+ +
+
+
diff --git a/guacamole/src/main/frontend/src/app/index/styles/other-connections.css b/guacamole/src/main/frontend/src/app/index/styles/other-connections.css index 6213dff5b..3fc8ff384 100644 --- a/guacamole/src/main/frontend/src/app/index/styles/other-connections.css +++ b/guacamole/src/main/frontend/src/app/index/styles/other-connections.css @@ -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;