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

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() {
 

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

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

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 {
+.transfer-manager {
-    text-align: center;
+    background: white;
 }
 
-.transfer-manager .no-transfers {
+.transfer-manager .header h2 {
-
+    font-size: 1em;
-    color: rgba(255, 255, 255, 0.5);
+    padding-top: 0;
-    text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
+    padding-bottom: 0;
-    opacity: 0.5;
-    
-    font-size: 2em;
-    font-weight: bolder;
-    text-align: center;
-
 }
 
-.transfer-manager .transfer {
+.transfer-manager .header {
-    margin: 1em;
+    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%;
 }

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%;
+    position: relative;
-    margin-bottom: 0.5em;
     font-family: monospace;
     font-weight: bold;
-}
+    padding: 0.125em;
-
-.transfer .text {
-    position: relative;
-    text-align: center;
-    margin-top: 0.5em;
 }
 
 @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 {
+.transfer.savable .filename {
-    border-color: black;
-}
-
-.savable.transfer .filename {
     color: blue;
     text-decoration: underline;
 }
 
-.error.transfer {
+.transfer.error {
     background: #FDD;
 }
 
-.error.transfer .progress {
+.transfer.error .text,
-    border-color: rgba(0, 0, 0, 0.125);
+.transfer.error .progress .bar {
-}
-
-.error.transfer .text,
-.error.transfer .progress .bar {
     display: none;
 }
 
-.error-text {
+.transfer .error-text {
-    margin-bottom: 0;
+    display: none;
+}
+
+.transfer.error .error-text {
+    display: block;
+    margin: 0;
+    margin-top: 0.5em;
+    width: 100%;
 }

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

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

guacamole/src/main/webapp/app/client/templates/guacFileTransfer.html

@@ -21,18 +21,23 @@
        THE SOFTWARE.
     -->
 
-    <!-- Filename -->
+    <!-- Overall status of transfer -->
-    <div class="filename">{{transfer.filename}}</div>
+    <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>

guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html

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

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",

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",

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",

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",