Bladeren bron

[fb] Visual hint for global upload progress

Added mini upload progress bar at the bottom of the page
Enrico Berti 11 jaren geleden
bovenliggende
commit
8f57232b96

+ 17 - 1
apps/filebrowser/src/filebrowser/static/css/fb.css

@@ -120,10 +120,26 @@ pre a:hover {
 
 .uploadstatus {
   border-top: 3px solid #338bb8;
-  border-bottom: 3px solid #338bb8;
+  border-bottom: none;
+  bottom: 4px;
+  left: 0;
+  margin: 0;
+  position: fixed;
+  width: 100%;
+}
+
+.uploadstatusbar {
+  background-color: #d9edf7;
+  height: 4px;
   bottom: 0;
   left: 0;
   margin: 0;
   position: fixed;
   width: 100%;
+}
+
+.uploadstatusbar div {
+  background-color: #338bb8;
+  height: 4px;
+  width: 30%;
 }

+ 12 - 0
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -396,6 +396,9 @@ from django.utils.translation import ugettext as _
   <div id="progressStatus" class="uploadstatus alert alert-info hide">
     <div class="updateStatus"> </div>
   <div>
+  <div id="progressStatusBar" class="uploadstatusbar hide">
+    <div></div>
+  </div>
 </div>
 
   <script id="fileTemplate" type="text/html">
@@ -1145,6 +1148,8 @@ from django.utils.translation import ugettext as _
               // Ensure dropped item was a file
               if (e.dataTransfer.files.length > 0) {
                 $('#progressStatus').removeClass('hide');
+                $('#progressStatusBar').removeClass('hide');
+                $('#progressStatusBar div').css("width", "0");
               }
             },
             uploadprogress: function (file, progress) {
@@ -1157,6 +1162,11 @@ from django.utils.translation import ugettext as _
                 }
               });
             },
+            totaluploadprogress: function (progress) {
+              $('#progressStatusBar div').animate({
+                "width": progress.toFixed() + "%"
+              }, 100);
+            },
             canceled: function () {
               $.jHueNotify.info("${_('Upload has been canceled')}");
             }
@@ -1166,6 +1176,8 @@ from django.utils.translation import ugettext as _
           _dropzone.on('queuecomplete', function () {
               setTimeout(function () {
                 $('#progressStatus').addClass('hide');
+                $('#progressStatusBar').addClass('hide');
+                $('#progressStatusBar div').css("width", "0");
                 location.reload();
                 },
               2500);