From d8512531c6d57ecfc029a8a4be9a7815ac241c23 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Tue, 5 May 2015 15:26:37 -0700
Subject: [PATCH] GUAC-587: Contain each menu section within its own div.

---
 .../main/webapp/app/client/styles/menu.css    |  14 +--
 .../webapp/app/client/templates/client.html   | 112 ++++++++++--------
 2 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css
index c35949f01..107b397ca 100644
--- a/guacamole/src/main/webapp/app/client/styles/menu.css
+++ b/guacamole/src/main/webapp/app/client/styles/menu.css
@@ -127,12 +127,6 @@
     flex: 0 0 auto;
 }
 
-#menu h3 {
-    margin: 0;
-    padding: 0;
-    padding-bottom: 1em;
-}
-
 #menu .content {
 
     padding: 0;
@@ -165,7 +159,13 @@
 
 }
 
-#menu .content + h3 {
+.menu-section h3 {
+    margin: 0;
+    padding: 0;
+    padding-bottom: 1em;
+}
+
+.menu-section ~ .menu-section h3 {
     padding-top: 1em;
 }
 
diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html
index 01e0fa547..2a2a0cde0 100644
--- a/guacamole/src/main/webapp/app/client/templates/client.html
+++ b/guacamole/src/main/webapp/app/client/templates/client.html
@@ -66,77 +66,87 @@
             <div class="menu-body" 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 class="menu-section" id="clipboard-settings">
+                    <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
+                    <div class="content">
+                        <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
+                        <textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
+                    </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 class="menu-section" id="file-transfers">
+                    <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
+                    <div class="content">
+                        <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
+                    </div>
                 </div>
 
                 <!-- Input method -->
-                <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
-                <div class="content" id="keyboard-settings">
+                <div class="menu-section" id="keyboard-settings">
+                    <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
+                    <div class="content">
+
+                        <!-- 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>
 
-                    <!-- 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>
+                <div class="menu-section" id="mouse-settings">
+                    <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
+                    <div class="content">
+                        <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>
+                        <!-- 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>
-                    </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>
+                        <!-- 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>
 
+                    </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 class="menu-section" id="display-settings">
+                    <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><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>