Fix - drag and drop functionality - the drop zone will automatically …

…hide when the file is moved out of the dropzone area , fix file upload popup css styling, name of the file uploading will be displayed instead of static text failed. (cherry picked from commit 7d9737b)
cloudera · Oct 25, 2023 · 5e0048c · 5e0048c
1 parent 6d1d871
commit 5e0048c
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 83 deletions.
diff --git a/apps/filebrowser/src/filebrowser/templates/listdir_components.mako b/apps/filebrowser/src/filebrowser/templates/listdir_components.mako
@@ -700,20 +700,21 @@ else:
 
   <script type="text/template" id="qq-template">
     <div class="qq-uploader-selector" style="margin-left: 10px">
-        <div class="qq-upload-drop-area-selector"><span>${_('Drop the files here to upload')}</span></div>
+        <div class="qq-upload-drop-area-selector" qq-hide-dropzone><span>${_('Drop the files here to upload')}</span></div>
         <div class="qq-upload-button-selector qq-no-float">${_('Select files')}</div> &nbsp;
         <span class="muted">${_('or drag and drop them here')}</span>
+
         <ul class="qq-upload-list-selector qq-upload-files unstyled qq-no-float" style="margin-right: 0;">
             <li>
-                <span class="qq-upload-file-selector" style="display:none"></span>
                 <span class="qq-upload-spinner-selector hide" style="display:none"></span>
                 <div class="progress-row dz-processing">
                     <span class="break-word qq-upload-file-selector"></span>
                     <div class="pull-right">
+                        <span class="qq-upload-file-selector" style="display:block"></span>
                         <span class="muted qq-upload-size-selector"></span>&nbsp;&nbsp;
                         <a href="#" title="${_('Cancel')}" class="complex-layout"><i class="fa fa-fw fa-times qq-upload-cancel-selector"></i></a>
                         <span class="qq-upload-done-selector" style="display:none"><i class="fa fa-fw fa-check muted"></i></span>
-                        <span class="qq-upload-failed-text-selector">${_('Hello Failed')}</span>
+                        <span class="qq-upload-failed-text">${_('Failed')}</span>
                     </div>
                     <div class="progress-row-bar" style="width: 0%;"></div>
                 </div>
@@ -2086,43 +2087,39 @@ else:
           //   totalParts: "qqtotalparts"
           // },
           callbacks: {
-            onProgress: function (id, fileName, loaded, total) {
-            console.log(loaded);
-            $('.qq-upload-files').find('li').each(function(){
-              var listItem = $(this);
-              if (listItem.find('.qq-upload-file-selector').text() == fileName){
-                listItem.find('.progress-row-bar').css('width', (loaded/total)*100 + '%');
-              }
-            });
-          },
-          onComplete: function (id, fileName, response) {
-            self.pendingUploads(self.pendingUploads() - 1);
-            if (response.status != 0) {
-              $(document).trigger('error', "${ _('Error: ') }" + response.data);
-            }
-            else {
-              $(document).trigger('info', response.path + "${ _(' uploaded successfully.') }");
-              self.filesToHighlight.push(response.path);
-            }
-            if (self.pendingUploads() == 0) {
-              $('#uploadFileModal').modal('hide');
-              self.retrieveData(true);
-            }
-          },
-          onTotalProgress: function(totalUploadedBytes, totalBytes) {
-            if (totalUploadedBytes == totalBytes) {
+                onProgress: function (id, fileName, loaded, total) {
+                console.log(loaded);
+                $('.qq-upload-files').find('li').each(function(){
+                  var listItem = $(this);
+                  if (listItem.find('.qq-upload-file-selector').text() == fileName){
+                    listItem.find('.progress-row-bar').css('width', (loaded/total)*100 + '%');
+                  }
+                });
+              },
+              onComplete: function (id, fileName, response) {
+                self.pendingUploads(self.pendingUploads() - 1);
+                if (response.status != 0) {
+                  $(document).trigger('error', "${ _('Error: ') }" + response.data);
+                }
+                else {
+                  $(document).trigger('info', response.path + "${ _(' uploaded successfully.') }");
+                  self.filesToHighlight.push(response.path);
+                }
+                if (self.pendingUploads() == 0) {
+                  $('#uploadFileModal').modal('hide');
+                  self.retrieveData(true);
+                }
+              },
 
-            }
-          },
-          onAllComplete: function(succeeded, failed){
-            $('#uploadFileModal').modal('hide');
-          },
-          onSubmit: function (id, fileName, responseJSON) {
-            self.pendingUploads(self.pendingUploads() + 1);
-          },
-          onCancel: function (id, fileName) {
-            self.pendingUploads(self.pendingUploads() - 1);
-          }
+              onAllComplete: function(succeeded, failed){
+                $('#uploadFileModal').modal('hide');
+              },
+              onSubmit: function (id, fileName, responseJSON) {
+                self.pendingUploads(self.pendingUploads() + 1);
+              },
+              onCancel: function (id, fileName) {
+                self.pendingUploads(self.pendingUploads() - 1);
+              }
           },
 
           debug: false

diff --git a/desktop/core/src/desktop/static/desktop/less/components/hue-qq-upload.less b/desktop/core/src/desktop/static/desktop/less/components/hue-qq-upload.less
@@ -19,11 +19,11 @@
 @import (reference) "../cui/extra-variables.less";
 @import (reference) "../hue-mixins.less";
 
-.qq-uploader {
+.qq-uploader-selector {
   position: relative;
 }
 
-.qq-upload-button {
+.qq-upload-button-selector {
   display: inline-block;
   *display: inline;
 
@@ -66,8 +66,8 @@
   outline: none;
 }
 
-.qq-upload-button:hover,
-.qq-upload-button:focus {
+.qq-upload-button-selector:hover,
+.qq-upload-button-selector:focus {
   color: @cui-blue-500;
   border-color: @cui-blue-500;
   background-color: @cui-white;
@@ -80,38 +80,38 @@
   transition: background-position 0.1s linear;
 }
 
-.qq-upload-drop-area {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  min-height: 40px;
-  z-index: 2;
-  background: @cui-white;
-  border: 2px dashed @cui-gray-300;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  text-align: center;
-}
-
-.qq-upload-drop-area span {
-  display: block;
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  margin-top: -8px;
-  font-size: 16px;
-  color: @cui-gray-700;
-}
-
-.qq-upload-drop-area-active {
-  border-color: @cui-gray-400;
-  background-color: @cui-purple-gray-050;
-}
-
-.qq-upload-list {
+ .qq-upload-drop-area-selector {
+   position: relative;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   min-height: 40px;
+   z-index: 2;
+   background: @cui-white;
+   border: 2px dashed @cui-gray-300;
+   -webkit-border-radius: 6px;
+   -moz-border-radius: 6px;
+   border-radius: 6px;
+   text-align: center;
+ }
+
+ .qq-upload-drop-area-selector span {
+   display: block;
+   position: absolute;
+   top: 50%;
+   width: 100%;
+   margin-top: -8px;
+   font-size: 16px;
+   color: @cui-gray-700;
+ }
+
+ .qq-upload-drop-area-active {
+   border-color: @cui-gray-400;
+   background-color: @cui-purple-gray-050;
+ }
+
+.qq-upload-list-selector {
   float: right;
   margin: 0;
   margin-top: 10px;
@@ -123,32 +123,32 @@
   float: none !important;
 }
 
-.qq-upload-list li {
+.qq-upload-list-selector li {
   margin: 0;
   padding: 0;
   line-height: 15px;
   font-size: 12px;
   text-align: right;
 }
 
-.qq-upload-file,
-.qq-upload-spinner,
-.qq-upload-size,
-.qq-upload-cancel,
+.qq-upload-file-selector,
+.qq-upload-spinner-selector,
+.qq-upload-size-selector,
+.qq-upload-cancel-selector,
 .qq-upload-failed-text {
   margin-right: 7px;
 }
 
-.qq-upload-spinner {
+.qq-upload-spinner-selector {
   display: inline-block;
   background: url("/static/desktop/ext/js/loading.gif");
   width: 15px;
   height: 15px;
   vertical-align: text-bottom;
 }
 
-.qq-upload-size,
-.qq-upload-cancel {
+.qq-upload-size-selector,
+.qq-upload-cancel-selector {
   font-size: 11px;
 }