diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js index cf4ba5b16..af1d72609 100644 --- a/guacamole/src/main/webapp/app/client/controllers/clientController.js +++ b/guacamole/src/main/webapp/app/client/controllers/clientController.js @@ -731,10 +731,6 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams }); - $scope.formattedScale = function formattedScale() { - return Math.round($scope.client.clientProperties.scale * 100); - }; - $scope.zoomIn = function zoomIn() { $scope.menu.autoFit = false; $scope.client.clientProperties.autoFit = false; @@ -745,6 +741,16 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams $scope.client.clientProperties.autoFit = false; $scope.client.clientProperties.scale -= 0.1; }; + + /** + * When zoom is manually set by entering a value + * into the controller, this method turns off autoFit, + * both in the menu and the clientProperties. + */ + $scope.zoomSet = function zoomSet() { + $scope.menu.autoFit = false; + $scope.client.clientProperties.autoFit = false; + }; $scope.changeAutoFit = function changeAutoFit() { if ($scope.menu.autoFit && $scope.client.clientProperties.minScale) { diff --git a/guacamole/src/main/webapp/app/client/directives/guacZoomCtrl.js b/guacamole/src/main/webapp/app/client/directives/guacZoomCtrl.js new file mode 100644 index 000000000..3e5b468da --- /dev/null +++ b/guacamole/src/main/webapp/app/client/directives/guacZoomCtrl.js @@ -0,0 +1,48 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/** + * A directive which converts between human-readable zoom + * percentage and display scale. + */ +angular.module('client').directive('guacZoomCtrl', function guacZoomCtrl() { + return { + restrict: 'A', + require: 'ngModel', + priority: 101, + link: function(scope, element, attrs, ngModel) { + + // Evaluate the ngChange attribute when the model + // changes. + ngModel.$viewChangeListeners.push(function() { + scope.$eval(attrs.ngChange); + }); + + // When pushing to the menu, mutiply by 100. + ngModel.$formatters.push(function(value) { + return Math.round(value * 100); + }); + + // When parsing value from menu, divide by 100. + ngModel.$parsers.push(function(value) { + return Math.round(value) / 100; + }); + } + } +}); diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css index a7980bf75..4021d3ce4 100644 --- a/guacamole/src/main/webapp/app/client/styles/menu.css +++ b/guacamole/src/main/webapp/app/client/styles/menu.css @@ -134,6 +134,27 @@ padding-top: 1em; } +.menu-section input.zoom-ctrl { + width: 2em; + font-size: 1em; + padding: 0; + background: transparent; + border-color: rgba(0, 0, 0, 0.125); +} + +.menu-section div.zoom-ctrl { + font-size: 1.5em; + display: inline; + align-content: center; + vertical-align: middle; +} + +.menu-section .zoom-ctrl::-webkit-inner-spin-button, +.menu-section .zoom-ctrl::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + .menu, .menu.closed { left: -480px; diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 846821860..054cbcf67 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -151,7 +151,12 @@
-
-
{{formattedScale()}}%
+
+ % +
+