[Lens] Refactor reorder drag and drop (elastic#88578)

spalger · Feb 1, 2021 · 1b8c3c1 · 1b8c3c1
1 parent e31b6a8
commit 1b8c3c1
Show file tree

Hide file tree

Showing 39 changed files with 2,074 additions and 1,152 deletions.
diff --git a/test/functional/services/common/browser.ts b/test/functional/services/common/browser.ts
@@ -289,13 +289,13 @@ export async function BrowserProvider({ getService }: FtrProviderContext) {
           }
 
           const origin = document.querySelector(arguments[0]);
-          const target = document.querySelector(arguments[1]);
 
           const dragStartEvent = createEvent('dragstart');
           dispatchEvent(origin, dragStartEvent);
 
           setTimeout(() => {
             const dropEvent = createEvent('drop');
+            const target = document.querySelector(arguments[1]);
             dispatchEvent(target, dropEvent, dragStartEvent.dataTransfer);
             const dragEndEvent = createEvent('dragend');
             dispatchEvent(origin, dragEndEvent, dropEvent.dataTransfer);

diff --git a/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap b/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
@@ -52,7 +52,7 @@
   }
 }
 
-.lnsDragDrop__reorderableContainer {
+.lnsDragDrop__container {
   position: relative;
 }
 
@@ -63,11 +63,18 @@
   height: calc(100% + #{$lnsLayerPanelDimensionMargin});
 }
 
-.lnsDragDrop-isReorderable {
+.lnsDragDrop-translatableDrop {
+  transform: translateY(0);
   transition: transform $euiAnimSpeedFast ease-in-out;
   pointer-events: none;
 }
 
+.lnsDragDrop-translatableDrag {
+  transform: translateY(0);
+  transition: transform $euiAnimSpeedFast ease-in-out;
+  position: relative;
+}
+
 // Draggable item when it is moving
 .lnsDragDrop-isHidden {
   opacity: 0;