Răsfoiți Sursa

HUE-2272 [fb] Improve UX of Copy/Move modal windows

refactoring drag and drop experience
removed modal, added fixed message bar, added css updates
refactored handlers in options
removed queuecomplete and moved to a listener on the instantiated dropzone to properly capture the state of the queue
status bar removed only after the queue is empty as opposed to first success or canceled item in queue
Added fix for displaying separate file percentages; removal of cancel button for items that are completed
Paul McCaughtry 11 ani în urmă
părinte
comite
f2ebab4

+ 8 - 6
apps/filebrowser/src/filebrowser/static/css/fb.css

@@ -118,10 +118,12 @@ pre a:hover {
   overflow-y: auto;
 }
 
-.uploadpreview span {
-  margin-right: 1em;
-}
-
-.uploadpreview span:last-child {
-  margin-right: 0;
+.uploadstatus {
+  border-top: 3px solid #338bb8;
+  border-bottom: 3px solid #338bb8;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  position: fixed;
+  width: 100%;
 }

+ 28 - 32
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -393,18 +393,10 @@ from django.utils.translation import ugettext as _
 
   <div id="submit-wf-modal" class="modal hide"></div>
 
-  <div id="ddUploadModal" class="modal hide fade">
-    <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal">&times;</a>
-        <h3>${_('Uploads in progress')}</h3>
-      </div>
-      <div class="modal-body">
-        <div id="uploadstats" class="uploadpreview"></div>
-      </div>
-      <div class="modal-footer">
-        <a class="btn" href="#" data-dismiss="modal">${_('Cancel')}</a>
-      </div>
-  </div>
+  <div id="progressStatus" class="uploadstatus alert alert-info hide">
+    <div class="updateStatus"> </div>
+  <div>
+</div>
 
   <script id="fileTemplate" type="text/html">
     <tr style="cursor: pointer" data-bind="event: { mouseover: toggleHover, mouseout: toggleHover}">
@@ -1096,11 +1088,11 @@ from django.utils.translation import ugettext as _
       if (window.FileReader) {
         var showHoverMsg = function (msg) {
           $('.hoverText').html(msg);
-          $('.hoverMsg').fadeIn();
+          $('.hoverMsg').removeClass('hide');
         };
 
         var hideHoverMsg = function () {
-          $('.hoverMsg').fadeOut();
+          $('.hoverMsg').addClass('hide');
         };
 
         var _isDraggingOverText = false;
@@ -1143,33 +1135,37 @@ from django.utils.translation import ugettext as _
             params: {
               dest: ops.path
             },
+            autoDiscover: false,
             maxFilesize: 5000000,
-            previewsContainer: '#uploadstats',
-            previewTemplate: '<div><span data-dz-name></span> <span data-dz-size></span> <span data-dz-uploadprogress></span><a href="javascript:undefined;" data-dz-remove>${_("Cancel upload")}</a></div>',
+            previewsContainer: '#progressStatus',
+            previewTemplate: '<div class="row">\n <span class="offset4 span3 break-word"><strong data-dz-name></strong></span>\n <span class="span2">File size: <strong data-dz-size></strong></span>\n <span class="span3">Percent complete: <strong data-dz-uploadprogress></strong></span>\n <span class="span1"><a href="javascript:undefined;" title="Cancel upload" data-dz-remove><i class="fa fa-times"></i></a></span>\n </div>',
             drop: function (e) {
-              e.preventDefault();
-
-              hideHoverMsg();
-              $("#ddUploadModal").modal({
-                keyboard:true,
-                show:true
-              });
-            },
-            totaluploadprogress: function (progress) {
-              $('[data-dz-uploadprogress]').html(progress.toFixed() + "%");
+              $('.hoverMsg').addClass('hide');
+              $('#progressStatus').removeClass('hide');
             },
-            queuecomplete: function (progress) {
-              $('.dz-progress').style.opacity = "1";
-            },
-            success: function () {
-              location.reload();
+            uploadprogress: function (file, progress) {
+              $("[data-dz-name]").each(function (cnt, item) {
+                if ($(item).text() === file.name) {
+                  $(item).parents(".row").find("[data-dz-uploadprogress]").html(progress.toFixed() + "%");
+                  if (progress.toFixed() === "100"){
+                    $(item).parents(".row").find("[data-dz-remove]").hide();
+                  }
+                }
+              });
             },
             canceled: function () {
-              $('#ddUploadModal').modal('hide');
               $.jHueNotify.info("${_('Upload has been canceled')}");
             }
           };
           _dropzone = new Dropzone(document.body, options);
+
+          _dropzone.on('queuecomplete', function () {
+              setTimeout(function () {
+                $('#progressStatus').addClass('hide');
+                location.reload();
+                },
+              2500);
+          });
         });
       }
 

+ 1 - 1
desktop/core/src/desktop/templates/common_footer.mako

@@ -195,7 +195,7 @@ from django.template.defaultfilters import escape, escapejs
   <%include file="tours.mako"/>
 % endif
 
-    <div class="hoverMsg">
+    <div class="hoverMsg hide">
       <p class="hoverText"></p>
     </div>
   </body>

+ 6 - 1
desktop/core/static/css/hue3.css

@@ -1827,8 +1827,9 @@ input.no-margin {
 
 .hoverMsg {
   background: #000;
-  display: none;
+  /*display: none;*/
   height: 100%;
+  left: 0;
   opacity: .5;
   position: fixed;
   width: 100%;
@@ -1850,4 +1851,8 @@ input.no-margin {
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
+}
+
+.break-word {
+  word-wrap: break-word
 }

+ 4 - 4
desktop/core/static/js/dropzone.js

@@ -974,16 +974,16 @@ require.register("dropzone/lib/dropzone.js", function (exports, module) {
       var string;
       if (size >= 1024 * 1024 * 1024 * 1024 / 10) {
         size = size / (1024 * 1024 * 1024 * 1024 / 10);
-        string = "TiB";
+        string = "TB";
       } else if (size >= 1024 * 1024 * 1024 / 10) {
         size = size / (1024 * 1024 * 1024 / 10);
-        string = "GiB";
+        string = "GB";
       } else if (size >= 1024 * 1024 / 10) {
         size = size / (1024 * 1024 / 10);
-        string = "MiB";
+        string = "MB";
       } else if (size >= 1024 / 10) {
         size = size / (1024 / 10);
-        string = "KiB";
+        string = "KB";
       } else {
         size = size * 10;
         string = "b";