diff --git a/guacamole/src/main/frontend/src/app/client/controllers/clientController.js b/guacamole/src/main/frontend/src/app/client/controllers/clientController.js index 046603588..498834a50 100644 --- a/guacamole/src/main/frontend/src/app/client/controllers/clientController.js +++ b/guacamole/src/main/frontend/src/app/client/controllers/clientController.js @@ -105,14 +105,6 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams */ shown : false, - /** - * Whether the Guacamole display should be scaled to fit the browser - * window. - * - * @type Boolean - */ - autoFit : true, - /** * The currently selected input method. This may be any of the values * defined within preferenceService.inputMethods. @@ -507,7 +499,6 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams currentScale = Math.min(currentScale, $scope.client.clientProperties.maxScale); // Update scale based on pinch distance - $scope.menu.autoFit = false; $scope.client.clientProperties.autoFit = false; $scope.client.clientProperties.scale = currentScale; @@ -714,42 +705,6 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams return _.findIndex($scope.clientGroup.clients, client => client.clientState.tunnelUnstable) !== -1; }; - - $scope.zoomIn = function zoomIn() { - $scope.menu.autoFit = false; - $scope.client.clientProperties.autoFit = false; - $scope.client.clientProperties.scale += 0.1; - }; - - $scope.zoomOut = function zoomOut() { - $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) { - $scope.client.clientProperties.autoFit = true; - } - else { - $scope.client.clientProperties.autoFit = false; - $scope.client.clientProperties.scale = 1; - } - }; - - $scope.autoFitDisabled = function() { - return $scope.client.clientProperties.minZoom >= 1; - }; - /** * Immediately disconnects all currently-focused clients, if any. */ diff --git a/guacamole/src/main/frontend/src/app/client/directives/guacClientZoom.js b/guacamole/src/main/frontend/src/app/client/directives/guacClientZoom.js new file mode 100644 index 000000000..3d4cb51de --- /dev/null +++ b/guacamole/src/main/frontend/src/app/client/directives/guacClientZoom.js @@ -0,0 +1,85 @@ +/* + * 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 for controlling the zoom level and scale-to-fit behavior of a + * a single Guacamole client. + */ +angular.module('client').directive('guacClientZoom', [function guacClientZoom() { + + var directive = { + restrict: 'E', + replace: true, + templateUrl: 'app/client/templates/guacClientZoom.html' + }; + + directive.scope = { + + /** + * The client to control the zoom/autofit of. + * + * @type ManagedClient + */ + client : '=' + + }; + + directive.controller = ['$scope', '$injector', '$element', + function guacClientZoomController($scope, $injector, $element) { + + /** + * Zooms in by 10%, automatically disabling autofit. + */ + $scope.zoomIn = function zoomIn() { + $scope.client.clientProperties.autoFit = false; + $scope.client.clientProperties.scale += 0.1; + }; + + /** + * Zooms out by 10%, automatically disabling autofit. + */ + $scope.zoomOut = function zoomOut() { + $scope.client.clientProperties.autoFit = false; + $scope.client.clientProperties.scale -= 0.1; + }; + + /** + * Resets the client autofit setting to false. + */ + $scope.clearAutoFit = function clearAutoFit() { + $scope.client.clientProperties.autoFit = false; + }; + + /** + * Notifies that the autofit setting has been manually changed by the + * user. + */ + $scope.autoFitChanged = function autoFitChanged() { + + // Reset to 100% scale when autofit is first disabled + if (!$scope.client.clientProperties.autoFit) + $scope.client.clientProperties.scale = 1; + + }; + + }]; + + return directive; + +}]); \ No newline at end of file diff --git a/guacamole/src/main/frontend/src/app/client/styles/guac-menu.css b/guacamole/src/main/frontend/src/app/client/styles/guac-menu.css index aa80e093d..0f76c52b9 100644 --- a/guacamole/src/main/frontend/src/app/client/styles/guac-menu.css +++ b/guacamole/src/main/frontend/src/app/client/styles/guac-menu.css @@ -115,44 +115,6 @@ text-align: center; } -#guac-menu #zoom-out, -#guac-menu #zoom-in, -#guac-menu #zoom-state { - display: inline-block; - vertical-align: middle; -} - -#guac-menu #zoom-out, -#guac-menu #zoom-in { - max-width: 3em; - border: 1px solid rgba(0, 0, 0, 0.5); - background: rgba(0, 0, 0, 0.1); - border-radius: 2em; - margin: 0.5em; - cursor: pointer; -} - -#guac-menu #zoom-out img, -#guac-menu #zoom-in img { - max-width: 100%; - opacity: 0.5; -} - -#guac-menu #zoom-out:hover, -#guac-menu #zoom-in:hover { - border: 1px solid rgba(0, 0, 0, 1); - background: #CDA; -} - -#guac-menu #zoom-out:hover img, -#guac-menu #zoom-in:hover img { - opacity: 1; -} - -#guac-menu #zoom-state { - font-size: 2em; -} - #guac-menu #devices .device { padding: 1em; diff --git a/guacamole/src/main/frontend/src/app/client/styles/menu.css b/guacamole/src/main/frontend/src/app/client/styles/menu.css index 4021d3ce4..a7980bf75 100644 --- a/guacamole/src/main/frontend/src/app/client/styles/menu.css +++ b/guacamole/src/main/frontend/src/app/client/styles/menu.css @@ -134,27 +134,6 @@ 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/frontend/src/app/client/styles/zoom.css b/guacamole/src/main/frontend/src/app/client/styles/zoom.css new file mode 100644 index 000000000..46c8be406 --- /dev/null +++ b/guacamole/src/main/frontend/src/app/client/styles/zoom.css @@ -0,0 +1,75 @@ +/* + * 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. + */ + +.client-zoom .client-zoom-out, +.client-zoom .client-zoom-in, +.client-zoom .client-zoom-state { + display: inline-block; + vertical-align: middle; +} + +.client-zoom .client-zoom-out, +.client-zoom .client-zoom-in { + max-width: 3em; + border: 1px solid rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.1); + border-radius: 2em; + margin: 0.5em; + cursor: pointer; +} + +.client-zoom .client-zoom-out img, +.client-zoom .client-zoom-in img { + max-width: 100%; + opacity: 0.5; +} + +.client-zoom .client-zoom-out:hover, +.client-zoom .client-zoom-in:hover { + border: 1px solid rgba(0, 0, 0, 1); + background: #CDA; +} + +.client-zoom .client-zoom-out:hover img, +.client-zoom .client-zoom-in:hover img { + opacity: 1; +} + +.client-zoom .client-zoom-state { + font-size: 1.5em; +} + +.client-zoom .client-zoom-autofit { + text-align: left; + margin-top: 1em; +} + +.client-zoom .client-zoom-state input { + width: 2em; + font-size: 1em; + padding: 0; + background: transparent; + border-color: rgba(0, 0, 0, 0.125); +} + +.client-zoom .client-zoom-state input::-webkit-inner-spin-button, +.client-zoom .client-zoom-state input::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} diff --git a/guacamole/src/main/frontend/src/app/client/templates/client.html b/guacamole/src/main/frontend/src/app/client/templates/client.html index 8cd71385d..80ec78cff 100644 --- a/guacamole/src/main/frontend/src/app/client/templates/client.html +++ b/guacamole/src/main/frontend/src/app/client/templates/client.html @@ -178,20 +178,12 @@ -