add progressbar for every element & better design

Signed-off-by: Christopher Mueller <chrinimue@posteo.me>

4 files changed, 33 insertions, 14 deletions

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 366bc5f5e30..aad2e97dec4 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 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}}