GUAC-1044: Move guac menu inside guacViewport. Move menu-specific properties to own object.

guacamole/src/main/webapp/app/client/controllers/clientController.js

@@ -154,25 +154,41 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
         callback: RECONNECT_ACTION.callback,
         remaining: 15
     };
-    
-    // Hide menu by default
-    $scope.menuShown = false;
 
-    // Use physical keyboard by default
+    /**
-    $scope.inputMethod = 'none';
+     * Menu-specific properties.
+     */
+    $scope.menu = {
+
+        /**
+         * Whether the menu is currently shown.
+         *
+         * @type Boolean
+         */
+        shown : false,
+
+        /**
+         * The currently selected input method. This may be either 'none',
+         * 'osk', or 'none'.
+         *
+         * @type String
+         */
+        inputMethod : 'none',
+
+        /**
+         * The current scroll state of the menu.
+         *
+         * @type ScrollState
+         */
+        scrollState : new ScrollState()
+
+    };
 
     // Convenience method for closing the menu
     $scope.closeMenu = function closeMenu() {
-        $scope.menuShown = false;
+        $scope.menu.shown = false;
     };
 
-    /**
-     * The current scroll state of the menu.
-     *
-     * @type ScrollState
-     */
-    $scope.menuScrollState = new ScrollState();
-
     // Update the model when clipboard data received from client
     $scope.$on('guacClientClipboard', function clientClipboardListener(event, client, mimetype, clipboardData) {
        $scope.clipboardData = clipboardData; 
@@ -206,12 +222,12 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
         // Hide menu if swipe gesture is detected
         if (Math.abs(currentY - startY)  <  MENU_DRAG_VERTICAL_TOLERANCE
                   && startX   - currentX >= MENU_DRAG_DELTA)
-            $scope.menuShown = false;
+            $scope.menu.shown = false;
 
         // Scroll menu by default
         else {
-            $scope.menuScrollState.left -= deltaX;
+            $scope.menu.scrollState.left -= deltaX;
-            $scope.menuScrollState.top -= deltaY;
+            $scope.menu.scrollState.top -= deltaY;
         }
 
         return false;
@@ -226,7 +242,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
 
             if (Math.abs(currentY - startY) <  MENU_DRAG_VERTICAL_TOLERANCE
                       && currentX - startX  >= MENU_DRAG_DELTA)
-                $scope.menuShown = true;
+                $scope.menu.shown = true;
 
         }
 
@@ -307,7 +323,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
     };
 
     // Show/hide UI elements depending on input method
-    $scope.$watch('inputMethod', function setInputMethod(inputMethod) {
+    $scope.$watch('menu.inputMethod', function setInputMethod(inputMethod) {
 
         // Show input methods only if selected
         $scope.showOSK       = (inputMethod === 'osk');
@@ -315,7 +331,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
 
     });
 
-    $scope.$watch('menuShown', function menuVisibilityChanged(menuShown, menuShownPreviousState) {
+    $scope.$watch('menu.shown', function menuVisibilityChanged(menuShown, menuShownPreviousState) {
         
         // Send clipboard data if menu is hidden
         if (!menuShown && menuShownPreviousState)
@@ -351,7 +367,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
                 
                 // Toggle the menu
                 $scope.$apply(function() {
-                    $scope.menuShown = !$scope.menuShown;
+                    $scope.menu.shown = !$scope.menu.shown;
                 });
             }
         }
@@ -372,8 +388,8 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
 
         // Show menu and scroll file transfer into view
         if (count > oldCount) {
-            $scope.menuShown = true;
+            $scope.menu.shown = true;
-            $scope.fileTransferMarker.scrollIntoView();
+            $scope.menu.fileTransferMarker.scrollIntoView();
         }
 
     });
@@ -495,7 +511,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
             $scope.client.client.disconnect();
 
         // Hide menu
-        $scope.menuShown = false;
+        $scope.menu.shown = false;
 
     };
 

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

@@ -20,8 +20,9 @@
    THE SOFTWARE.
 -->
 
-<!-- Client view -->
 <guac-viewport>
+
+    <!-- Client view -->
     <div class="client-view">
 
         <!-- Central portion of view -->
@@ -49,90 +50,89 @@
 
     </div>
 
+    <!-- Menu -->
+    <div ng-class="{open: menu.shown}" id="menu" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
+
+        <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>
+                </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>
 
 </guac-viewport>
-
-<!-- Menu -->
-<div ng-class="{open: menuShown}" id="menu" guac-touch-drag="menuDrag" guac-scroll="menuScrollState">
-
-    <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="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="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="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="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="autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
-    </div>
-
-</div>