From b69d76feeedc27a5753ccb6363f666ba9ec121aa Mon Sep 17 00:00:00 2001 From: Christopher Mueller Date: Tue, 31 Mar 2020 10:56:59 +0000 Subject: [PATCH 1/4] Add basic progressbar to public upload page Signed-off-by: Christopher Mueller --- apps/files_sharing/css/public.scss | 4 ++++ apps/files_sharing/js/files_drop.js | 2 ++ apps/files_sharing/js/templates/files_drop.handlebars | 3 ++- apps/files_sharing/templates/public.php | 3 +-- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index a8207167c2..366bc5f5e3 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -161,6 +161,10 @@ thead { margin-right: 7px; } +#drop-uploaded-files li #drop-upload-progress-bar { + margin-top: 7px; +} + .disclaimer, .note { margin: 0 auto 30px; diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index 26bb04a001..c3af5c2206 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -120,9 +120,11 @@ if(progress === 100) { $('#drop-upload-done-indicator').removeClass('hidden'); $('#drop-upload-progress-indicator').addClass('hidden'); + $('#drop-upload-progress-bar').val(100); } else { $('#drop-upload-done-indicator').addClass('hidden'); $('#drop-upload-progress-indicator').removeClass('hidden'); + $('#drop-upload-progress-bar').val(progress); } } }); diff --git a/apps/files_sharing/js/templates/files_drop.handlebars b/apps/files_sharing/js/templates/files_drop.handlebars index b090e82979..d4cc3e85b9 100644 --- a/apps/files_sharing/js/templates/files_drop.handlebars +++ b/apps/files_sharing/js/templates/files_drop.handlebars @@ -1,6 +1,7 @@
  • {{#if isUploading}} - {{name}} + {{name}} + {{else}} {{name}} {{/if}} diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php index a9cfaae9df..e029279535 100644 --- a/apps/files_sharing/templates/public.php +++ b/apps/files_sharing/templates/public.php @@ -98,9 +98,8 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size); - t('Select or drop files')) ?> - +
      From 0c14c9d7ea2b4c43eba1b167aa158b78b7974a46 Mon Sep 17 00:00:00 2001 From: Christopher Mueller Date: Tue, 31 Mar 2020 14:21:28 +0000 Subject: [PATCH 2/4] add progressbar for every element & better design Signed-off-by: Christopher Mueller --- apps/files_sharing/css/public.scss | 16 ++++++++++++---- apps/files_sharing/js/files_drop.js | 17 ++++++++++++++--- apps/files_sharing/js/templates.js | 12 ++++++------ .../js/templates/files_drop.handlebars | 2 +- 4 files changed, 33 insertions(+), 14 deletions(-) diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index 366bc5f5e3..aad2e97dec 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -138,7 +138,7 @@ thead { } #public-upload #emptycontent ul { - width: 160px; + width: 230px; margin: 5px auto; text-align: left; } @@ -156,13 +156,21 @@ thead { top: 2px; } -#public-upload li span.icon-loading-small { +#drop-upload-progress-indicator span.icon-loading-small { padding-left: 18px; margin-right: 7px; } -#drop-uploaded-files li #drop-upload-progress-bar { - margin-top: 7px; +#drop-uploaded-files li #drop-upload-name { + float: left; + max-width: 180px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +#drop-uploaded-files li #drop-upload-status { + float: right; } .disclaimer, diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index c3af5c2206..ba280b2544 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -66,6 +66,7 @@ $('#drop-uploaded-files').append(output({isUploading: true, name: data.files[0].name})); $('[data-toggle="tooltip"]').tooltip(); + $('#drop-upload-status').text('waiting...'); data.submit(); return true; @@ -89,12 +90,14 @@ sequentialUploads: true, start: function(e) { self._uploading = true; + $('#drop-upload-status').text('starting'); }, stop: function(e) { self._uploading = false; }, add: function(e, data) { Drop.addFileToUpload(e, data); + $('#drop-upload-status').text('waiting...'); //we return true to keep trying to upload next file even //if addFileToUpload did not like the privious one return true; @@ -120,13 +123,21 @@ if(progress === 100) { $('#drop-upload-done-indicator').removeClass('hidden'); $('#drop-upload-progress-indicator').addClass('hidden'); - $('#drop-upload-progress-bar').val(100); } else { $('#drop-upload-done-indicator').addClass('hidden'); $('#drop-upload-progress-indicator').removeClass('hidden'); - $('#drop-upload-progress-bar').val(progress); } - } + }, + progress: function (e, data) { + var progress = parseInt(data.loaded / data.total * 100, 10); + if(progress === 100) { + $('#drop-upload-progress-bar').val(100); + $('#drop-upload-status').text('finished'); + } else { + $('#drop-upload-progress-bar').val(progress); + $('#drop-upload-status').text(progress + '%'); + } + }, }); $('#public-upload .button.icon-upload').click(function(e) { e.preventDefault(); diff --git a/apps/files_sharing/js/templates.js b/apps/files_sharing/js/templates.js index fd2dfdb6f9..1f65c3c55a 100644 --- a/apps/files_sharing/js/templates.js +++ b/apps/files_sharing/js/templates.js @@ -8,9 +8,9 @@ templates['files_drop'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return " " - + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data,"loc":{"start":{"line":3,"column":43},"end":{"line":3,"column":51}}}) : helper))) - + "\n"; + return "
      " + + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data,"loc":{"start":{"line":3,"column":29},"end":{"line":3,"column":37}}}) : helper))) + + "
      \n \n"; },"3":function(container,depth0,helpers,partials,data) { var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -20,9 +20,9 @@ templates['files_drop'] = template({"1":function(container,depth0,helpers,partia }; return " " - + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":5,"column":27},"end":{"line":5,"column":35}}}) : helper))) + + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":6,"column":27},"end":{"line":6,"column":35}}}) : helper))) + "\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -37,7 +37,7 @@ templates['files_drop'] = template({"1":function(container,depth0,helpers,partia + "\" data-name=\"" + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":1,"column":54},"end":{"line":1,"column":62}}}) : helper))) + "\">\n" - + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"isUploading") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":2,"column":1},"end":{"line":6,"column":8}}})) != null ? stack1 : "") + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"isUploading") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":2,"column":1},"end":{"line":7,"column":8}}})) != null ? stack1 : "") + "
      • \n"; },"useData":true}); })(); \ No newline at end of file diff --git a/apps/files_sharing/js/templates/files_drop.handlebars b/apps/files_sharing/js/templates/files_drop.handlebars index d4cc3e85b9..03db9eb6c7 100644 --- a/apps/files_sharing/js/templates/files_drop.handlebars +++ b/apps/files_sharing/js/templates/files_drop.handlebars @@ -1,6 +1,6 @@
    • {{#if isUploading}} - {{name}} +
      {{name}}
      {{else}} {{name}} From 79320200ccdeb12c26b8402392f6a09ed53f983f Mon Sep 17 00:00:00 2001 From: Christopher Mueller Date: Tue, 31 Mar 2020 17:47:22 +0000 Subject: [PATCH 3/4] add translation strings & add margin to uploaded files-list Signed-off-by: Christopher Mueller --- apps/files_sharing/css/public.scss | 2 +- apps/files_sharing/js/files_drop.js | 7 +++---- apps/files_sharing/templates/public.php | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index aad2e97dec..f6d889370f 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -139,7 +139,7 @@ thead { #public-upload #emptycontent ul { width: 230px; - margin: 5px auto; + margin: 5px auto 5vh; text-align: left; } diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index ba280b2544..8bf80554b5 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -66,7 +66,6 @@ $('#drop-uploaded-files').append(output({isUploading: true, name: data.files[0].name})); $('[data-toggle="tooltip"]').tooltip(); - $('#drop-upload-status').text('waiting...'); data.submit(); return true; @@ -90,14 +89,13 @@ sequentialUploads: true, start: function(e) { self._uploading = true; - $('#drop-upload-status').text('starting'); }, stop: function(e) { self._uploading = false; }, add: function(e, data) { Drop.addFileToUpload(e, data); - $('#drop-upload-status').text('waiting...'); + $('#drop-upload-status').text(t('files_sharing', 'waiting...')); //we return true to keep trying to upload next file even //if addFileToUpload did not like the privious one return true; @@ -114,6 +112,7 @@ 'Could not upload "{filename}"', {filename: data.files[0].name} )); + $('#drop-upload-status').text(t('files_sharing', 'error')); var errorIconSrc = OC.imagePath('core', 'actions/error.svg'); var fileItem = output({isUploading: false, iconSrc: errorIconSrc, name: data.files[0].name}); Drop.updateFileItem(data.files[0].name, fileItem); @@ -132,7 +131,7 @@ var progress = parseInt(data.loaded / data.total * 100, 10); if(progress === 100) { $('#drop-upload-progress-bar').val(100); - $('#drop-upload-status').text('finished'); + $('#drop-upload-status').text(t('files_sharing', 'finished')); } else { $('#drop-upload-progress-bar').val(progress); $('#drop-upload-status').text(progress + '%'); diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php index e029279535..edde05d9f6 100644 --- a/apps/files_sharing/templates/public.php +++ b/apps/files_sharing/templates/public.php @@ -99,7 +99,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size); t('Select or drop files')) ?> - +
        From 49291b905a62d44601be7ff7ee54a19e0796759e Mon Sep 17 00:00:00 2001 From: Christopher Mueller Date: Tue, 31 Mar 2020 18:09:24 +0000 Subject: [PATCH 4/4] fix wrong indentation Signed-off-by: Christopher Mueller --- apps/files_sharing/js/files_drop.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index 8bf80554b5..9dff5a06f5 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -130,12 +130,12 @@ progress: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); if(progress === 100) { - $('#drop-upload-progress-bar').val(100); - $('#drop-upload-status').text(t('files_sharing', 'finished')); - } else { - $('#drop-upload-progress-bar').val(progress); - $('#drop-upload-status').text(progress + '%'); - } + $('#drop-upload-progress-bar').val(100); + $('#drop-upload-status').text(t('files_sharing', 'finished')); + } else { + $('#drop-upload-progress-bar').val(progress); + $('#drop-upload-status').text(progress + '%'); + } }, }); $('#public-upload .button.icon-upload').click(function(e) {