Add basic progressbar to public upload page

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 a8207167c2c7d681afb24082fc76f2f3c2504171..366bc5f5e303b1a4689d5bcdf438d81681dcd151 100644 (file)
--- a/apps/files_sharing/css/public.scss
+++ b/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;

diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js
index 26bb04a001aabca318f38c680a002d24264f2e3a..c3af5c220629db364d2ec07bd7063d3a6612feb6 100644 (file)
--- a/apps/files_sharing/js/files_drop.js
+++ b/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);
                                        }
                                }
                        });

diff --git a/apps/files_sharing/js/templates/files_drop.handlebars b/apps/files_sharing/js/templates/files_drop.handlebars
index b090e829793e3af4921d962bc4b4fbf89fb4e3e6..d4cc3e85b910a1067b5a5588d89c0446a5fabc04 100644 (file)
--- a/apps/files_sharing/js/templates/files_drop.handlebars
+++ b/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}}

diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index a9cfaae9df13b0b54b81b8ae1e592c6d08e2ef76..e029279535e78ab9d25fa955b49e4ec2134f0ac3 100644 (file)
--- a/apps/files_sharing/templates/public.php
+++ b/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>