add progressbar for every element & better design

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

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 366bc5f5e303b1a4689d5bcdf438d81681dcd151..aad2e97dec4a710771edbc2e1de56f4b7ccf7b3c 100644 (file)
--- 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 c3af5c220629db364d2ec07bd7063d3a6612feb6..ba280b2544d12f3a932716b7c18b4fcb123f17c2 100644 (file)
--- 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 fd2dfdb6f995a2927643df9b303f64a692e11a07..1f65c3c55a19ecdea58d31d6a58b1d66790b5036 100644 (file)
--- 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 d4cc3e85b910a1067b5a5588d89c0446a5fabc04..03db9eb6c7dffe8cc84f299329c4c8a5d8f29975 100644 (file)
--- 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}}