feat: reordering documents in collection (#1722)

* tweaking effect details * wrap work on this feature * adds correct color to drop cursor * simplify logic for early return * much better comment so Tom doesn't fire me * feat: Allow changing sort order of collections * refactor: Move validation to model feat: Make custom order the default (in prep for dnd) * feat: Add sort choice to edit collection modal fix: Improved styling of generic InputSelect * fix: Vertical space left after removing previous collection description * chore: Tweak language, menu contents, add auto-disclosure on sub menus * only show drop-to-reorder cursor when sort is set to manual Co-authored-by: Tom Moor <tom.moor@gmail.com>
2020-12-31 12:51:12 -08:00
parent ba61091c4c
commit 2cc45187e6
22 changed files with 435 additions and 109 deletions
--- a/app/components/Sidebar/components/CollectionLink.js
+++ b/app/components/Sidebar/components/CollectionLink.js
@@ -8,6 +8,7 @@ import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
 import DropToImport from "components/DropToImport";
 import DocumentLink from "./DocumentLink";
+import DropCursor from "./DropCursor";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useStores from "hooks/useStores";
@@ -39,11 +40,13 @@ function CollectionLink({

  const { documents, policies } = useStores();
  const expanded = collection.id === ui.activeCollectionId;
+  const manualSort = collection.sort.field === "index";

-  // Droppable
+  // Drop to re-parent
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: "document",
    drop: (item, monitor) => {
+      if (monitor.didDrop()) return;
      if (!collection) return;
      documents.move(item.id, collection.id);
    },
@@ -51,14 +54,26 @@ function CollectionLink({
      return policies.abilities(collection.id).update;
    },
    collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
+      isOver: !!monitor.isOver({ shallow: true }),
      canDrop: monitor.canDrop(),
    }),
  });

+  // Drop to reorder
+  const [{ isOverReorder }, dropToReorder] = useDrop({
+    accept: "document",
+    drop: async (item, monitor) => {
+      if (!collection) return;
+      documents.move(item.id, collection.id, undefined, 0);
+    },
+    collect: (monitor) => ({
+      isOverReorder: !!monitor.isOver(),
+    }),
+  });
+
  return (
    <>
-      <div ref={drop}>
+      <div ref={drop} style={{ position: "relative" }}>
        <DropToImport key={collection.id} collectionId={collection.id}>
          <SidebarLink
            key={collection.id}
@@ -88,10 +103,13 @@ function CollectionLink({
            }
          ></SidebarLink>
        </DropToImport>
+        {expanded && manualSort && (
+          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+        )}
      </div>

      {expanded &&
-        collection.documents.map((node) => (
+        collection.documents.map((node, index) => (
          <DocumentLink
            key={node.id}
            node={node}
@@ -100,6 +118,7 @@ function CollectionLink({
            prefetchDocument={prefetchDocument}
            canUpdate={canUpdate}
            depth={1.5}
+            index={index}
          />
        ))}
    </>
--- a/app/components/Sidebar/components/DocumentLink.js
+++ b/app/components/Sidebar/components/DocumentLink.js
@@ -9,6 +9,7 @@ import Collection from "models/Collection";
 import Document from "models/Document";
 import DropToImport from "components/DropToImport";
 import Fade from "components/Fade";
+import DropCursor from "./DropCursor";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useStores from "hooks/useStores";
@@ -23,16 +24,20 @@ type Props = {|
  activeDocumentRef?: (?HTMLElement) => void,
  prefetchDocument: (documentId: string) => Promise<void>,
  depth: number,
+  index: number,
+  parentId?: string,
 |};

 function DocumentLink({
  node,
+  canUpdate,
  collection,
  activeDocument,
  activeDocumentRef,
  prefetchDocument,
  depth,
-  canUpdate,
+  index,
+  parentId,
 }: Props) {
  const { documents, policies } = useStores();
  const { t } = useTranslation();
@@ -76,6 +81,14 @@ function DocumentLink({
    }
  }, [showChildren]);

+  // when the last child document is removed,
+  // also close the local folder state to closed
+  React.useEffect(() => {
+    if (expanded && !hasChildDocuments) {
+      setExpanded(false);
+    }
+  }, [expanded, hasChildDocuments]);
+
  const handleDisclosureClick = React.useCallback(
    (ev: SyntheticEvent<>) => {
      ev.preventDefault();
@@ -108,6 +121,7 @@ function DocumentLink({

  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMoving = documents.movingDocumentId === node.id;
+  const manualSort = collection?.sort.field === "index";

  // Draggable
  const [{ isDragging }, drag] = useDrag({
@@ -120,77 +134,101 @@ function DocumentLink({
    },
  });

-  // Droppable
-  const [{ isOver, canDrop }, drop] = useDrop({
+  // Drop to re-parent
+  const [{ isOverReparent, canDropToReparent }, dropToReparent] = useDrop({
    accept: "document",
    drop: async (item, monitor) => {
+      if (monitor.didDrop()) return;
      if (!collection) return;
      documents.move(item.id, collection.id, node.id);
    },
    canDrop: (item, monitor) =>
      pathToNode && !pathToNode.includes(monitor.getItem().id),
    collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
-      canDrop: monitor.canDrop(),
+      isOverReparent: !!monitor.isOver({ shallow: true }),
+      canDropToReparent: monitor.canDrop(),
+    }),
+  });
+
+  // Drop to reorder
+  const [{ isOverReorder }, dropToReorder] = useDrop({
+    accept: "document",
+    drop: async (item, monitor) => {
+      if (!collection) return;
+      if (item.id === node.id) return;
+
+      if (expanded) {
+        documents.move(item.id, collection.id, node.id, 0);
+        return;
+      }
+
+      documents.move(item.id, collection.id, parentId, index + 1);
+    },
+    collect: (monitor) => ({
+      isOverReorder: !!monitor.isOver(),
    }),
  });

  return (
    <>
-      <Draggable
-        key={node.id}
-        ref={drag}
-        $isDragging={isDragging}
-        $isMoving={isMoving}
-      >
-        <div ref={drop}>
-          <DropToImport documentId={node.id} activeClassName="activeDropZone">
-            <SidebarLink
-              innerRef={isActiveDocument ? activeDocumentRef : undefined}
-              onMouseEnter={handleMouseEnter}
-              to={{
-                pathname: node.url,
-                state: { title: node.title },
-              }}
-              label={
-                <>
-                  {hasChildDocuments && (
-                    <Disclosure
-                      expanded={expanded && !isDragging}
-                      onClick={handleDisclosureClick}
+      <div style={{ position: "relative" }}>
+        <Draggable
+          key={node.id}
+          ref={drag}
+          $isDragging={isDragging}
+          $isMoving={isMoving}
+        >
+          <div ref={dropToReparent}>
+            <DropToImport documentId={node.id} activeClassName="activeDropZone">
+              <SidebarLink
+                innerRef={isActiveDocument ? activeDocumentRef : undefined}
+                onMouseEnter={handleMouseEnter}
+                to={{
+                  pathname: node.url,
+                  state: { title: node.title },
+                }}
+                label={
+                  <>
+                    {hasChildDocuments && (
+                      <Disclosure
+                        expanded={expanded && !isDragging}
+                        onClick={handleDisclosureClick}
+                      />
+                    )}
+                    <EditableTitle
+                      title={node.title || t("Untitled")}
+                      onSubmit={handleTitleChange}
+                      canUpdate={canUpdate}
                    />
-                  )}
-                  <EditableTitle
-                    title={node.title || t("Untitled")}
-                    onSubmit={handleTitleChange}
-                    canUpdate={canUpdate}
-                  />
-                </>
-              }
-              isActiveDrop={isOver && canDrop}
-              depth={depth}
-              exact={false}
-              menuOpen={menuOpen}
-              menu={
-                document && !isMoving ? (
-                  <Fade>
-                    <DocumentMenu
-                      position="right"
-                      document={document}
-                      onOpen={() => setMenuOpen(true)}
-                      onClose={() => setMenuOpen(false)}
-                    />
-                  </Fade>
-                ) : undefined
-              }
-            />
-          </DropToImport>
-        </div>
-      </Draggable>
-
+                  </>
+                }
+                isActiveDrop={isOverReparent && canDropToReparent}
+                depth={depth}
+                exact={false}
+                menuOpen={menuOpen}
+                menu={
+                  document && !isMoving ? (
+                    <Fade>
+                      <DocumentMenu
+                        position="right"
+                        document={document}
+                        onOpen={() => setMenuOpen(true)}
+                        onClose={() => setMenuOpen(false)}
+                      />
+                    </Fade>
+                  ) : undefined
+                }
+              />
+            </DropToImport>
+          </div>
+        </Draggable>
+        {manualSort && (
+          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+        )}
+      </div>
      {expanded && !isDragging && (
        <>
-          {node.children.map((childNode) => (
+          {node.children.map((childNode, index) => (
            <ObservedDocumentLink
              key={childNode.id}
              collection={collection}
@@ -199,6 +237,8 @@ function DocumentLink({
              prefetchDocument={prefetchDocument}
              depth={depth + 1}
              canUpdate={canUpdate}
+              index={index}
+              parentId={node.id}
            />
          ))}
        </>
--- a/app/components/Sidebar/components/DropCursor.js
+++ b/app/components/Sidebar/components/DropCursor.js
@@ -0,0 +1,42 @@
+// @flow
+import * as React from "react";
+import styled, { withTheme } from "styled-components";
+import { type Theme } from "types";
+
+function DropCursor({
+  isActiveDrop,
+  innerRef,
+  theme,
+}: {
+  isActiveDrop: boolean,
+  innerRef: React.Ref<any>,
+  theme: Theme,
+}) {
+  return <Cursor isOver={isActiveDrop} ref={innerRef} />;
+}
+
+// transparent hover zone with a thin visible band vertically centered
+const Cursor = styled("div")`
+  opacity: ${(props) => (props.isOver ? 1 : 0)};
+  transition: opacity 150ms;
+
+  position: absolute;
+  z-index: 1;
+
+  width: 100%;
+  height: 14px;
+  bottom: -7px;
+  background: transparent;
+
+  ::after {
+    background: ${(props) => props.theme.slateDark};
+    position: absolute;
+    top: 6px;
+    content: "";
+    height: 2px;
+    border-radius: 2px;
+    width: 100%;
+  }
+`;
+
+export default withTheme(DropCursor);
--- a/app/components/Sidebar/components/SidebarLink.js
+++ b/app/components/Sidebar/components/SidebarLink.js
@@ -48,16 +48,20 @@ function SidebarLink({
  }, [depth]);

  const activeStyle = {
-    color: theme.text,
    fontWeight: 600,
+    color: theme.text,
    background: theme.sidebarItemBackground,
    ...style,
  };

+  const activeFontWeightOnly = {
+    fontWeight: 600,
+  };
+
  return (
    <StyledNavLink
      $isActiveDrop={isActiveDrop}
-      activeStyle={isActiveDrop ? undefined : activeStyle}
+      activeStyle={isActiveDrop ? activeFontWeightOnly : activeStyle}
      style={active ? activeStyle : style}
      onClick={onClick}
      onMouseEnter={onMouseEnter}
@@ -106,6 +110,7 @@ const StyledNavLink = styled(NavLink)`
  text-overflow: ellipsis;
  padding: 4px 16px;
  border-radius: 4px;
+  transition: background 50ms, color 50ms;
  background: ${(props) =>
    props.$isActiveDrop ? props.theme.slateDark : "inherit"};
  color: ${(props) =>
@@ -115,6 +120,7 @@ const StyledNavLink = styled(NavLink)`

  svg {
    ${(props) => (props.$isActiveDrop ? `fill: ${props.theme.white};` : "")}
+    transition: fill 50ms
  }

  &:hover {