From 7b9449d2dad7e804a327e3ea66b5a290011197df Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Fri, 30 Jan 2015 14:06:20 -0800
Subject: [PATCH] GUAC-1044: Keep menu header stationary while allowing body to
 scroll.

---
 .../main/webapp/app/client/styles/menu.css    |  41 ++++-
 .../webapp/app/client/templates/client.html   | 164 ++++++++++--------
 2 files changed, 128 insertions(+), 77 deletions(-)

diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css
index dd96408cc..f3f324025 100644
--- a/guacamole/src/main/webapp/app/client/styles/menu.css
+++ b/guacamole/src/main/webapp/app/client/styles/menu.css
@@ -21,10 +21,10 @@
  */
 
 #menu {
-    overflow: auto;
+    overflow: hidden;
     position: absolute;
     top: 0;
-    bottom: 0;
+    height: 100%;
     max-width: 100%;
     width: 480px;
     background: #EEE;
@@ -37,6 +37,43 @@
     transition: left 0.125s, opacity 0.125s;
 }
 
+.menu-content {
+    overflow: hidden;
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+.menu-header {
+    display: table-row;
+    height: 0;
+}
+
+.menu-header h2 {
+    margin-bottom: 0;
+}
+
+.menu-body {
+    display: table-row;
+    height: 100%;
+}
+
+.menu-body-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.menu-body-scroll-region {
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
 #menu h3 {
     margin: 1em;
 }
diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html
index aa2d5c294..685045312 100644
--- a/guacamole/src/main/webapp/app/client/templates/client.html
+++ b/guacamole/src/main/webapp/app/client/templates/client.html
@@ -43,7 +43,7 @@
 
             <!-- On-screen keyboard -->
             <div class="keyboard-container" ng-show="showOSK">
-                <guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"/>
+                <guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"></guac-osk>
             </div>
 
         </div>
@@ -51,88 +51,102 @@
     </div>
 
     <!-- Menu -->
-    <div ng-class="{open: menu.shown}" id="menu" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
+    <div ng-class="{open: menu.shown}" id="menu">
+        <div class="menu-content">
 
-        <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>
-
-        <!-- Clipboard -->
-        <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
-        <div class="content" id="clipboard-settings">
-            <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
-            <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>
+            <!-- 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>
             </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>
+            <!-- Scrollable body -->
+            <div class="menu-body">
+                <div class="menu-body-content">
+                    <div class="menu-body-scroll-region" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
+
+                        <!-- Clipboard -->
+                        <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
+                        <div class="content" id="clipboard-settings">
+                            <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
+                            <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>
             </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>
 
 </guac-viewport>