GUACAMOLE-724: Correct rendering of tiled clients on IE10+ by migrating to grid layout.

guacamole/src/main/frontend/src/app/client/directives/guacTiledClients.js

@@ -150,26 +150,9 @@ angular.module('client').directive('guacTiledClients', [function guacTiledClient
         $scope.hasMultipleClients = ManagedClientGroup.hasMultipleClients;
 
         /**
-         * 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.
+         * @borrows ManagedClientGroup.getTileGridCSS
          */
-        $scope.getTileWidth = function getTileWidth() {
-            return Math.floor(100 / $scope.clientGroup.columns) + '%';
-        };
-
-        /**
-         * 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.
-         */
-        $scope.getTileHeight = function getTileHeight() {
-            return Math.floor(100 / $scope.clientGroup.rows) + '%';
-        };
+        $scope.getTileGridCSS = ManagedClientGroup.getTileGridCSS;
 
         /**
          * Returns whether the given ManagedClient has any associated share

guacamole/src/main/frontend/src/app/client/styles/tiled-client-list.css

@@ -25,7 +25,14 @@
 
 .tiled-client-list li.client-tile {
     position: relative;
-    display: inline-flex;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
     flex-direction: column;
     line-height: 1.5;
 }
@@ -56,6 +63,9 @@
 }
 
 .tiled-client-list li.client-tile .main {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
     flex: 1;
 }
 

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

@@ -1,12 +1,14 @@
-<ul class="tiled-client-list" ng-class="{  'multiple-clients' : hasMultipleClients(clientGroup) }">
+<ul class="tiled-client-list"
+    ng-class="{  'multiple-clients' : hasMultipleClients(clientGroup) }"
+    ng-attr-style="{{ getTileGridCSS(clientGroup) }}">
 
     <li class="client-tile"
         ng-repeat="client in clientGroup.clients"
-        ng-style="{ 'width' : getTileWidth(), 'height' : getTileHeight() }"
         ng-class="{
             'focused' : client.clientProperties.focused,
             'shared'  : isShared(client)
         }"
+        ng-attr-style="{{ getTileGridCSS(clientGroup, $index) }}"
         guac-click="getFocusAssignmentCallback(client)">
 
         <h3 class="client-tile-name"><img class="client-tile-shared-indicator" src="images/share-white.svg"> {{ client.title }}</h3>

guacamole/src/main/frontend/src/app/client/types/ManagedClientGroup.js

@@ -281,6 +281,51 @@ angular.module('client').factory('ManagedClientGroup', ['$injector', function de
         return group && group.clients.length > 1;
     };
 
+    /**
+     * Returns the CSS that should used to achieve a proper grid arrangement
+     * of the client tiles represented by the given ManagedClientGroup. The
+     * CSS should be assigned to the element displaying the given
+     * ManagedClientGroup or, if an index is provided, the element representing
+     * the client having the given index within the group.
+     *
+     * NOTE: Much of this is unnecessary if support for IE is dropped. When
+     * that is eventually unavoidable (migration to Angular), this can be
+     * simplified.
+     *
+     * @param {ManagedClientGroup} group
+     *     The ManagedClientGroup to determine CSS for.
+     *
+     * @param {number} [index]
+     *     The index of the relevant client within the group, if not producing
+     *     CSS for the group itself.
+     *
+     * @returns {string}
+     *     The CSS that should be assigned to the element representing the
+     *     given group or, if an index is provided, the CSS that should be
+     *     assigned to the element representing the client having the given
+     *     index within the group.
+     */
+    ManagedClientGroup.getTileGridCSS = function getTileGridCSS(group, index) {
+
+        // Produce CSS defining a regular grid if no specific client is
+        // requested
+        if (arguments.length <= 1)
+            return 'display: -ms-grid;'
+                 + 'display: grid;'
+                 + '-ms-grid-rows: (1fr)[' + group.rows + '];'
+                 + 'grid-template-rows: repeat(' + group.rows + ', 1fr);'
+                 + '-ms-grid-columns: (1fr)[' + group.columns + '];'
+                 + 'grid-template-columns: repeat(' + group.columns + ', 1fr);';
+
+        // For IE10+, the row/column coordinates of each child of a grid
+        // layout must be explicitly defined
+        var row = Math.floor(index / group.columns);
+        var column = index - row * group.columns;
+        return '-ms-grid-row: ' + (row + 1) + ';'
+             + '-ms-grid-column: ' + (column + 1) + ';';
+
+    };
+
     return ManagedClientGroup;
 
 }]);