From 242e0b7cf0e1e762cfed3c9b117c3528a27436c0 Mon Sep 17 00:00:00 2001 From: Nick Couchman Date: Mon, 30 Apr 2018 13:35:08 -0400 Subject: [PATCH 1/6] GUACAMOLE-152: Allow zoom/scale to be manually entered. --- .../app/client/directives/guacZoomCtrl.js | 42 +++++++++++++++++++ .../main/webapp/app/client/styles/menu.css | 10 +++++ .../webapp/app/client/templates/client.html | 2 +- 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 guacamole/src/main/webapp/app/client/directives/guacZoomCtrl.js 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..597143970 --- /dev/null +++ b/guacamole/src/main/webapp/app/client/directives/guacZoomCtrl.js @@ -0,0 +1,42 @@ +/* + * 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, attr, ngModel) { + + // 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..3fb6f5710 100644 --- a/guacamole/src/main/webapp/app/client/styles/menu.css +++ b/guacamole/src/main/webapp/app/client/styles/menu.css @@ -134,6 +134,16 @@ padding-top: 1em; } +.menu-section .zoom-ctrl { + width: 4em; +} + +.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..d152d809f 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -151,7 +151,7 @@
-
-
{{formattedScale()}}%
+ %
+
From 64589f27f468447fb26c7d748b57cbf6657e081f Mon Sep 17 00:00:00 2001 From: Nick Couchman Date: Fri, 4 May 2018 03:56:39 -0400 Subject: [PATCH 2/6] GUACAMOLE-152: Remove unneeded formattedScale method. --- .../main/webapp/app/client/controllers/clientController.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js index cf4ba5b16..4fce87b3a 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; From 10b0afe0cb4a7a3e47b270cf7dd7f7236a5364ac Mon Sep 17 00:00:00 2001 From: Nick Couchman Date: Fri, 4 May 2018 18:05:10 -0400 Subject: [PATCH 3/6] GUACAMOLE-152: Update zoom level on blur and submit, remove debounce. --- guacamole/src/main/webapp/app/client/templates/client.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index d152d809f..f79163b20 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -151,7 +151,9 @@
-
- % + %
+
From b4c8bc8058b9b367c3769a34ccfffdd5aa5458ea Mon Sep 17 00:00:00 2001 From: Nick Couchman Date: Fri, 11 May 2018 06:29:05 -0400 Subject: [PATCH 4/6] GUACAMOLE-152: Fix up new zoom control style. --- .../src/main/webapp/app/client/styles/menu.css | 15 +++++++++++++-- .../main/webapp/app/client/templates/client.html | 8 +++++--- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/styles/menu.css b/guacamole/src/main/webapp/app/client/styles/menu.css index 3fb6f5710..4021d3ce4 100644 --- a/guacamole/src/main/webapp/app/client/styles/menu.css +++ b/guacamole/src/main/webapp/app/client/styles/menu.css @@ -134,8 +134,19 @@ padding-top: 1em; } -.menu-section .zoom-ctrl { - width: 4em; +.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, diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index f79163b20..5abea643f 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -151,9 +151,11 @@
-
- % +
+ % +
+
From b34d97f82dc5a9b28a89e2072b3ec477fda17464 Mon Sep 17 00:00:00 2001 From: Nick Couchman Date: Sat, 12 May 2018 08:13:15 -0400 Subject: [PATCH 5/6] GUACAMOLE-152: Handle zoom changes with autoFit correctly. --- .../webapp/app/client/controllers/clientController.js | 10 ++++++++++ .../main/webapp/app/client/directives/guacZoomCtrl.js | 8 +++++++- .../src/main/webapp/app/client/templates/client.html | 3 ++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js index 4fce87b3a..af1d72609 100644 --- a/guacamole/src/main/webapp/app/client/controllers/clientController.js +++ b/guacamole/src/main/webapp/app/client/controllers/clientController.js @@ -741,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 index 597143970..3e5b468da 100644 --- a/guacamole/src/main/webapp/app/client/directives/guacZoomCtrl.js +++ b/guacamole/src/main/webapp/app/client/directives/guacZoomCtrl.js @@ -26,7 +26,13 @@ angular.module('client').directive('guacZoomCtrl', function guacZoomCtrl() { restrict: 'A', require: 'ngModel', priority: 101, - link: function(scope, element, attr, ngModel) { + 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) { diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 5abea643f..6fda594db 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -154,7 +154,8 @@
% + ng-model-options="{ updateOn: 'blur submit' }" + ng-change="zoomSet();" />%
+
From a0200824afb66154d2635e82d6e05b3715064f4b Mon Sep 17 00:00:00 2001 From: Nick Couchman Date: Wed, 16 May 2018 10:43:07 -0400 Subject: [PATCH 6/6] GUACAMOLE-152: Remove superfluous semicolon. --- guacamole/src/main/webapp/app/client/templates/client.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 6fda594db..054cbcf67 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -155,7 +155,7 @@ % + ng-change="zoomSet()" />%
+