From 03a34235e05263fef239af54369f007d8db96257 Mon Sep 17 00:00:00 2001 From: luckydonald Date: Sun, 10 Aug 2014 22:26:03 +0200 Subject: Upload progress bar now displays informations about uploades size (12kB of 3MB) and the current speed. --- apps/files/css/upload.css | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) (limited to 'apps/files/css') diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index bdc258b5064..1b572963ff3 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -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%; } -- cgit v1.2.3 From 19efa259e9846555c06f08560ab01328c5422b99 Mon Sep 17 00:00:00 2001 From: luckydonald Date: Sun, 10 Aug 2014 23:45:06 +0200 Subject: Fixed translations, indentation and renamed the .percents class to .speed class. --- apps/files/css/upload.css | 4 ++-- apps/files/js/file-upload.js | 10 +++++----- apps/files/templates/list.php | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) (limited to 'apps/files/css') diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index 1b572963ff3..71b8b580462 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -59,7 +59,7 @@ width: 200px; height: 36px; display:inline-block; - text-align: center; + text-align: center; } #uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left { height: 100%; @@ -83,7 +83,7 @@ position: relative; color: black; } -#uploadprogresswrapper .percents{ +#uploadprogresswrapper .speed{ margin-left: 3px; font-size: 13px; display:inline-block; diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 36bdc589745..4dc7d0be30f 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -181,7 +181,7 @@ OC.Upload = { _hideProgressBar: function() { $('#uploadprogresswrapper input.stop').fadeOut(); - $('#uploadprogresswrapper .percents').fadeOut(); + $('#uploadprogresswrapper .speed').fadeOut(); $('#uploadprogressbar').fadeOut(function() { $('#file_upload_start').trigger(new $.Event('resized')); }); @@ -455,10 +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 .speed').show(); $('#uploadprogresswrapper .label').show(); $('#uploadprogressbar').progressbar({value: 0}); - $('#uploadprogressbar .ui-progressbar-value').html('Uploading...'); + $('#uploadprogressbar .ui-progressbar-value').html('' + t('files', 'Uploading...') + ''); OC.Upload._showProgressBar(); }); fileupload.on('fileuploadprogress', function(e, data) { @@ -468,8 +468,8 @@ 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 .label').text(t('files', '{loadedSize} of {totalSize}', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total)})); + $('#uploadprogresswrapper .speed').text(t('files', '{bitrate}/s', {bitrate: humanFileSize(data.bitrate)})); $('#uploadprogressbar').progressbar('value', progress); }); fileupload.on('fileuploadstop', function(e, data) { diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index a25172679a2..af616d71c19 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -38,10 +38,10 @@
- +
- - + +
-- cgit v1.2.3 From 7fc574cc537fe295cc6821765a5cf675b6c740fd Mon Sep 17 00:00:00 2001 From: luckydonald Date: Mon, 11 Aug 2014 02:37:01 +0200 Subject: Updated and optimized Mobile Layout as well. --- apps/files/css/mobile.css | 10 +++++++++- apps/files/css/upload.css | 6 ++++++ apps/files/js/file-upload.js | 5 +++-- apps/files/templates/list.php | 2 +- 4 files changed, 19 insertions(+), 4 deletions(-) (limited to 'apps/files/css') diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 780b7ac8443..3c77bba3a88 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -79,7 +79,15 @@ table td.filename .nametext .innernametext { } /* shorten elements for mobile */ -#uploadprogressbar { +#uploadprogressbar, #uploadprogressbar .label.inner { width: 50px; } +/* hide desktop-only parts */ +#uploadprogressbar .desktop { + display: none !important; +} +#uploadprogressbar .mobile { + display: block !important; } + +} \ No newline at end of file diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index 71b8b580462..b6e158bf363 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -93,6 +93,12 @@ position: relative; top: 7px; } +#uploadprogressbar .desktop { + display: block; +} +#uploadprogressbar .mobile { + display: none; +} #uploadprogressbar + stop { font-size: 13px; diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 4dc7d0be30f..d3ee64bb50d 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -458,7 +458,7 @@ OC.Upload = { $('#uploadprogresswrapper .speed').show(); $('#uploadprogresswrapper .label').show(); $('#uploadprogressbar').progressbar({value: 0}); - $('#uploadprogressbar .ui-progressbar-value').html('' + t('files', 'Uploading...') + ''); + $('#uploadprogressbar .ui-progressbar-value').html('' + t('files', 'Uploading...') + '' + t('files', '...') + ''); OC.Upload._showProgressBar(); }); fileupload.on('fileuploadprogress', function(e, data) { @@ -468,7 +468,8 @@ 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(t('files', '{loadedSize} of {totalSize}', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total)})); + $('#uploadprogressbar .label .mobile').text(t('files', '{loadedSize}', {loadedSize: humanFileSize(data.loaded)})); + $('#uploadprogressbar .label .desktop').text(t('files', '{loadedSize} of {totalSize}', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total)})); $('#uploadprogresswrapper .speed').text(t('files', '{bitrate}/s', {bitrate: humanFileSize(data.bitrate)})); $('#uploadprogressbar').progressbar('value', progress); }); diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index af616d71c19..a70dee1a8df 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -38,7 +38,7 @@
- +
-- cgit v1.2.3 From 45aa28c139dd9610badeb3d6a09bc3564c3811ba Mon Sep 17 00:00:00 2001 From: luckydonald Date: Mon, 11 Aug 2014 02:47:57 +0200 Subject: ...in case the text gets to big, don't wrap to new line. Instead just cut it. --- apps/files/css/upload.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'apps/files/css') diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index b6e158bf363..b60db6642e3 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -72,6 +72,8 @@ font-weight: bold; top: 6px; opacity: 1; + overflow: hidden; + white-space: nowrap; } #uploadprogressbar .label.inner { color:white; @@ -92,6 +94,8 @@ text-align: center; position: relative; top: 7px; + overflow: hidden; + white-space: nowrap; } #uploadprogressbar .desktop { display: block; -- cgit v1.2.3 From 159747117ff5af514b71e13caff13e89128ceb6f Mon Sep 17 00:00:00 2001 From: luckydonald Date: Tue, 12 Aug 2014 00:32:46 +0200 Subject: Added remaining time displaying, moved Information to tooltip, removed now unneeded speed div --- apps/files/css/upload.css | 14 +------------- apps/files/js/file-upload.js | 30 ++++++++++++++++++++++++++---- apps/files/templates/list.php | 1 - 3 files changed, 27 insertions(+), 18 deletions(-) (limited to 'apps/files/css') diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index b60db6642e3..48b597aab94 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -69,11 +69,11 @@ overflow: hidden; } #uploadprogressbar .label { - font-weight: bold; top: 6px; opacity: 1; overflow: hidden; white-space: nowrap; + font-weight: normal; } #uploadprogressbar .label.inner { color:white; @@ -85,18 +85,6 @@ position: relative; color: black; } -#uploadprogresswrapper .speed{ - margin-left: 3px; - font-size: 13px; - display:inline-block; - float: left; - width: 5em; - text-align: center; - position: relative; - top: 7px; - overflow: hidden; - white-space: nowrap; -} #uploadprogressbar .desktop { display: block; } diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index d3ee64bb50d..fcc0179090e 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -181,7 +181,6 @@ OC.Upload = { _hideProgressBar: function() { $('#uploadprogresswrapper input.stop').fadeOut(); - $('#uploadprogresswrapper .speed').fadeOut(); $('#uploadprogressbar').fadeOut(function() { $('#file_upload_start').trigger(new $.Event('resized')); }); @@ -442,7 +441,13 @@ OC.Upload = { window.file_upload_param = fileupload; if (supportAjaxUploadWithProgress()) { - + //remaining time + var lastUpdate = new Date().getMilliseconds(); + var lastSize = 0; + var bufferSize = 10; + var buffer = new Array();// = new Array(bufferSize); + var bufferIndex = 0; + var bufferTotal = 0; // add progress handlers fileupload.on('fileuploadadd', function(e, data) { OC.Upload.log('progress handle fileuploadadd', e, data); @@ -455,10 +460,10 @@ OC.Upload = { fileupload.on('fileuploadstart', function(e, data) { OC.Upload.log('progress handle fileuploadstart', e, data); $('#uploadprogresswrapper input.stop').show(); - $('#uploadprogresswrapper .speed').show(); $('#uploadprogresswrapper .label').show(); $('#uploadprogressbar').progressbar({value: 0}); $('#uploadprogressbar .ui-progressbar-value').html('' + t('files', 'Uploading...') + '' + t('files', '...') + ''); + $('#uploadprogressbar').tipsy({gravity:'n', fade:true, live:true}); OC.Upload._showProgressBar(); }); fileupload.on('fileuploadprogress', function(e, data) { @@ -468,9 +473,26 @@ OC.Upload = { fileupload.on('fileuploadprogressall', function(e, data) { OC.Upload.log('progress handle fileuploadprogressall', e, data); var progress = (data.loaded / data.total) * 100; + var thisUpdate = new Date().getMilliseconds(); + var diffUpdate = (thisUpdate - lastUpdate)/1000; // eg. 2s + lastUpdate = thisUpdate; + var diffSize = data.loaded - lastSize; + lastSize = data.loaded; + diffSize = diffSize / diffUpdate; // apply timing factor, eg. 1mb/2s = 0.5mb/s + var remainingSeconds = ((data.total - data.loaded) / diffSize); + if(remainingSeconds>0){ //buffer to make it smoother + bufferTotal = bufferTotal - (buffer[bufferIndex]||0) + remainingSeconds; + buffer[bufferIndex] = remainingSeconds; + bufferIndex = (bufferIndex + 1) % bufferSize; + } + var smoothRemaining = (bufferTotal/bufferSize); + var date = new Date(smoothRemaining * 1000); + var stringRemaining = (date.getUTCHours() > 0 ? ('0' + date.getUTCHours()).slice(-2) + ':':'') + + ('0' + date.getUTCMinutes()).slice(-2) + ':' + + ('0' + date.getUTCSeconds()).slice(-2); $('#uploadprogressbar .label .mobile').text(t('files', '{loadedSize}', {loadedSize: humanFileSize(data.loaded)})); $('#uploadprogressbar .label .desktop').text(t('files', '{loadedSize} of {totalSize}', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total)})); - $('#uploadprogresswrapper .speed').text(t('files', '{bitrate}/s', {bitrate: humanFileSize(data.bitrate)})); + $('#uploadprogressbar').attr('title', t('files', '{bitrate}. {timeRemaining} seconds remaining.', {timeRemaining: stringRemaining, bitrate: humanFileSize(data.bitrate) + '/s'})); $('#uploadprogressbar').progressbar('value', progress); }); fileupload.on('fileuploadstop', function(e, data) { diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index a70dee1a8df..83da98fa2cf 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -40,7 +40,6 @@
-
-- cgit v1.2.3 From 5e86ff6d8543897221b87e1e1b64f3603e7faac1 Mon Sep 17 00:00:00 2001 From: luckydonald Date: Wed, 13 Aug 2014 11:40:36 +0200 Subject: Fixed Positioning, fixed formatting for both mobile and desktop. Tooltips still frustrate me- And the updated code with tabs nicely. yay. --- apps/files/css/upload.css | 6 +++--- apps/files/js/file-upload.js | 43 +++++++++++++++++++++++++++++++++++++------ 2 files changed, 40 insertions(+), 9 deletions(-) (limited to 'apps/files/css') diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index 48b597aab94..2e1ad9226b8 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -71,9 +71,9 @@ #uploadprogressbar .label { top: 6px; opacity: 1; - overflow: hidden; - white-space: nowrap; - font-weight: normal; + overflow: hidden; + white-space: nowrap; + font-weight: normal; } #uploadprogressbar .label.inner { color:white; diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index fcc0179090e..564122bd2a9 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -487,12 +487,43 @@ OC.Upload = { } var smoothRemaining = (bufferTotal/bufferSize); var date = new Date(smoothRemaining * 1000); - var stringRemaining = (date.getUTCHours() > 0 ? ('0' + date.getUTCHours()).slice(-2) + ':':'') + - ('0' + date.getUTCMinutes()).slice(-2) + ':' + - ('0' + date.getUTCSeconds()).slice(-2); - $('#uploadprogressbar .label .mobile').text(t('files', '{loadedSize}', {loadedSize: humanFileSize(data.loaded)})); - $('#uploadprogressbar .label .desktop').text(t('files', '{loadedSize} of {totalSize}', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total)})); - $('#uploadprogressbar').attr('title', t('files', '{bitrate}. {timeRemaining} seconds remaining.', {timeRemaining: stringRemaining, bitrate: humanFileSize(data.bitrate) + '/s'})); + var timeStringMobile = ""; + var timeStringDesktop = ""; + if(date.getUTCHours()>0){ + timeStringDesktop = t('files', '{hours}:{minutes}:{seconds} Hour{plural_s} left' , { + hours:date.getUTCHours(), + minutes: ('0' + date.getUTCMinutes()).slice(-2), + seconds: ('0' + date.getUTCSeconds()).slice(-2), + plural_s: (!(date.getUTCHours()== 1 && date.getUTCMinutes()== 0 && date.getUTCSeconds()== 0) ? "s": "") + }); + timeStringMobile = t('files', '{hours}:{minutes}:{seconds}h' , { + hours:date.getUTCHours(), + minutes: ('0' + date.getUTCMinutes()).slice(-2), + seconds: ('0' + date.getUTCSeconds()).slice(-2) + }); + } else if(date.getUTCMinutes()>0){ + timeStringDesktop = t('files', '{minutes}:{seconds} Minute{plural_s} left' , { + minutes: date.getUTCMinutes(), + seconds: ('0' + date.getUTCSeconds()).slice(-2), + plural_s: (!(date.getUTCMinutes()== 1 && date.getUTCSeconds()== 0)? "s": "") + }); + timeStringMobile = t('files', '{minutes}:{seconds}min' , { + minutes: date.getUTCMinutes(), + seconds: ('0' + date.getUTCSeconds()).slice(-2) + }); + } else if(date.getUTCSeconds()>0){ + timeStringDesktop = t('files', '{seconds} Second{plural_s} left' , { + seconds: date.getUTCSeconds(), + plural_s: (!date.getUTCSeconds()== 1 ? "s": "") + }); + timeStringMobile = t('files', '{seconds}s' , {seconds: date.getUTCSeconds()}); + } else { + timeStringDesktop = t('files', 'Any moment now...'); + timeStringMobile = t('files', 'Soon...'); + } + $('#uploadprogressbar .label .mobile').text(timeStringMobile);//t('files', '{loadedSize}', {loadedSize: humanFileSize(data.loaded)})); + $('#uploadprogressbar .label .desktop').text(timeStringDesktop);// + $('#uploadprogressbar').attr('title', t('files', '{loadedSize} of {totalSize} ({bitrate})', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total), bitrate: humanFileSize(data.bitrate) + '/s'})); $('#uploadprogressbar').progressbar('value', progress); }); fileupload.on('fileuploadstop', function(e, data) { -- cgit v1.2.3 From 69d88500d32cd7a641061fbed420369a4eae3116 Mon Sep 17 00:00:00 2001 From: luckydonald Date: Wed, 13 Aug 2014 13:06:00 +0200 Subject: Updated String formatting. Label font-weight was already normal. --- apps/files/css/upload.css | 2 +- apps/files/js/file-upload.js | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) (limited to 'apps/files/css') diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index 2e1ad9226b8..e6b4b4f8703 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -73,7 +73,7 @@ opacity: 1; overflow: hidden; white-space: nowrap; - font-weight: normal; + font-weight: normal; } #uploadprogressbar .label.inner { color:white; diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 564122bd2a9..874e88ef1cb 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -490,39 +490,39 @@ OC.Upload = { var timeStringMobile = ""; var timeStringDesktop = ""; if(date.getUTCHours()>0){ - timeStringDesktop = t('files', '{hours}:{minutes}:{seconds} Hour{plural_s} left' , { + timeStringDesktop = t('files', '{hours}:{minutes}:{seconds} hour{plural_s} left' , { hours:date.getUTCHours(), minutes: ('0' + date.getUTCMinutes()).slice(-2), seconds: ('0' + date.getUTCSeconds()).slice(-2), - plural_s: (!(date.getUTCHours()== 1 && date.getUTCMinutes()== 0 && date.getUTCSeconds()== 0) ? "s": "") + plural_s: (date.getUTCHours()== 1 && date.getUTCMinutes()== 0 && date.getUTCSeconds()== 0 ? "": "s") }); - timeStringMobile = t('files', '{hours}:{minutes}:{seconds}h' , { + timeStringMobile = t('files', '{hours}:{minutes}h' , { hours:date.getUTCHours(), minutes: ('0' + date.getUTCMinutes()).slice(-2), seconds: ('0' + date.getUTCSeconds()).slice(-2) }); } else if(date.getUTCMinutes()>0){ - timeStringDesktop = t('files', '{minutes}:{seconds} Minute{plural_s} left' , { + timeStringDesktop = t('files', '{minutes}:{seconds} minute{plural_s} left' , { minutes: date.getUTCMinutes(), seconds: ('0' + date.getUTCSeconds()).slice(-2), - plural_s: (!(date.getUTCMinutes()== 1 && date.getUTCSeconds()== 0)? "s": "") + plural_s: (date.getUTCMinutes()== 1 && date.getUTCSeconds()== 0 ? "": "s") }); - timeStringMobile = t('files', '{minutes}:{seconds}min' , { + timeStringMobile = t('files', '{minutes}:{seconds}m' , { minutes: date.getUTCMinutes(), seconds: ('0' + date.getUTCSeconds()).slice(-2) }); } else if(date.getUTCSeconds()>0){ - timeStringDesktop = t('files', '{seconds} Second{plural_s} left' , { + timeStringDesktop = t('files', '{seconds} second{plural_s} left' , { seconds: date.getUTCSeconds(), - plural_s: (!date.getUTCSeconds()== 1 ? "s": "") + plural_s: (date.getUTCSeconds() == 1 ? "": "s") }); timeStringMobile = t('files', '{seconds}s' , {seconds: date.getUTCSeconds()}); } else { timeStringDesktop = t('files', 'Any moment now...'); timeStringMobile = t('files', 'Soon...'); } - $('#uploadprogressbar .label .mobile').text(timeStringMobile);//t('files', '{loadedSize}', {loadedSize: humanFileSize(data.loaded)})); - $('#uploadprogressbar .label .desktop').text(timeStringDesktop);// + $('#uploadprogressbar .label .mobile').text(timeStringMobile); + $('#uploadprogressbar .label .desktop').text(timeStringDesktop); $('#uploadprogressbar').attr('title', t('files', '{loadedSize} of {totalSize} ({bitrate})', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total), bitrate: humanFileSize(data.bitrate) + '/s'})); $('#uploadprogressbar').progressbar('value', progress); }); -- cgit v1.2.3