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

GUAC-1172: Move file transfer manager to corner of client display.

Browse Source
This commit is contained in:
Michael Jumper
2015-07-03 16:16:55 -07:00
parent 6816314797
commit e6886f7bbf
12 changed files with 147 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
guacamole/src/main/webapp/app/client/controllers/clientController.js
View File

@@ -409,17 +409,6 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
$scope.page.title = name;
});
// Show file transfer section of menu if new file transfers have started
$scope.$watch('client.uploads.length + client.downloads.length', function transfersChanged(count, oldCount) {
// Show menu and scroll file transfer into view
if (count > oldCount) {
$scope.menu.shown = true;
$scope.menu.fileTransferMarker.scrollIntoView();
}
});
// Show status dialog when connection status changes
$scope.$watch('client.clientState.connectionState', function clientStateChanged(connectionState) {
@@ -655,6 +644,24 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
};
/**
* Determines whether the attached client has associated file transfers,
* regardless of those file transfers' state.
*
* @returns {Boolean}
* true if there are any file transfers associated with the
* attached client, false otherise.
*/
$scope.hasTransfers = function hasTransfers() {
// There are no file transfers if there is no client
if (!$scope.client)
return false;
return !!($scope.client.uploads.length || $scope.client.downloads.length);
};
// Clean up when view destroyed
$scope.$on('$destroy', function clientViewDestroyed() {

38
guacamole/src/main/webapp/app/client/directives/guacFileTransferManager.js
View File

@@ -44,27 +44,8 @@ angular.module('client').directive('guacFileTransferManager', [function guacFile
controller: ['$scope', '$injector', function guacFileTransferManagerController($scope, $injector) {
// Required types
var ManagedClient = $injector.get('ManagedClient');
var ManagedFileTransferState = $injector.get('ManagedFileTransferState');
/**
* Determines whether the attached client has associated file
* transfers, regardless of those file transfers' state.
*
* @returns {Boolean}
* true if there are any file transfers associated with the
* attached client, false otherise.
*/
$scope.hasTransfers = function hasTransfers() {
// There are no file transfers if there is no client
if (!$scope.client)
return false;
return !!($scope.client.uploads.length || $scope.client.downloads.length);
};
/**
* Determines whether the given file transfer state indicates an
* in-progress transfer.
@@ -112,25 +93,6 @@ angular.module('client').directive('guacFileTransferManager', [function guacFile
};
/**
* Begins a file upload through the attached Guacamole client for
* each file in the given FileList.
*
* @param {FileList} files
* The files to upload.
*/
$scope.uploadFiles = function uploadFiles(files) {
// Ignore file uploads if no attached client
if (!$scope.client)
return;
// Upload each file
for (var i = 0; i < files.length; i++)
ManagedClient.uploadFile($scope.client, files[i]);
};
}]
};

40
guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css Normal file
View File

@@ -0,0 +1,40 @@
/*
* Copyright (C) 2015 Glyptodon LLC
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
#file-transfer-dialog {
position: absolute;
right: 0;
bottom: 0;
font-size: 0.8em;
padding: 0.5em;
width: 4in;
max-width: 100%;
}
#file-transfer-dialog .transfer-manager {
border: 1px solid rgba(0, 0, 0, 0.125);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.125);
}

35
guacamole/src/main/webapp/app/client/styles/transfer-manager.css
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2014 Glyptodon LLC
* Copyright (C) 2015 Glyptodon LLC
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
@@ -20,22 +20,27 @@
* THE SOFTWARE.
*/
.transfer-manager .action-buttons {
text-align: center;
.transfer-manager {
background: white;
}
.transfer-manager .no-transfers {
color: rgba(255, 255, 255, 0.5);
text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
opacity: 0.5;
font-size: 2em;
font-weight: bolder;
text-align: center;
.transfer-manager .header h2 {
font-size: 1em;
padding-top: 0;
padding-bottom: 0;
}
.transfer-manager .transfer {
margin: 1em;
.transfer-manager .header {
margin: 0;
-ms-flex-align: center;
-moz-box-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.transfer-manager .transfers {
display: table;
padding: 0.25em;
width: 100%;
}

62
guacamole/src/main/webapp/app/client/styles/transfer.css
View File

@@ -21,25 +21,29 @@
*/
.transfer {
display: table-row;
}
.transfer .transfer-status {
display: table-cell;
padding: 0.25em;
position: relative;
padding: 0.5em;
font-size: 0.75em;
}
.transfer .text {
display: table-cell;
text-align: right;
padding: 0.25em
}
.transfer .filename {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
margin-bottom: 0.5em;
position: relative;
font-family: monospace;
font-weight: bold;
}
.transfer .text {
position: relative;
text-align: center;
margin-top: 0.5em;
padding: 0.125em;
}
@keyframes transfer-progress {
@@ -55,11 +59,8 @@
.transfer .progress {
width: 100%;
background: #C2C2C2;
padding: 0.25em;
border: 1px solid gray;
position: absolute;
top: 0;
left: 0;
@@ -70,6 +71,7 @@
.transfer.in-progress .progress {
background-color: #EEE;
background-image: url('images/progress.png');
background-size: 16px 16px;
@@ -90,6 +92,7 @@
}
.transfer .progress .bar {
display: none;
background: #A3D655;
position: absolute;
top: 0;
@@ -98,32 +101,35 @@
width: 0;
}
.savable.transfer {
.transfer.in-progress .progress .bar {
display: initial;
}
.transfer.savable {
cursor: pointer;
}
.savable.transfer:hover .progress {
border-color: black;
}
.savable.transfer .filename {
.transfer.savable .filename {
color: blue;
text-decoration: underline;
}
.error.transfer {
.transfer.error {
background: #FDD;
}
.error.transfer .progress {
border-color: rgba(0, 0, 0, 0.125);
}
.error.transfer .text,
.error.transfer .progress .bar {
.transfer.error .text,
.transfer.error .progress .bar {
display: none;
}
.error-text {
margin-bottom: 0;
.transfer .error-text {
display: none;
}
.transfer.error .error-text {
display: block;
margin: 0;
margin-top: 0.5em;
width: 100%;
}

13
guacamole/src/main/webapp/app/client/templates/client.html
View File

@@ -52,6 +52,11 @@
</div>
</div>
<!-- File transfers -->
<div id="file-transfer-dialog" ng-show="hasTransfers()">
<guac-file-transfer-manager client="client"></guac-file-transfer-manager>
</div>
<!-- Menu -->
<div class="menu" ng-class="{open: menu.shown}" id="guac-menu">
<div class="menu-content">
@@ -84,14 +89,6 @@
</div>
</div>
<!-- File transfers -->
<div class="menu-section" id="file-transfers">
<h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
<div class="content">
<guac-file-transfer-manager client="client"></guac-file-transfer-manager>
</div>
</div>
<!-- Input method -->
<div class="menu-section" id="keyboard-settings">
<h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>

21
guacamole/src/main/webapp/app/client/templates/guacFileTransfer.html
View File

@@ -21,18 +21,23 @@
THE SOFTWARE.
-->
<!-- Filename -->
<div class="filename">{{transfer.filename}}</div>
<!-- Overall status of transfer -->
<div class="transfer-status">
<!-- Filename and progress bar -->
<div class="filename">
<div class="progress"><div ng-style="{'width': getPercentDone() + '%'}" class="bar"></div></div>
{{transfer.filename}}
</div>
<!-- Error text -->
<p class="error-text">{{getErrorText() | translate}}</p>
</div>
<!-- Progress/status text -->
<div class="text"
translate="CLIENT.TEXT_FILE_TRANSFER_PROGRESS"
translate-values="{PROGRESS: getProgressValue(), UNIT: getProgressUnit()}"></div>
<!-- Progress bar -->
<div class="progress"><div ng-style="{'width': getPercentDone() + '%'}" class="bar"></div></div>
<!-- Error text -->
<p class="error-text" ng-show="hasError()">{{getErrorText() | translate}}</p>
</div>

28
guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html
View File

@@ -21,23 +21,21 @@
THE SOFTWARE.
-->
<!-- No transfers currently present -->
<p class="no-transfers" ng-hide="hasTransfers()">{{'CLIENT.INFO_NO_FILE_TRANSFERS' | translate}}</p>
<!-- Sent files -->
<div ng-repeat="upload in client.uploads">
<guac-file-transfer transfer="upload"></guac-file-transfer>
<!-- File transfer manager header -->
<div class="header">
<h2>{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h2>
<button ng-click="clearCompletedTransfers()">{{'CLIENT.ACTION_CLEAR_COMPLETED_TRANSFERS' | translate}}</button>
</div>
<!-- Received files -->
<div ng-repeat="download in client.downloads">
<guac-file-transfer transfer="download"></guac-file-transfer>
</div>
<!-- Form buttons -->
<div class="action-buttons">
<a class="upload button" guac-upload="uploadFiles">{{'CLIENT.ACTION_UPLOAD_FILES' | translate}}</a>
<a class="button" ng-click="clearCompletedTransfers()">{{'CLIENT.ACTION_CLEAR_COMPLETED_TRANSFERS' | translate}}</a>
<!-- Sent/received files files -->
<div class="transfers">
<guac-file-transfer
transfer="upload"
ng-repeat="upload in client.uploads">
</guac-file-transfer><guac-file-transfer
transfer="download"
ng-repeat="download in client.downloads">
</guac-file-transfer>
</div>
</div>