safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-07 05:31:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add progress bar.

Browse Source
This commit is contained in:
Michael Jumper
2013-10-15 15:49:09 -07:00
parent 47dcada639
commit 5ba188abf4
3 changed files with 47 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
guacamole/src/main/webapp/scripts/client-ui.js
View File

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

18
guacamole/src/main/webapp/scripts/guac-ui.js
View File

@@ -852,13 +852,27 @@ GuacUI.Upload = function(filename) {
*/ */
var progress = GuacUI.createChildElement(element, "div", "progress"); 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. * Updates the content of the progress indicator with the given text.
* *
* @param {String} text The text to assign to the progress indicator. * @param {String} text The text to assign to the progress indicator.
* @param {Number} percent The overall percent complete.
*/ */
this.updateProgress = function(text) { this.updateProgress = function(text, percent) {
progress.textContent = text; progress_status.textContent = text;
bar.style.width = percent + "%";
}; };
/** /**

32
guacamole/src/main/webapp/styles/client.css
View File

@@ -298,6 +298,7 @@ p.hint {
.notification { .notification {
font-size: 0.9em; font-size: 0.9em;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.25);
background: black; background: black;
@@ -315,6 +316,7 @@ p.hint {
.notification div { .notification div {
display: inline-block; display: inline-block;
text-align: left;
} }
.notification .title-bar { .notification .title-bar {
@@ -378,8 +380,7 @@ p.hint {
.download.notification .progress, .download.notification .progress,
.upload.notification .progress, .upload.notification .progress,
.download.notification .download, .download.notification .download {
.upload.notification .upload {
margin-top: 1em; margin-top: 1em;
margin-left: 0.75em; margin-left: 0.75em;
@@ -392,6 +393,32 @@ p.hint {
text-align: center; text-align: center;
float: right; 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, .upload.notification .progress,
@@ -415,7 +442,6 @@ p.hint {
} }
.upload.notification .upload,
.download.notification .download { .download.notification .download {
background: rgb(16, 87, 153); background: rgb(16, 87, 153);
cursor: pointer; cursor: pointer;