GUACAMOLE-724: Migrate client zoom editor to own directive.

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.
      */

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;
+
+}]);

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;

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;

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;
+}

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

@@ -178,20 +178,12 @@
                 </div>
 
                 <!-- Display options -->
-                <div class="menu-section" id="display-settings">
+                <div class="menu-section" id="display-settings" ng-if="focusedClient">
                     <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>
+                            <guac-client-zoom client="focusedClient"></guac-client-zoom>
-                            <div class="zoom-ctrl">
-                                <input type="number" class="zoom-ctrl" guac-zoom-ctrl
-                                        ng-model="client.clientProperties.scale"
-                                        ng-model-options="{ updateOn: 'blur submit' }"
-                                        ng-change="zoomSet()">%
-                            </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>
 

guacamole/src/main/frontend/src/app/client/templates/guacClientZoom.html

@@ -0,0 +1,18 @@
+<div class="client-zoom">
+    <div class="client-zoom-editor">
+        <div ng-click="zoomOut()" class="client-zoom-out"><img src="images/settings/zoom-out.png" alt="-"></div>
+        <div class="client-zoom-state">
+            <input type="number" guac-zoom-ctrl
+                    ng-model="client.clientProperties.scale"
+                    ng-model-options="{ updateOn: 'blur submit' }"
+                    ng-change="zoomSet()">%
+        </div>
+        <div ng-click="zoomIn()" class="client-zoom-in"><img src="images/settings/zoom-in.png" alt="+"></div>
+    </div>
+    <div class="client-zoom-autofit">
+        <label><input ng-model="client.clientProperties.autoFit"
+                      ng-change="changeAutoFit()"
+                      ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit">
+            {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label>
+    </div>
+</div>