diff --git a/guacamole/src/main/webapp/images/progress.png b/guacamole/src/main/webapp/images/progress.png new file mode 100644 index 000000000..72e0495bb Binary files /dev/null and b/guacamole/src/main/webapp/images/progress.png differ 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 {