Upload progress bar now displays informations about uploades size (12kB of 3MB) and the current speed.

This commit is contained in:
luckydonald 2014-08-10 22:26:03 +02:00
parent c920ca32e8
commit 03a34235e0
3 changed files with 45 additions and 5 deletions

View File

@ -59,11 +59,44 @@
width: 200px;
height: 36px;
display:inline-block;
text-align: center;
}
#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
height: 100%;
top: 0px;
left: 0px;
position: absolute;
overflow: hidden;
}
#uploadprogressbar .label {
font-weight: bold;
top: 6px;
opacity: 1;
}
#uploadprogressbar .label.inner {
color:white;
position: absolute;
display: block;
width: 200px;
}
#uploadprogressbar .label.outer {
position: relative;
color: black;
}
#uploadprogresswrapper .percents{
margin-left: 3px;
font-size: 13px;
display:inline-block;
float: left;
width: 5em;
text-align: center;
position: relative;
top: 7px;
}
#uploadprogressbar + stop {
font-size: 13px;
}
.oc-dialog .fileexists table {
width: 100%;
}

View File

@ -181,6 +181,7 @@ OC.Upload = {
_hideProgressBar: function() {
$('#uploadprogresswrapper input.stop').fadeOut();
$('#uploadprogresswrapper .percents').fadeOut();
$('#uploadprogressbar').fadeOut(function() {
$('#file_upload_start').trigger(new $.Event('resized'));
});
@ -454,7 +455,10 @@ OC.Upload = {
fileupload.on('fileuploadstart', function(e, data) {
OC.Upload.log('progress handle fileuploadstart', e, data);
$('#uploadprogresswrapper input.stop').show();
$('#uploadprogresswrapper .percents').show();
$('#uploadprogresswrapper .label').show();
$('#uploadprogressbar').progressbar({value: 0});
$('#uploadprogressbar .ui-progressbar-value').html('<em class="label inner">Uploading...</em>');
OC.Upload._showProgressBar();
});
fileupload.on('fileuploadprogress', function(e, data) {
@ -464,11 +468,12 @@ OC.Upload = {
fileupload.on('fileuploadprogressall', function(e, data) {
OC.Upload.log('progress handle fileuploadprogressall', e, data);
var progress = (data.loaded / data.total) * 100;
$('#uploadprogressbar .label').text(humanFileSize(data.loaded) + " of " + humanFileSize(data.total));
$('#uploadprogresswrapper .percents').text(humanFileSize(data.bitrate) + '/s')
$('#uploadprogressbar').progressbar('value', progress);
});
fileupload.on('fileuploadstop', function(e, data) {
OC.Upload.log('progress handle fileuploadstop', e, data);
OC.Upload._hideProgressBar();
});
fileupload.on('fileuploadfail', function(e, data) {

View File

@ -37,9 +37,11 @@
<a href="#" class="svg icon-upload"></a>
</div>
<div id="uploadprogresswrapper">
<div id="uploadprogressbar"></div>
<input type="button" class="stop icon-close"
style="display:none" value="" />
<div id="uploadprogressbar">
<em class="label outer" style="display:none">Uploading...</em>
</div>
<div style="display:none" class="percents"></div>
<input type="button" class="stop icon-close" style="display:none" value="" />
</div>
</div>
<div id="file_action_panel"></div>