Add progress bar.

guacamole/src/main/webapp/scripts/client-ui.js

@@ -1088,7 +1088,7 @@ GuacUI.Client.attach = function(guac) {
 
             // Add upload notification
             var upload = new GuacUI.Upload(file.name);
-            upload.updateProgress(getSizeString(0));
+            upload.updateProgress(getSizeString(0), 0);
 
             GuacUI.Client.notification_area.appendChild(upload.getElement());
 
@@ -1129,7 +1129,7 @@ GuacUI.Client.attach = function(guac) {
 
                 // Otherwise, update progress
                 else
-                    upload.updateProgress(getSizeString(offset));
+                    upload.updateProgress(getSizeString(offset), offset / bytes.length * 100);
 
             };
 

guacamole/src/main/webapp/scripts/guac-ui.js

@@ -852,13 +852,27 @@ GuacUI.Upload = function(filename) {
      */
     var progress = GuacUI.createChildElement(element, "div", "progress");
 
+    /**
+     * The actual moving bar within the progress bar.
+     * @private
+     */
+    var bar = GuacUI.createChildElement(progress, "div", "bar");
+
+    /**
+     * The textual readout of progress.
+     * @private
+     */
+    var progress_status = GuacUI.createChildElement(progress, "div");
+
     /**
      * Updates the content of the progress indicator with the given text.
      * 
      * @param {String} text The text to assign to the progress indicator.
+     * @param {Number} percent The overall percent complete.
      */
-    this.updateProgress = function(text) {
-        progress.textContent = text;
+    this.updateProgress = function(text, percent) {
+        progress_status.textContent = text;
+        bar.style.width = percent + "%";
     };
 
     /**

guacamole/src/main/webapp/styles/client.css

@@ -298,6 +298,7 @@ p.hint {
 .notification {
 
     font-size: 0.9em;
+    text-align: center;
     
     border: 1px solid rgba(255, 255, 255, 0.25);
     background: black;
@@ -315,6 +316,7 @@ p.hint {
 
 .notification div {
     display: inline-block;
+    text-align: left;
 }
 
 .notification .title-bar {
@@ -378,8 +380,7 @@ p.hint {
 
 .download.notification .progress,
 .upload.notification .progress,
-.download.notification .download,
-.upload.notification .upload {
+.download.notification .download {
 
     margin-top: 1em;
     margin-left: 0.75em;
@@ -392,6 +393,32 @@ p.hint {
     text-align: center;
     float: right;
 
+    position: relative;
+    
+}
+
+.upload.notification .progress {
+    float: none;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.download.notification .progress div,
+.upload.notification .progress div {
+    position: relative;
+}
+
+.download.notification .progress .bar,
+.upload.notification .progress .bar {
+    background: #048;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0;
+    box-shadow: inset  1px  1px 2px rgba(255, 255, 255, 0.5),
+                inset -1px -1px 2px rgba(  0,   0,   0, 0.5);
 }
 
 .upload.notification .progress,
@@ -415,7 +442,6 @@ p.hint {
 
 }
 
-.upload.notification .upload,
 .download.notification .download {
     background: rgb(16, 87, 153);
     cursor: pointer;