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

This commit is contained in:
Michael Jumper
2015-01-30 12:31:47 -08:00
parent 5ee92d1729
commit 21864ed823
2 changed files with 125 additions and 109 deletions

View File

@@ -155,23 +155,39 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
remaining: 15
};
// Hide menu by default
$scope.menuShown = false;
/**
* Menu-specific properties.
*/
$scope.menu = {
// Use physical keyboard by default
$scope.inputMethod = 'none';
/**
* Whether the menu is currently shown.
*
* @type Boolean
*/
shown : false,
// Convenience method for closing the menu
$scope.closeMenu = function closeMenu() {
$scope.menuShown = 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
*/
$scope.menuScrollState = new ScrollState();
scrollState : new ScrollState()
};
// Convenience method for closing the menu
$scope.closeMenu = function closeMenu() {
$scope.menu.shown = false;
};
// Update the model when clipboard data received from client
$scope.$on('guacClientClipboard', function clientClipboardListener(event, client, mimetype, 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.menuScrollState.top -= deltaY;
$scope.menu.scrollState.left -= deltaX;
$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.fileTransferMarker.scrollIntoView();
$scope.menu.shown = true;
$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;
};

View File

@@ -20,8 +20,9 @@
THE SOFTWARE.
-->
<!-- Client view -->
<guac-viewport>
<!-- Client view -->
<div class="client-view">
<!-- Central portion of view -->
@@ -49,11 +50,8 @@
</div>
</guac-viewport>
<!-- Menu -->
<div ng-class="{open: menuShown}" id="menu" guac-touch-drag="menuDrag" guac-scroll="menuScrollState">
<!-- 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>
@@ -69,7 +67,7 @@
</div>
<!-- File transfers -->
<h3 guac-marker="fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
<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>
@@ -80,20 +78,20 @@
<!-- 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>
<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="inputMethod" type="radio" value="text"/> {{'CLIENT.NAME_INPUT_METHOD_TEXT' | translate}}</label>
<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="inputMethod" type="radio" value="osk"/> {{'CLIENT.NAME_INPUT_METHOD_OSK' | translate}}</label>
<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>
@@ -132,7 +130,9 @@
<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><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>
</guac-viewport>