safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 21:27:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Jumper
2021-06-21 21:50:25 -07:00
parent 448ebb5019
commit b0febd3402
7 changed files with 180 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
guacamole/src/main/frontend/src/app/client/controllers/clientController.js
View File

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

85
guacamole/src/main/frontend/src/app/client/directives/guacClientZoom.js Normal file
View File

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

38
guacamole/src/main/frontend/src/app/client/styles/guac-menu.css
View File

@@ -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;

21
guacamole/src/main/frontend/src/app/client/styles/menu.css
View File

@@ -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;

75
guacamole/src/main/frontend/src/app/client/styles/zoom.css Normal file
View File

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

12
guacamole/src/main/frontend/src/app/client/templates/client.html
View File

@@ -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>
<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>
<guac-client-zoom client="focusedClient"></guac-client-zoom>
</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>

18
guacamole/src/main/frontend/src/app/client/templates/guacClientZoom.html Normal file
View File

@@ -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>