Merge pull request #87 from glyptodon/ie10-compat

GUAC-1052: Make compatible with IE10 and ancient Firefox by pulling teeth.

guacamole/src/main/webapp/app/client/styles/client.css

@@ -38,21 +38,83 @@ body.client {
 }
 
 .client-view {
-    display: table;
+
     position: absolute;
     top: 0;
     left: 0;
+
     width: 100%;
     height: 100%;
+
+    font-size: 0px;
+
+}
+
+.client-view-content {
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: stretch;
+    -ms-flex-direction: column;
+    -ms-flex-pack: end;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: stretch;
+    -moz-box-orient: vertical;
+    -moz-box-pack: end;
+    
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: stretch;
+    -webkit-box-orient: vertical;
+    -webkit-box-pack: end;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: stretch;
+    -webkit-flex-direction: column;
+    -webkit-flex-pack: end;
+
+    /* W3C */
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    flex-pack: end;
+
+    width: 100%;
+    height: 100%;
+
+    font-size: 12pt;
+
 }
 
 .client-view .client-body {
-    display: table-row;
+    -ms-flex: 1 1 auto;
-    width: 100%;
+    -moz-box-flex: 1;
-    height: 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+    position: relative;
 }
 
 .client-view .client-bottom {
-    display: table-row;
+    -ms-flex: 0 0 auto;
-    height: 0;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
 }
+
+.client-view .client-body .main {
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    width: auto;
+    height: auto;
+
+}

guacamole/src/main/webapp/app/client/styles/menu.css

@@ -38,52 +38,204 @@
 }
 
 .menu-content {
-    overflow: hidden;
+
-    display: table;
+    /* IE10 */
-    table-layout: fixed;
+    display: -ms-flexbox;
+    -ms-flex-align: stretch;
+    -ms-flex-direction: column;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: stretch;
+    -moz-box-orient: vertical;
+    
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: stretch;
+    -webkit-box-orient: vertical;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: stretch;
+    -webkit-flex-direction: column;
+
+    /* W3C */
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    
     width: 100%;
     height: 100%;
+
 }
 
 .menu-header {
-    display: table-row;
+
-    height: 0;
+    -ms-flex: 0 0 auto;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: center;
+    -ms-flex-direction: row;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: center;
+    -moz-box-orient: horizontal;
+    
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: center;
+    -webkit-box-orient: horizontal;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-flex-direction: row;
+
+    /* W3C */
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    padding: 0.75em 0.5em;
+
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
+    background: rgba(0, 0, 0, 0.04);
+
 }
 
-.menu-header h2 {
+.menu-header > * {
-    margin-bottom: 0;
+    -ms-flex: 0 0 auto;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+}
+
+.menu-header > h2 {
+
+    -ms-flex: 1 1 auto;
+    -moz-box-flex: 1;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    background: none;
+    margin: 0;
+
 }
 
 .menu-body {
-    display: table-row;
-    height: 100%;
-}
 
-.menu-body-content {
+    -ms-flex: 1 1 auto;
-    position: relative;
+    -moz-box-flex: 1;
-    width: 100%;
+    -webkit-box-flex: 1;
-    height: 100%;
+    -webkit-flex: 1 1 auto;
-}
+    flex: 1 1 auto;
 
-.menu-body-scroll-region {
+    padding: 1em;
     overflow: auto;
-    position: absolute;
+
-    top: 0;
+    /* IE10 */
-    left: 0;
+    display: -ms-flexbox;
-    bottom: 0;
+    -ms-flex-align: stretch;
-    right: 0;
+    -ms-flex-direction: column;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: stretch;
+    -moz-box-orient: vertical;
+    
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: stretch;
+    -webkit-box-orient: vertical;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: stretch;
+    -webkit-flex-direction: column;
+
+    /* W3C */
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+
+}
+
+.menu-body > * {
+    -ms-flex: 0 0 auto;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
 }
 
 #menu h3 {
-    margin: 1em;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 1em;
 }
 
 #menu .content {
-    margin: 1em;
+
+    padding: 0;
+    margin: 0;
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: stretch;
+    -ms-flex-direction: column;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: stretch;
+    -moz-box-orient: vertical;
+    
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: stretch;
+    -webkit-box-orient: vertical;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: stretch;
+    -webkit-flex-direction: column;
+
+    /* W3C */
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+
+}
+
+#menu .content + h3 {
+    padding-top: 1em;
 }
 
 #menu .content > * {
-    margin: 1em 0;
+
+    margin: 0;
+
+    -ms-flex: 0 0 auto;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+
+}
+
+#menu .content > * + * {
+    margin-top: 1em;
 }
 
 #menu,
@@ -116,7 +268,6 @@
 #menu #mouse-settings .choice .figure {
     display: inline-block;
     vertical-align: middle;
-    max-width: 80%;
 }
 
 #menu #keyboard-settings .caption {
@@ -132,7 +283,8 @@
 
 #menu #mouse-settings .figure img {
     display: block;
-    max-width: 100%;
+    width: 75%;
+    max-width: 320px;
     margin: 1em auto;
 }
 

guacamole/src/main/webapp/app/client/templates/client.html

@@ -24,30 +24,32 @@
 
     <!-- Client view -->
     <div class="client-view">
+        <div class="client-view-content">
 
-        <!-- Central portion of view -->
+            <!-- Central portion of view -->
-        <div class="client-body" guac-touch-drag="clientDrag" guac-touch-pinch="clientPinch">
+            <div class="client-body" guac-touch-drag="clientDrag" guac-touch-pinch="clientPinch">
 
-            <!-- Client -->
+                <!-- Client -->
-            <guac-client client="client"/></guac-client>
+                <guac-client client="client"></guac-client>
 
-        </div>
-
-        <!-- Bottom portion of view -->
-        <div class="client-bottom">
-
-            <!-- Text input -->
-            <div class="text-input-container" ng-show="showTextInput">
-                <guac-text-input needs-focus="showTextInput"></guac-text-input>
             </div>
 
-            <!-- On-screen keyboard -->
+            <!-- Bottom portion of view -->
-            <div class="keyboard-container" ng-show="showOSK">
+            <div class="client-bottom">
-                <guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"></guac-osk>
+
+                <!-- Text input -->
+                <div class="text-input-container" ng-show="showTextInput">
+                    <guac-text-input needs-focus="showTextInput"></guac-text-input>
+                </div>
+
+                <!-- On-screen keyboard -->
+                <div class="keyboard-container" ng-show="showOSK">
+                    <guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"></guac-osk>
+                </div>
+
             </div>
 
         </div>
-
     </div>
 
     <!-- Menu -->
@@ -56,94 +58,88 @@
 
             <!-- Stationary header -->
             <div class="menu-header">
-                <div class="logout-panel">
-                    <a class="home button" href="#/">{{'CLIENT.ACTION_NAVIGATE_HOME' | translate}}</a>
-                    <a class="disconnect danger button" ng-click="disconnect()">{{'CLIENT.ACTION_DISCONNECT' | translate}}</a>
-                </div>
                 <h2>{{client.name}}</h2>
+                <a class="home button" href="#/">{{'CLIENT.ACTION_NAVIGATE_HOME' | translate}}</a>
+                <a class="disconnect danger button" ng-click="disconnect()">{{'CLIENT.ACTION_DISCONNECT' | translate}}</a>
             </div>
 
             <!-- Scrollable body -->
-            <div class="menu-body">
+            <div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
-                <div class="menu-body-content">
-                    <div class="menu-body-scroll-region" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
 
-                        <!-- Clipboard -->
+                <!-- Clipboard -->
-                        <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
+                <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
-                        <div class="content" id="clipboard-settings">
+                <div class="content" id="clipboard-settings">
-                            <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
+                    <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
-                            <textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
+                    <textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
-                        </div>
-
-                        <!-- File transfers -->
-                        <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
-                        <div class="content" id="file-transfers">
-                            <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
-                        </div>
-
-                        <!-- Input method -->
-                        <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
-                        <div class="content" id="keyboard-settings">
-
-                            <!-- No IME -->
-                            <div class="choice">
-                                <label><input id="ime-none" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="none"/> {{'CLIENT.NAME_INPUT_METHOD_NONE' | translate}}</label>
-                                <p class="caption"><label for="ime-none">{{'CLIENT.HELP_INPUT_METHOD_NONE' | translate}}</label></p>
-                            </div>
-
-                            <!-- Text input -->
-                            <div class="choice">
-                                <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
-                                <label><input id="ime-text" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="text"/> {{'CLIENT.NAME_INPUT_METHOD_TEXT' | translate}}</label>
-                                <p class="caption"><label for="ime-text">{{'CLIENT.HELP_INPUT_METHOD_TEXT' | translate}} </label></p>
-                            </div>
-
-                            <!-- Guac OSK -->
-                            <div class="choice">
-                                <label><input id="ime-osk" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="osk"/> {{'CLIENT.NAME_INPUT_METHOD_OSK' | translate}}</label>
-                                <p class="caption"><label for="ime-osk">{{'CLIENT.HELP_INPUT_METHOD_OSK' | translate}}</label></p>
-                            </div>
-
-                        </div>
-
-                        <!-- Mouse mode -->
-                        <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
-                        <div class="content" id="mouse-settings">
-                            <p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
-
-                            <!-- Touchscreen -->
-                            <div class="choice">
-                                <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
-                                <div class="figure">
-                                    <label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'CLIENT.NAME_MOUSE_MODE_ABSOLUTE' | translate}}"/></label>
-                                    <p class="caption"><label for="absolute">{{'CLIENT.HELP_MOUSE_MODE_ABSOLUTE' | translate}}</label></p>
-                                </div>
-                            </div>
-
-                            <!-- Touchpad -->
-                            <div class="choice">
-                                <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
-                                <div class="figure">
-                                    <label for="relative"><img src="images/settings/touchpad.png" alt="{{'CLIENT.NAME_MOUSE_MODE_RELATIVE' | translate}}"/></label>
-                                    <p class="caption"><label for="relative">{{'CLIENT.HELP_MOUSE_MODE_RELATIVE' | translate}}</label></p>
-                                </div>
-                            </div>
-
-                        </div>
-
-                        <!-- Display options -->
-                        <h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
-                        <div class="content">
-                            <div id="zoom-settings">
-                                <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
-                                <div id="zoom-state">{{formattedScale()}}%</div>
-                                <div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
-                            </div>
-                            <div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
-                        </div>
-
-                    </div>
                 </div>
+
+                <!-- File transfers -->
+                <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
+                <div class="content" id="file-transfers">
+                    <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
+                </div>
+
+                <!-- Input method -->
+                <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
+                <div class="content" id="keyboard-settings">
+
+                    <!-- No IME -->
+                    <div class="choice">
+                        <label><input id="ime-none" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="none"/> {{'CLIENT.NAME_INPUT_METHOD_NONE' | translate}}</label>
+                        <p class="caption"><label for="ime-none">{{'CLIENT.HELP_INPUT_METHOD_NONE' | translate}}</label></p>
+                    </div>
+
+                    <!-- Text input -->
+                    <div class="choice">
+                        <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
+                        <label><input id="ime-text" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="text"/> {{'CLIENT.NAME_INPUT_METHOD_TEXT' | translate}}</label>
+                        <p class="caption"><label for="ime-text">{{'CLIENT.HELP_INPUT_METHOD_TEXT' | translate}} </label></p>
+                    </div>
+
+                    <!-- Guac OSK -->
+                    <div class="choice">
+                        <label><input id="ime-osk" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="osk"/> {{'CLIENT.NAME_INPUT_METHOD_OSK' | translate}}</label>
+                        <p class="caption"><label for="ime-osk">{{'CLIENT.HELP_INPUT_METHOD_OSK' | translate}}</label></p>
+                    </div>
+
+                </div>
+
+                <!-- Mouse mode -->
+                <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
+                <div class="content" id="mouse-settings">
+                    <p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
+
+                    <!-- Touchscreen -->
+                    <div class="choice">
+                        <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
+                        <div class="figure">
+                            <label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'CLIENT.NAME_MOUSE_MODE_ABSOLUTE' | translate}}"/></label>
+                            <p class="caption"><label for="absolute">{{'CLIENT.HELP_MOUSE_MODE_ABSOLUTE' | translate}}</label></p>
+                        </div>
+                    </div>
+
+                    <!-- Touchpad -->
+                    <div class="choice">
+                        <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
+                        <div class="figure">
+                            <label for="relative"><img src="images/settings/touchpad.png" alt="{{'CLIENT.NAME_MOUSE_MODE_RELATIVE' | translate}}"/></label>
+                            <p class="caption"><label for="relative">{{'CLIENT.HELP_MOUSE_MODE_RELATIVE' | translate}}</label></p>
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- Display options -->
+                <h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
+                <div class="content">
+                    <div id="zoom-settings">
+                        <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
+                        <div id="zoom-state">{{formattedScale()}}%</div>
+                        <div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
+                    </div>
+                    <div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
+                </div>
+
             </div>
 
         </div>

guacamole/src/main/webapp/app/home/templates/guacRecentConnections.html

@@ -30,7 +30,7 @@
 
             <!-- Connection thumbnail -->
             <div class="thumbnail">
-                <guac-thumbnail client="activeConnection.client"/></guac-thumbnail>
+                <guac-thumbnail client="activeConnection.client"></guac-thumbnail>
             </div>
 
             <!-- Connection name -->

guacamole/src/main/webapp/app/home/templates/home.html

@@ -32,7 +32,7 @@
         <!-- The recent connections for this user -->
         <h2>{{'HOME.SECTION_HEADER_RECENT_CONNECTIONS' | translate}}</h2>
         <div class="recent-connections">
-            <guac-recent-connections root-group="rootConnectionGroup"/>
+            <guac-recent-connections root-group="rootConnectionGroup"></guac-recent-connections>
         </div>
 
         <!-- All connections for this user -->
@@ -41,7 +41,7 @@
             <guac-group-list
                 connection-group="rootConnectionGroup"
                 connection-template="'app/home/templates/connection.html'"
-                connection-group-template="'app/home/templates/connectionGroup.html'"/>
+                connection-group-template="'app/home/templates/connectionGroup.html'"></guac-group-list>
         </div>
 
     </div>

guacamole/src/main/webapp/app/manage/templates/manageConnection.html

@@ -68,7 +68,7 @@ THE SOFTWARE.
             <tr ng-repeat="parameter in protocols[connection.protocol].parameters">
                 <th>{{getProtocolParameterName(connection.protocol, parameter.name) | translate}}</th>
                 <td>
-                    <guac-connection-parameter protocol="protocols[connection.protocol]" name="parameter.name" parameters="parameters"/>
+                    <guac-connection-parameter protocol="protocols[connection.protocol]" name="parameter.name" parameters="parameters"></guac-connection-parameter>
                 </td>
             </tr>
         </table>

guacamole/src/main/webapp/index.html

@@ -37,7 +37,7 @@ THE SOFTWARE.
         <!-- Global status/error dialog -->
         <div ng-class="{shown: status}" class="status-outer">
             <div class="status-middle">
-                <guac-notification notification="status"/>
+                <guac-notification notification="status"></guac-notification>
             </div>
         </div>
         
@@ -47,7 +47,7 @@ THE SOFTWARE.
         <!-- Notification area -->
         <div id="notificationArea">
             <div ng-repeat="wrapper in notifications">
-                <guac-notification notification="wrapper.notification"/>
+                <guac-notification notification="wrapper.notification"></guac-notification>
             </div>                
         </div>