Ver código fonte

HUE-7523 [assist] Enable drag and drop of documents in the assist panel

With this it's also possible to drag documents from home to the assist and vice versa
Johan Ahlen 8 anos atrás
pai
commit
6da3b21

Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 19 - 0
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -274,6 +274,25 @@
   border: 1px solid @hue-primary-color-dark !important;
 }
 
+.assist-file-entry-drag {
+  display: none;
+  position: absolute;
+  width: auto;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  top: -15px;
+  left: 10px;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: middle;
+  padding: 1px 7px;
+  cursor: pointer;
+  background-color: @hue-primary-color-dark;
+  color: @hue-primary-color-light;
+  border-radius: 2px;
+  z-index: 1000;
+}
+
 .assist-tables {
   margin-left: 0;
 }

+ 62 - 5
desktop/core/src/desktop/templates/assist.mako

@@ -628,13 +628,13 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
     <div class="assist-flex-fill assist-file-scrollable">
       <div data-bind="visible: ! loading() && ! hasErrors() && entries().length > 0">
          <ul class="assist-tables" data-bind="foreachVisible: {data: filteredEntries, minHeight: 27, container: '.assist-file-scrollable' }">
-           <li class="assist-entry assist-file-entry" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-file-scrollable' }, assistFileDroppable, visibleOnHover: { 'selector': '.assist-file-actions' }">
+           <li class="assist-entry assist-file-entry" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-file-scrollable' }, assistFileDroppable, assistFileDraggable, visibleOnHover: { 'selector': '.assist-file-actions' }">
              <div class="assist-file-actions table-actions">
                <a class="inactive-action" href="javascript:void(0)" data-bind="click: showContextPopover, css: { 'blue': statsVisible }"><i class="fa fa-fw fa-info" title="${_('Show details')}"></i></a>
              </div>
              <a href="javascript:void(0)" class="assist-entry assist-document-link" data-bind="click: open, attr: {'title': name }">
                <!-- ko template: { name: 'document-icon-template', data: { document: $data, showShareAddon: false } } --><!-- /ko -->
-               <span class="highlightable" data-bind="css: { 'highlight': highlight }, draggableText: { text: definition().name, meta: {'type': 'document', 'definition': definition()} }, text: definition().name"></span>
+               <span class="highlightable" data-bind="css: { 'highlight': highlight }, text: definition().name"></span>
              </a>
            </li>
          </ul>
@@ -1006,6 +1006,10 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
     </div>
   </script>
 
+  <div class="assist-file-entry-drag">
+    <span class="drag-text"></span>
+  </div>
+
   <script type="text/javascript">
 
     var SQL_ASSIST_KNOWN_FACET_VALUES = {
@@ -1016,20 +1020,25 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
       ko.bindingHandlers.assistFileDroppable = {
         init: function(element, valueAccessor, allBindings, boundEntry) {
           var dragData;
-          huePubSub.subscribe('doc.browser.dragging', function (data) {
+          var dragSub = huePubSub.subscribe('doc.browser.dragging', function (data) {
             dragData = data;
           });
+          ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
+            dragSub.remove();
+          });
+
           var $element = $(element);
           if (boundEntry.isDirectory) {
             $element.droppable({
               drop: function () {
-                if (dragData && !dragData.dragToSelect) {
+                if (dragData && !dragData.dragToSelect && boundEntry.isDirectory()) {
                   boundEntry.moveHere(dragData.selectedEntries);
                   dragData.originEntry.load();
                 }
+                $element.removeClass('assist-file-entry-drop');
               },
               over: function () {
-                if (dragData && !dragData.dragToSelect) {
+                if (!$element.hasClass('assist-file-entry-drop') && dragData && !dragData.dragToSelect && boundEntry.isDirectory()) {
                   $element.addClass('assist-file-entry-drop');
                 }
               },
@@ -1041,6 +1050,54 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
         }
       };
 
+      ko.bindingHandlers.assistFileDraggable = {
+        init: function(element, valueAccessor, allBindings, boundEntry, bindingContext) {
+          var $element = $(element);
+
+          var dragStartY = -1;
+          var dragStartX = -1;
+          $element.draggable({
+            start: function (event, ui) {
+              var $container = $('.doc-browser-drag-container');
+              boundEntry.selected(true);
+              huePubSub.publish('doc.browser.dragging', {
+                selectedEntries: [ boundEntry ],
+                originEntry: boundEntry,
+                dragToSelect: false
+              });
+              huePubSub.publish('doc.drag.to.select', false);
+
+              dragStartX = event.clientX;
+              dragStartY = event.clientY;
+
+              var $helper = $('.assist-file-entry-drag').clone().show();
+              $helper.find('.drag-text').text(boundEntry.definition().name);
+              $helper.find('i').removeClass().addClass($element.find('.doc-browser-primary-col i').attr('class'));
+
+              $helper.appendTo($container);
+            },
+            drag: function (event) {
+            },
+            stop: function (event) {
+              var elementAtStart = document.elementFromPoint(dragStartX, dragStartY);
+              var elementAtStop = document.elementFromPoint(event.clientX, event.clientY);
+              if (elementAtStart.nodeName === "A" && elementAtStop.nodeName === "A" && Math.sqrt((dragStartX-event.clientX)*(dragStartX-event.clientX) + (dragStartY-event.clientY)*(dragStartY-event.clientY)) < 8) {
+                $(elementAtStop).trigger('click');
+              }
+              boundEntry.selected(false);
+            },
+            helper: function (event) {
+              return $('<div>').addClass('doc-browser-drag-container');
+            },
+            appendTo: "body",
+            cursorAt: {
+              top: 0,
+              left: 0
+            }
+          });
+        }
+      };
+
       /**
        * @param {Object} options
        * @param {ApiHelper} options.apiHelper

+ 18 - 16
desktop/core/src/desktop/templates/document_browser.mako

@@ -569,31 +569,33 @@ from desktop.views import _ko
 
       ko.bindingHandlers.docDroppable = {
         init: function(element, valueAccessor, allBindings, boundEntry, bindingContext) {
-          var options = valueAccessor();
-          var allEntries = options.entries;
           var $element = $(element);
           var dragToSelect = false;
-          var alreadySelected = false;
-          huePubSub.subscribe('doc.drag.to.select', function (value) {
-            alreadySelected = boundEntry && boundEntry.selected ? boundEntry.selected() : false;
+          var selectSub = huePubSub.subscribe('doc.drag.to.select', function (value) {
             dragToSelect = value;
           });
+
+          var dragData;
+          var dragSub = huePubSub.subscribe('doc.browser.dragging', function (data) {
+            dragData = data;
+          });
+
+          ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
+            dragSub.remove();
+            selectSub.remove();
+          });
+
           $element.droppable({
             drop: function (ev, ui) {
-              if (! dragToSelect && boundEntry.isDirectory && boundEntry.isDirectory()) {
-                var entriesToMove = $.grep(allEntries(), function (entry) {
-                  return entry.selected() && ! entry.isSharedWithMe();
-                });
-                if (entriesToMove.length > 0) {
-                  boundEntry.moveHere(entriesToMove);
-                  boundEntry.load();
-                }
+              if (!dragToSelect && dragData && !dragData.dragToSelect && boundEntry.isDirectory && boundEntry.isDirectory()) {
+                boundEntry.moveHere(dragData.selectedEntries);
+                dragData.originEntry.load();
               }
               $element.removeClass('doc-browser-drop-hover');
             },
             over: function () {
-              if (! dragToSelect && boundEntry.isDirectory && boundEntry.isDirectory()) {
-                var movableCount = allEntries().filter(function (entry) {
+              if (!dragToSelect && boundEntry.isDirectory && boundEntry.isDirectory()) {
+                var movableCount = dragData.selectedEntries.filter(function (entry) {
                   return entry.selected() && ! entry.isSharedWithMe();
                 }).length;
                 if (movableCount > 0) {
@@ -602,7 +604,7 @@ from desktop.views import _ko
               }
             },
             out: function (event, ui) {
-              if (! dragToSelect && boundEntry.isDirectory && boundEntry.isDirectory()) {
+              if (!dragToSelect && boundEntry.isDirectory && boundEntry.isDirectory()) {
                 $element.removeClass('doc-browser-drop-hover');
               }
             }

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff