minor fixes for kanban dnd improvement

makeplane · May 1, 2024 · 3443c6a · 3443c6a
1 parent 9ef28f4
commit 3443c6a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -186,12 +186,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
           }`}
           ref={cardRef}
           className={cn(
-            "block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
-            {
-              "hover:cursor-pointer": isDragAllowed,
-              "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
-              "bg-custom-background-80 z-[100]": isCurrentBlockDragging,
-            }
+            "block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+            { "hover:cursor-pointer": isDragAllowed },
+            { "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id) },
+            { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
           )}
           target="_blank"
           onClick={() => handleIssuePeekOverview(issue)}

diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -13,6 +13,7 @@ import {
   TIssueGroupByOptions,
   TIssueOrderByOptions,
 } from "@plane/types";
+import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -172,6 +173,8 @@ export const KanbanGroup = (props: IKanbanGroup) => {
   };
 
   const shouldOverlay = isDraggingOverColumn && orderBy !== "sort_order";
+  const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
+
   return (
     <div
       id={`${groupId}__${sub_group_id}`}
@@ -186,12 +189,13 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         className={cn(
           "absolute top-0 left-0 h-full w-full justify-center items-center text-sm text-custom-text-100",
           {
-            "flex bg-custom-primary-10 border-[2px] border-custom-primary-40 rounded z-[2]": shouldOverlay,
+            "flex flex-col bg-custom-primary-10 border-[2px] border-custom-primary-40 rounded z-[2]": shouldOverlay,
           },
           { hidden: !shouldOverlay }
         )}
       >
-        <span>Drop here to move issue</span>
+        {readableOrderBy && <span>The layout is ordered by {readableOrderBy}.</span>}
+        <span>Drop here to move the issue.</span>
       </div>
       <KanbanIssueBlocksList
         sub_group_id={sub_group_id}
@@ -203,7 +207,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         updateIssue={updateIssue}
         quickActions={quickActions}
         canEditProperties={canEditProperties}
-        scrollableContainerRef={scrollableContainerRef}
+        scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef}
       />
 
       {enableQuickIssueCreate && !disableIssueCreation && (

diff --git a/web/components/issues/issue-layouts/kanban/utils.ts b/web/components/issues/issue-layouts/kanban/utils.ts
@@ -218,12 +218,12 @@ export const highlightIssueOnDrop = (elementId: string | undefined, shouldScroll
     const sourceElementId = elementId ?? "";
     const sourceElement = document.getElementById(sourceElementId);
     if (shouldScrollIntoView && sourceElement)
-      await scrollIntoView(sourceElement, { behavior: "smooth", block: "center" });
+      await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 });
     sourceElement?.classList?.add("highlight");
     setTimeout(() => {
       const sourceElementId = elementId ?? "";
       const sourceElement = document.getElementById(sourceElementId);
       sourceElement?.classList?.remove("highlight");
-    }, 1000);
+    }, 2000);
   }, 200);
 };