mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add progressbar for every element & better design 

Signed-off-by: Christopher Mueller <chrinimue@posteo.me>
This commit is contained in:
Christopher Mueller 2020-03-31 14:21:28 +00:00
parent b69d76feee
commit 0c14c9d7ea
4 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/files_sharing/css/public.scss
View File

@ -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,

17
apps/files_sharing/js/files_drop.js
View File

@ -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();

12
apps/files_sharing/js/templates.js
View File

@ -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});
})();

2
apps/files_sharing/js/templates/files_drop.handlebars
View File

@ -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}}