More pin reordering improvements

sybnCn · Jun 19, 2018 · 0d99193 · 0d99193
1 parent 6db3202
commit 0d99193
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx
@@ -193,9 +193,9 @@ class DefaultLanding extends React.Component {
                       pinIndex={
                         pinned[pinned.length - 1].collection_position + 1
                       }
+                      noDrop
                       marginLeft={8}
                       marginRight={8}
-                      noBorder
                     >
                       <Grid>
                         {pinned.map((item, index) => (

diff --git a/frontend/src/metabase/containers/dnd/DropArea.jsx b/frontend/src/metabase/containers/dnd/DropArea.jsx
@@ -5,7 +5,7 @@ import { normal } from "metabase/lib/colors";
 const DropTargetBackgroundAndBorder = ({
   highlighted,
   hovered,
-  noBorder = false,
+  noDrop = false,
   margin = 0,
   marginLeft = margin,
   marginRight = margin,
@@ -25,7 +25,7 @@ const DropTargetBackgroundAndBorder = ({
       zIndex: -1,
       boxSizing: "border-box",
       border: "2px solid transparent",
-      borderColor: hovered & !noBorder ? normal.blue : "transparent",
+      borderColor: hovered & !noDrop ? normal.blue : "transparent",
     }}
   />
 );

diff --git a/frontend/src/metabase/containers/dnd/PinDropTarget.jsx b/frontend/src/metabase/containers/dnd/PinDropTarget.jsx
@@ -7,7 +7,9 @@ const PinDropTarget = DropTarget(
   PinnableDragTypes,
   {
     drop(props, monitor, component) {
-      return { pinIndex: props.pinIndex };
+      if (!props.noDrop) {
+        return { pinIndex: props.pinIndex };
+      }
     },
     canDrop(props, monitor) {
       const { item } = monitor.getItem();

diff --git a/frontend/src/metabase/containers/dnd/PinPositionDropTarget.jsx b/frontend/src/metabase/containers/dnd/PinPositionDropTarget.jsx
@@ -10,6 +10,20 @@ const PIN_DROP_TARGET_INDICATOR_WIDTH = 3;
   PinnableDragTypes,
   {
     drop(props, monitor, component) {
+      const { item } = monitor.getItem();
+      // no need to move to the same position
+      if (item.collection_position == props.pinIndex) {
+        return;
+      }
+      // no already pinned, so add it at the dropped position
+      if (item.collection_position == null) {
+        return { pinIndex: props.pinIndex };
+      }
+      // being moved to a later position, which will cause everything to be shifted down, so subtract one
+      if (item.collection_position < props.pinIndex) {
+        return { pinIndex: props.pinIndex - 1 };
+      }
+      // being moved to an earlier position, no need to account for shift
       return { pinIndex: props.pinIndex };
     },
   },