From a902155a59958e1ed292d8d637fa6e48574dec51 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Tue, 25 Jun 2013 13:21:59 -0700
Subject: [PATCH] Clean up notification, add animated progress indicator.

---
 guacamole/src/main/webapp/images/progress.png | Bin 0 -> 473 bytes
 .../src/main/webapp/scripts/client-ui.js      |  20 ++++++++++--
 guacamole/src/main/webapp/styles/client.css   |  29 +++++++++++++++++-
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 guacamole/src/main/webapp/images/progress.png

diff --git a/guacamole/src/main/webapp/images/progress.png b/guacamole/src/main/webapp/images/progress.png
new file mode 100644
index 0000000000000000000000000000000000000000..72e0495bbac0d6d4b97a5dc65914cf3c7c620b8a
GIT binary patch
literal 473
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=Y)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmP)o20Os(N&-JOrVftiEBiObAE1aYF-J0b5UwyNotBh
zd1gt5g1e`0KzJjcI0FNtqo<2wNX4zEw|Da%HsEo+n7#CyRGh+Z{YR#g7=u{YdJg!h
zxXVxK-`iEpSayZwj^=#PiiGsEgq@!ZG#{^L;b_(872t~(Qc$rocZjI*Yq;<up7GG*
z{j3uX%x9f&P@Z+dp?bCnhu<@MJYvi{5G=}XkeI#eQDbS)G3I_x$^2B-wuibb5?%7L
z2^MuJ48lJG8P7a$XEA7fFMB{{Upm9&A90Ll9#yj#^ybSRu-TW&ApRqa@y>&2mV(yx
zvIk`Mr7=wZ5yg1tQ8r6K?|<`#>Oc03P7l_zaWwB2QV`i^;$TtZ*)ZY99frh@mW)o1
z>sdMa|BE>=)r&c>)r&ZA{g-s$+t07id7tUTqldMsYTfM5mh`YsThens%t7qFa>GyV
zD@%IvB@di^TNrd~JI8}}uWU3QXR{UjzOMkJSqlDNR?&RS7*~0@e)~<CZwbH<XYh3O
Kb6Mw<&;$Sm?66n>

literal 0
HcmV?d00001

diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js
index 6df1e0bee..162fe6961 100644
--- a/guacamole/src/main/webapp/scripts/client-ui.js
+++ b/guacamole/src/main/webapp/scripts/client-ui.js
@@ -773,16 +773,32 @@ GuacUI.Client.attach = function(guac) {
      * Prompt to download file when file received.
      */
 
+    function getSizeString(bytes) {
+
+        if (bytes > 1000000000)
+            return Math.round(bytes / 100000000)/10 + " GB";
+
+        else if (bytes > 1000000)
+            return Math.round(bytes / 100000)/10 + " MB";
+
+        else if (bytes > 1000)
+            return Math.round(bytes / 100)/10 + " KB";
+
+        else
+            return bytes + " B";
+
+    }
+
     guac.onblob = function(blob) {
 
         var download = new GuacUI.Download(blob.name);
-        download.updateProgress("0");
+        download.updateProgress(getSizeString(0));
 
         document.body.appendChild(download.getElement());
 
         // Update progress as data is received
         blob.ondata = function() {
-            download.updateProgress(blob.getLength());
+            download.updateProgress(getSizeString(blob.getLength()));
         };
 
         // When complete, prompt for download
diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index 974cebffb..9a2db6d76 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -316,14 +316,41 @@ p.hint {
     color: silver;
 }
 
+@keyframes progress {
+    from {background-position-x: 0px;}
+    to   {background-position-x: 64px;}
+}
+
+@-webkit-keyframes progress {
+    from {background-position-x: 0px;}
+    to   {background-position-x: 64px;}
+}
+
 .download.notification .progress {
+    
     margin-left: 0.75em;
     padding: 0.25em;
     min-width: 5em;
     border: 1px solid gray;
-    background: #444;
     border-radius: 0.2em;
     text-align: center;
+
+    background: #444 url('../images/progress.png');
+    background-size: 16px 16px;
+    -moz-background-size: 16px 16px;
+    -webkit-background-size: 16px 16px;
+    -khtml-background-size: 16px 16px;
+
+    animation-name: progress;
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+
+    -webkit-animation-name: progress;
+    -webkit-animation-duration: 2s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+
 }
 
 .download.notification .download {