diff options
author | Christopher Mueller <chrinimue@posteo.me> | 2020-03-31 17:21:28 +0300 |
---|---|---|
committer | Christopher Mueller <chrinimue@posteo.me> | 2020-03-31 17:21:28 +0300 |
commit | 0c14c9d7ea2b4c43eba1b167aa158b78b7974a46 (patch) | |
tree | 134878d28ebede2d376229e5f9fa84d63e378058 /apps/files_sharing/js | |
parent | b69d76feeedc27a5753ccb6363f666ba9ec121aa (diff) |
add progressbar for every element & better design
Signed-off-by: Christopher Mueller <chrinimue@posteo.me>
Diffstat (limited to 'apps/files_sharing/js')
-rw-r--r-- | apps/files_sharing/js/files_drop.js | 17 | ||||
-rw-r--r-- | apps/files_sharing/js/templates.js | 12 | ||||
-rw-r--r-- | apps/files_sharing/js/templates/files_drop.handlebars | 2 |
3 files changed, 21 insertions, 10 deletions
diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index c3af5c22062..ba280b2544d 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 fd2dfdb6f99..1f65c3c55a1 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 " <span class=\"icon-loading-small\"></span> " - + 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 " <div id=\"drop-upload-name\">" + + 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))) + + "</div><div id=\"drop-upload-status\"></div>\n <progress id=\"drop-upload-progress-bar\" value=\"0\" max=\"100\"></progress> \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 " <img src=\"" - + alias4(((helper = (helper = lookupProperty(helpers,"iconSrc") || (depth0 != null ? lookupProperty(depth0,"iconSrc") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconSrc","hash":{},"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":5,"column":23}}}) : helper))) + + alias4(((helper = (helper = lookupProperty(helpers,"iconSrc") || (depth0 != null ? lookupProperty(depth0,"iconSrc") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconSrc","hash":{},"data":data,"loc":{"start":{"line":6,"column":12},"end":{"line":6,"column":23}}}) : 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":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 : "") + "</li>\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 d4cc3e85b91..03db9eb6c7d 100644 --- a/apps/files_sharing/js/templates/files_drop.handlebars +++ b/apps/files_sharing/js/templates/files_drop.handlebars @@ -1,6 +1,6 @@ <li data-toggle="tooltip" title="{{name}}" data-name="{{name}}"> {{#if isUploading}} - <small>{{name}}</small><a id="status"></a> + <div id="drop-upload-name">{{name}}</div><div id="drop-upload-status"></div> <progress id="drop-upload-progress-bar" value="0" max="100"></progress> {{else}} <img src="{{iconSrc}}"/> {{name}} |