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

GUACAMOLE-1293: Replace message list with overall shared user count.

Browse Source
This commit is contained in:
Mike Jumper
2023-01-28 23:47:50 -08:00
parent 9a587a16eb
commit 250039aaf9
13 changed files with 126 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -792,24 +792,6 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
};
/**
* Determines whether the attached client group has any associated client
* messages to display.
*
* @returns {Boolean}
* true if there are messages to display; otherwise false.
*/
$scope.hasMessages = function hasMessages() {
// No client group means no messages
if (!$scope.clientGroup)
return false;
// Otherwise, find messages within the clients in the group.
return _.findIndex($scope.clientGroup.clients, ManagedClient.hasMessages) !== -1;
};
/**
* Determines whether the attached client group has any associated file
* transfers, regardless of those file transfers' state.

87
guacamole/src/main/frontend/src/app/client/directives/guacClientMessage.js
View File

@@ -1,87 +0,0 @@
/*
* 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.
*/
/**
* Directive which displays a message for the client.
*/
angular.module('client').directive('guacClientMessage', [function guacClientMessage() {
return {
restrict: 'E',
replace: true,
scope: {
/**
* The message to display to the client.
*
* @type {!ManagedClientMessage}
*/
message : '='
},
templateUrl: 'app/client/templates/guacClientMessage.html',
controller: ['$scope', '$injector', '$element',
function guacClientMessageController($scope, $injector, $element) {
// Required types
const ManagedClientMessage = $injector.get('ManagedClientMessage');
// Required services
var translationStringService = $injector.get('translationStringService');
/**
* Uses the msgcode to retrieve the correct translation key for
* the client message.
*
* @returns {string}
*/
$scope.getMessageKey = function getMessageKey() {
let msgString = "DEFAULT";
if (Object.values(Guacamole.Client.Message).includes($scope.message.msgcode))
msgString = Object.keys(Guacamole.Client.Message).find(key => Guacamole.Client.Message[key] === $scope.message.msgcode);
return "CLIENT.MESSAGE_" + translationStringService.canonicalize(msgString);
};
/**
* Returns a set of key/value object pairs that represent the
* arguments provided as part of the message in the form
* "ARGS_0 = value". Guacamole's translation system relies on
* the arguments being available in this format in order to be able
* to handle substituting values for an arbitrary list of arguments.
*
* @returns {Object}
*/
$scope.getMessageArgs = function getMessageArgs() {
return $scope.message.args.reduce(
function(acc, value, index) {
acc[`ARGS_${index}`] = value;
return acc;
},
{}
);
};
}]
};
}]);

76
guacamole/src/main/frontend/src/app/client/directives/guacMessageDialog.js
View File

@@ -1,76 +0,0 @@
/*
* 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.
*/
/**
* Directive which displays all client messages.
*/
angular.module('client').directive('guacMessageDialog', [function guacMessageDialog() {
return {
restrict: 'E',
replace: true,
scope: {
/**
* The client group whose messages should be managed by this
* directive.
*
* @type ManagedClientGroup
*/
clientGroup : '='
},
templateUrl: 'app/client/templates/guacMessageDialog.html',
controller: ['$scope', '$injector', function guacMessageDialogController($scope, $injector) {
// Required types
const ManagedClient = $injector.get('ManagedClient');
const ManagedClientGroup = $injector.get('ManagedClientGroup');
/**
* Removes all messages.
*/
$scope.clearAllMessages = function clearAllMessages() {
// Nothing to clear if no client group attached
if (!$scope.clientGroup)
return;
// Remove each client's messages
$scope.clientGroup.clients.forEach(client => {
client.messages = [];
});
};
/**
* @borrows ManagedClientGroup.hasMultipleClients
*/
$scope.hasMultipleClients = ManagedClientGroup.hasMultipleClients;
/**
* @borrows ManagedClient.hasMessages
*/
$scope.hasMessages = ManagedClient.hasMessages;
}]
};
}]);

23
guacamole/src/main/frontend/src/app/client/styles/client-message.css
View File

@@ -1,23 +0,0 @@
/*
* 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.
*/
p.client-message-text {
margin: 5px;
}

122
guacamole/src/main/frontend/src/app/client/styles/message-dialog.css
View File

@@ -1,122 +0,0 @@
/*
* 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.
*/
#message-dialog {
position: absolute;
right: 0;
bottom: 0;
z-index: 20;
font-size: 0.8em;
width: 3in;
max-width: 100%;
max-height: 3in;
background: white;
opacity: 0.75;
}
#message-dialog .message-dialog-box {
/* IE10 */
display: -ms-flexbox;
-ms-flex-align: stretch;
-ms-flex-direction: column;
/* Ancient Mozilla */
display: -moz-box;
-moz-box-align: stretch;
-moz-box-orient: vertical;
/* Ancient WebKit */
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: vertical;
/* Old WebKit */
display: -webkit-flex;
-webkit-align-items: stretch;
-webkit-flex-direction: column;
/* W3C */
display: flex;
align-items: stretch;
flex-direction: column;
max-width: inherit;
max-height: inherit;
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
#message-dialog .message-dialog-box .header {
-ms-flex: 0 0 auto;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
margin-bottom: 5px;
}
#message-dialog .message-dialog-box .client-message-body {
-ms-flex: 1 1 auto;
-moz-box-flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: auto;
}
/*
* Shrink maximum height if viewport is too small for default 3in dialog.
*/
@media all and (max-height: 3in) {
#message-dialog {
max-height: 1.5in;
}
}
/*
* If viewport is too small for even the 1.5in dialog, fit all available space.
*/
@media all and (max-height: 1.5in) {
#message-dialog {
height: 100%;
}
#message-dialog .message-dialog-box {
position: absolute;
left: 0.5em;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
}
}

60
guacamole/src/main/frontend/src/app/client/styles/tiled-client-grid.css
View File

@@ -110,10 +110,15 @@
}
.tiled-client-grid .client-tile .client-tile-header .client-tile-name {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 0.5em;
margin-bottom: -0.125em;
}
.tiled-client-grid .client-tile .main {
@@ -136,3 +141,58 @@
.tiled-client-grid .shared .client-tile-shared-indicator {
display: inline;
}
.tiled-client-grid .client-user-count {
visibility: hidden;
display: block;
position: absolute;
right: 0;
top: 0;
z-index: 1;
border-radius: 0.25em;
padding: 0.125em 0.75em;
margin: 0.5em;
background: #055;
color: white;
font-weight: bold;
font-size: 0.8em;
}
.tiled-client-grid .client-user-count::before {
content: ' ';
display: inline-block;
margin-bottom: -0.2em;
padding-right: 0.25em;
width: 1em;
height: 1em;
background: center / contain no-repeat url('images/user-icons/guac-user-white.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.tiled-client-grid .client-tile-header .client-user-count {
display: inline-block;
position: relative;
white-space: nowrap;
background: black;
padding-left: 0.5em;
padding-right: 0.75em;
}
.tiled-client-grid .client-tile-header .client-user-count::before {
padding-right: 0.75em;
}
.tiled-client-grid .joined .client-user-count {
visibility: visible;
}

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

@@ -45,11 +45,6 @@
{{'CLIENT.TEXT_CLIENT_STATUS_UNSTABLE' | translate}}
</div>
<!-- Message dialog -->
<div id="message-dialog" ng-show="hasMessages()">
<guac-message-dialog client-group="clientGroup"></guac-message-dialog>
</div>
<!-- Menu -->
<div class="menu" ng-class="{open: menu.shown}" id="guac-menu">
<div class="menu-content" ng-if="menu.shown" guac-touch-drag="menuDrag">

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

@@ -1,8 +0,0 @@
<div class="client-message" ng-click="clear()">
<!-- Message text -->
<p class="client-message-text"
translate="{{ getMessageKey() }}"
translate-values="{{ getMessageArgs() }}"></p>
</div>

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

@@ -1,21 +0,0 @@
<div class="message-dialog-box">
<!-- Message dialog header -->
<div class="header">
<h2>{{'CLIENT.SECTION_HEADER_CLIENT_MESSAGES' | translate}}</h2>
<button ng-click="clearAllMessages()">{{'CLIENT.ACTION_CLEAR_CLIENT_MESSAGES' | translate}}</button>
</div>
<!-- Received messages -->
<div class="client-messages-body">
<div class="client-messages-body-section" ng-repeat="client in clientGroup.clients" ng-show="hasMessages(client)">
<h3 ng-show="hasMultipleClients(clientGroup)">{{ client.name }}</h3>
<div class="messages">
<guac-client-message
message="message"
ng-repeat="message in client.messages">
</guac-client-message>
</div>
</div>
</div>
</div>

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

@@ -5,12 +5,14 @@
<div class="client-tile" ng-if="client"
ng-class="{
'focused' : client.clientProperties.focused,
'shared' : isShared(client)
'shared' : isShared(client),
'joined' : client.userCount
}"
guac-click="getFocusAssignmentCallback(client)">
<h3 class="client-tile-header" ng-if="hasMultipleClients(clientGroup)">
<img class="client-tile-shared-indicator" src="images/share-white.svg">
<span class="client-tile-name">{{ client.title }}</span>
<span class="client-user-count">{{ client.userCount }}</span>
<img ng-click="onClose({ '$client' : client })"
class="client-tile-disconnect"
ng-attr-alt="{{ 'CLIENT.ACTION_DISCONNECT' | translate }}"
@@ -21,6 +23,11 @@
<!-- Client-specific status/error dialog -->
<guac-client-notification client="client"></guac-client-notification>
<div class="client-user-count" ng-if="!hasMultipleClients(clientGroup)">
{{ client.userCount }}
</div>
</div>
</div>

86
guacamole/src/main/frontend/src/app/client/types/ManagedClient.js
View File

@@ -17,6 +17,8 @@
* under the License.
*/
/* global Guacamole, _ */
/**
* Provides the ManagedClient class used by the guacClientManager service.
*/
@@ -28,7 +30,6 @@ angular.module('client').factory('ManagedClient', ['$rootScope', '$injector',
const ClientIdentifier = $injector.get('ClientIdentifier');
const ClipboardData = $injector.get('ClipboardData');
const ManagedArgument = $injector.get('ManagedArgument');
const ManagedClientMessage = $injector.get('ManagedClientMessage');
const ManagedClientState = $injector.get('ManagedClientState');
const ManagedClientThumbnail = $injector.get('ManagedClientThumbnail');
const ManagedDisplay = $injector.get('ManagedDisplay');
@@ -174,14 +175,25 @@ angular.module('client').factory('ManagedClient', ['$rootScope', '$injector',
* @type ManagedFilesystem[]
*/
this.filesystems = template.filesystems || [];
/**
* All messages that have been sent to the client that should be
* displayed.
*
* @type ManagedClientMessage[]
* The current number of users sharing this connection, excluding the
* user that originally started the connection. Duplicate connections
* from the same user are included in this total.
*/
this.messages = template.messages || [];
this.userCount = template.userCount || 0;
/**
* All users currently sharing this connection, excluding the user that
* originally started the connection. If the connection is not shared,
* this object will be empty. This map consists of key/value pairs
* where each key is the user's username and each value is an object
* tracking the unique connections currently used by that user (a map
* of Guacamole protocol user IDs to boolean values).
*
* @type Object.<string, Object.<string, boolean>>
*/
this.users = template.users || {};
/**
* All available share links generated for the this ManagedClient via
@@ -498,15 +510,44 @@ angular.module('client').factory('ManagedClient', ['$rootScope', '$injector',
// Handle messages received from guacd to display to the client.
client.onmsg = function clientMessage(msgcode, args) {
msg = new ManagedClientMessage();
msg.msgcode = msgcode;
msg.args = args;
$rootScope.$apply(function updateMessages() {
managedClient.messages.push(msg);
});
switch (msgcode) {
// Update current users on connection when a user joins/leaves
case Guacamole.Client.Message.USER_JOINED:
case Guacamole.Client.Message.USER_LEFT:
var userID = args[0];
var username = args[1];
var connections = managedClient.users[username] || {};
managedClient.users[username] = connections;
$rootScope.$apply(function usersChanged() {
// Add/remove user
if (msgcode === Guacamole.Client.Message.USER_JOINED) {
managedClient.userCount++;
connections[userID] = true;
}
else {
managedClient.userCount--;
delete connections[userID];
}
// Delete user entry after no connections remain
if (_.isEmpty(connections))
delete managedClient.users[username];
});
break;
default:
// Ignore - we only handle join/leave messages, which are
// currently the only messages defined at the protocol
// level.
}
};
// Automatically update the client thumbnail
@@ -915,19 +956,6 @@ angular.module('client').factory('ManagedClient', ['$rootScope', '$injector',
};
/**
* Returns whether the given client has any associated messages to display.
*
* @param {GuacamoleClient} client
* The client for which messages should be checked.
*
* @returns {Boolean}
* true if the given client has any messages, otherwise false.
*/
ManagedClient.hasMessages = function hasMessages(client) {
return !!(client && client.messages && client.messages.length);
};
/**
* Returns whether the given client has any associated file transfers,
* regardless of those file transfers' state.

59
guacamole/src/main/frontend/src/app/client/types/ManagedClientMessage.js
View File

@@ -1,59 +0,0 @@
/*
* 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.
*/
/**
* Provides the ManagedClientMessage class used for messages displayed in
* a ManagedClient.
*/
angular.module('client').factory('ManagedClientMessage', [function defineManagedClientMessage() {
/**
* Object which represents a message to be displayed to a Guacamole client.
*
* @constructor
* @param {ManagedClientMessage|Object} [template={}]
* The object whose properties should be copied within the new
* ManagedClientMessage.
*/
var ManagedClientMessage = function ManagedClientMessage(template) {
// Use empty object by default
template = template || {};
/**
* The message code sent by the server that will be used to locate the
* message within the Guacamole translation framework.
*
* @type Number
*/
this.msgcode = template.msgcode;
/**
* Any arguments that should be passed through the translation system
* and displayed as part of the message.
*
* @type String[]
*/
this.args = template.args;
};
return ManagedClientMessage;
}]);

1
guacamole/src/main/frontend/src/images/user-icons/guac-user-white.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M474.341 504.195c.005 31.957-.398 24.504-.398 58.628H208.914c0-52.862-.398-8.867-.398-58.628 0-47.522 67.134-73.133 131.412-73.133 64.277 0 134.405 18.656 134.413 73.133z" style="fill:#fff;fill-opacity:1;stroke:#000;stroke-width:.09023736;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0" transform="translate(-33.342 -44.364) scale(.19138)"/><path d="M48.002 28.63a16.506 16.506 0 1 1-33.012 0 16.506 16.506 0 1 1 33.012 0z" style="fill:#fff;fill-rule:evenodd;stroke:none" transform="translate(.504 -8)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 635 B