Upload progress bar now displays informations about uploades size (12kB of 3MB) and the current speed.
This commit is contained in:
parent
c920ca32e8
commit
03a34235e0
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue