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

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);
-
             });
 
         }]

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

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;
 }

guacamole/src/main/frontend/src/app/client/templates/guacThumbnail.html

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

guacamole/src/main/frontend/src/app/client/templates/guacTiledThumbnails.html

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

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;