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;
|
width: 200px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
display:inline-block;
|
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 {
|
#uploadprogressbar + stop {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oc-dialog .fileexists table {
|
.oc-dialog .fileexists table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -181,6 +181,7 @@ OC.Upload = {
|
||||||
|
|
||||||
_hideProgressBar: function() {
|
_hideProgressBar: function() {
|
||||||
$('#uploadprogresswrapper input.stop').fadeOut();
|
$('#uploadprogresswrapper input.stop').fadeOut();
|
||||||
|
$('#uploadprogresswrapper .percents').fadeOut();
|
||||||
$('#uploadprogressbar').fadeOut(function() {
|
$('#uploadprogressbar').fadeOut(function() {
|
||||||
$('#file_upload_start').trigger(new $.Event('resized'));
|
$('#file_upload_start').trigger(new $.Event('resized'));
|
||||||
});
|
});
|
||||||
|
@ -454,7 +455,10 @@ OC.Upload = {
|
||||||
fileupload.on('fileuploadstart', function(e, data) {
|
fileupload.on('fileuploadstart', function(e, data) {
|
||||||
OC.Upload.log('progress handle fileuploadstart', e, data);
|
OC.Upload.log('progress handle fileuploadstart', e, data);
|
||||||
$('#uploadprogresswrapper input.stop').show();
|
$('#uploadprogresswrapper input.stop').show();
|
||||||
|
$('#uploadprogresswrapper .percents').show();
|
||||||
|
$('#uploadprogresswrapper .label').show();
|
||||||
$('#uploadprogressbar').progressbar({value: 0});
|
$('#uploadprogressbar').progressbar({value: 0});
|
||||||
|
$('#uploadprogressbar .ui-progressbar-value').html('<em class="label inner">Uploading...</em>');
|
||||||
OC.Upload._showProgressBar();
|
OC.Upload._showProgressBar();
|
||||||
});
|
});
|
||||||
fileupload.on('fileuploadprogress', function(e, data) {
|
fileupload.on('fileuploadprogress', function(e, data) {
|
||||||
|
@ -464,11 +468,12 @@ OC.Upload = {
|
||||||
fileupload.on('fileuploadprogressall', function(e, data) {
|
fileupload.on('fileuploadprogressall', function(e, data) {
|
||||||
OC.Upload.log('progress handle fileuploadprogressall', e, data);
|
OC.Upload.log('progress handle fileuploadprogressall', e, data);
|
||||||
var progress = (data.loaded / data.total) * 100;
|
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);
|
$('#uploadprogressbar').progressbar('value', progress);
|
||||||
});
|
});
|
||||||
fileupload.on('fileuploadstop', function(e, data) {
|
fileupload.on('fileuploadstop', function(e, data) {
|
||||||
OC.Upload.log('progress handle fileuploadstop', e, data);
|
OC.Upload.log('progress handle fileuploadstop', e, data);
|
||||||
|
|
||||||
OC.Upload._hideProgressBar();
|
OC.Upload._hideProgressBar();
|
||||||
});
|
});
|
||||||
fileupload.on('fileuploadfail', function(e, data) {
|
fileupload.on('fileuploadfail', function(e, data) {
|
||||||
|
|
|
@ -37,9 +37,11 @@
|
||||||
<a href="#" class="svg icon-upload"></a>
|
<a href="#" class="svg icon-upload"></a>
|
||||||
</div>
|
</div>
|
||||||
<div id="uploadprogresswrapper">
|
<div id="uploadprogresswrapper">
|
||||||
<div id="uploadprogressbar"></div>
|
<div id="uploadprogressbar">
|
||||||
<input type="button" class="stop icon-close"
|
<em class="label outer" style="display:none">Uploading...</em>
|
||||||
style="display:none" value="" />
|
</div>
|
||||||
|
<div style="display:none" class="percents"></div>
|
||||||
|
<input type="button" class="stop icon-close" style="display:none" value="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="file_action_panel"></div>
|
<div id="file_action_panel"></div>
|
||||||
|
|
Loading…
Reference in New Issue