From e6886f7bbfeb70a3b65845992aa3438f69e30a81 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Fri, 3 Jul 2015 16:16:55 -0700 Subject: [PATCH] GUAC-1172: Move file transfer manager to corner of client display. --- .../client/controllers/clientController.js | 29 +++++---- .../directives/guacFileTransferManager.js | 38 ------------ .../client/styles/file-transfer-dialog.css | 40 ++++++++++++ .../app/client/styles/transfer-manager.css | 35 ++++++----- .../webapp/app/client/styles/transfer.css | 62 ++++++++++--------- .../webapp/app/client/templates/client.html | 13 ++-- .../client/templates/guacFileTransfer.html | 21 ++++--- .../templates/guacFileTransferManager.html | 28 ++++----- .../src/main/webapp/translations/en.json | 2 +- .../src/main/webapp/translations/fr.json | 2 +- .../src/main/webapp/translations/nl.json | 2 +- .../src/main/webapp/translations/ru.json | 2 +- 12 files changed, 147 insertions(+), 127 deletions(-) create mode 100644 guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js index 3082a5709..e13a4cdf5 100644 --- a/guacamole/src/main/webapp/app/client/controllers/clientController.js +++ b/guacamole/src/main/webapp/app/client/controllers/clientController.js @@ -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() { diff --git a/guacamole/src/main/webapp/app/client/directives/guacFileTransferManager.js b/guacamole/src/main/webapp/app/client/directives/guacFileTransferManager.js index d49e94288..48cfaf06a 100644 --- a/guacamole/src/main/webapp/app/client/directives/guacFileTransferManager.js +++ b/guacamole/src/main/webapp/app/client/directives/guacFileTransferManager.js @@ -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]); - - }; - }] }; diff --git a/guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css b/guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css new file mode 100644 index 000000000..52c00d65c --- /dev/null +++ b/guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css @@ -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); +} diff --git a/guacamole/src/main/webapp/app/client/styles/transfer-manager.css b/guacamole/src/main/webapp/app/client/styles/transfer-manager.css index e2b9c5f0d..3d2eb8045 100644 --- a/guacamole/src/main/webapp/app/client/styles/transfer-manager.css +++ b/guacamole/src/main/webapp/app/client/styles/transfer-manager.css @@ -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%; } diff --git a/guacamole/src/main/webapp/app/client/styles/transfer.css b/guacamole/src/main/webapp/app/client/styles/transfer.css index a927ce083..b3b7c427a 100644 --- a/guacamole/src/main/webapp/app/client/styles/transfer.css +++ b/guacamole/src/main/webapp/app/client/styles/transfer.css @@ -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%; } diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 98db5470a..b2292ed6e 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -52,6 +52,11 @@ + +
+ +
+ - - - diff --git a/guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html b/guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html index 964294e7c..7de41078a 100644 --- a/guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html +++ b/guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html @@ -21,23 +21,21 @@ THE SOFTWARE. --> - -

{{'CLIENT.INFO_NO_FILE_TRANSFERS' | translate}}

- - -
- + +
+

{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}

+
- -
- -
- - -
- {{'CLIENT.ACTION_UPLOAD_FILES' | translate}} - {{'CLIENT.ACTION_CLEAR_COMPLETED_TRANSFERS' | translate}} + +
+ + +
diff --git a/guacamole/src/main/webapp/translations/en.json b/guacamole/src/main/webapp/translations/en.json index a301e2689..6b15d2a47 100644 --- a/guacamole/src/main/webapp/translations/en.json +++ b/guacamole/src/main/webapp/translations/en.json @@ -41,7 +41,7 @@ "CLIENT" : { "ACTION_ACKNOWLEDGE" : "@:APP.ACTION_ACKNOWLEDGE", - "ACTION_CLEAR_COMPLETED_TRANSFERS" : "Clear Completed Transfers", + "ACTION_CLEAR_COMPLETED_TRANSFERS" : "Clear", "ACTION_DISCONNECT" : "Disconnect", "ACTION_NAVIGATE_BACK" : "@:APP.ACTION_NAVIGATE_BACK", "ACTION_NAVIGATE_HOME" : "@:APP.ACTION_NAVIGATE_HOME", diff --git a/guacamole/src/main/webapp/translations/fr.json b/guacamole/src/main/webapp/translations/fr.json index a623ed7b2..e1f5f1908 100644 --- a/guacamole/src/main/webapp/translations/fr.json +++ b/guacamole/src/main/webapp/translations/fr.json @@ -39,7 +39,7 @@ "CLIENT" : { "ACTION_ACKNOWLEDGE" : "@:APP.ACTION_ACKNOWLEDGE", - "ACTION_CLEAR_COMPLETED_TRANSFERS" : "Vider transferts terminés", + "ACTION_CLEAR_COMPLETED_TRANSFERS" : "Vider", "ACTION_DISCONNECT" : "Déconnecter", "ACTION_NAVIGATE_BACK" : "@:APP.ACTION_NAVIGATE_BACK", "ACTION_NAVIGATE_HOME" : "@:APP.ACTION_NAVIGATE_HOME", diff --git a/guacamole/src/main/webapp/translations/nl.json b/guacamole/src/main/webapp/translations/nl.json index 5470d2868..40021f140 100644 --- a/guacamole/src/main/webapp/translations/nl.json +++ b/guacamole/src/main/webapp/translations/nl.json @@ -41,7 +41,7 @@ "CLIENT" : { "ACTION_ACKNOWLEDGE" : "@:APP.ACTION_ACKNOWLEDGE", - "ACTION_CLEAR_COMPLETED_TRANSFERS" : "Wis lijst Voltooide Overdrachten", + "ACTION_CLEAR_COMPLETED_TRANSFERS" : "Wis lijst", "ACTION_DISCONNECT" : "Verbreek Verbinding", "ACTION_NAVIGATE_BACK" : "@:APP.ACTION_NAVIGATE_BACK", "ACTION_NAVIGATE_HOME" : "@:APP.ACTION_NAVIGATE_HOME", diff --git a/guacamole/src/main/webapp/translations/ru.json b/guacamole/src/main/webapp/translations/ru.json index a5c2fa5ae..9d2def73e 100644 --- a/guacamole/src/main/webapp/translations/ru.json +++ b/guacamole/src/main/webapp/translations/ru.json @@ -40,7 +40,7 @@ "CLIENT" : { "ACTION_ACKNOWLEDGE" : "@:APP.ACTION_ACKNOWLEDGE", - "ACTION_CLEAR_COMPLETED_TRANSFERS" : "Очистить завершенные загрузки", + "ACTION_CLEAR_COMPLETED_TRANSFERS" : "Очистить", "ACTION_DISCONNECT" : "Отключиться", "ACTION_NAVIGATE_BACK" : "@:APP.ACTION_NAVIGATE_BACK", "ACTION_NAVIGATE_HOME" : "@:APP.ACTION_NAVIGATE_HOME",