Add basic progressbar to public upload page

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

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;

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

apps/files_sharing/js/templates/files_drop.handlebars

@@ -1,6 +1,7 @@
 <li data-toggle="tooltip" title="{{name}}" data-name="{{name}}">
 	{{#if isUploading}}
-		<span class="icon-loading-small"></span> {{name}}
+		<small>{{name}}</small><a id="status"></a>
+		<progress id="drop-upload-progress-bar" value="0" max="100"></progress>	
 	{{else}}
 		<img src="{{iconSrc}}"/> {{name}}
 	{{/if}}

apps/files_sharing/templates/public.php

@@ -98,9 +98,8 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 			<?php } ?>
 
 			<input type="file" name="files[]" class="hidden" multiple>
-
 			<a href="#" class="button icon-upload"><?php p($l->t('Select or drop files')) ?></a>
-			<div id="drop-upload-progress-indicator" style="padding-top: 25px;" class="hidden"><?php p($l->t('Uploading files…')) ?></div>
+			<div id="drop-upload-progress-indicator" style="padding-top: 25px;" class="hidden"><?php p($l->t('Uploading files')) ?></div>
 			<div id="drop-upload-done-indicator" style="padding-top: 25px;" class="hidden"><?php p($l->t('Uploaded files:')) ?></div>
 			<ul id="drop-uploaded-files"></ul>