github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor fixes for kanban dnd improvement

Browse Source
This commit is contained in:
rahulramesha 2024-05-01 20:21:27 +05:30
parent 9870be61bb
commit 9efc606acf
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -186,7 +186,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
disabled={!!issue?.tempId}
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",
"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": peekIssueId === issue.id },
{ "bg-custom-background-80 z-[100]": isCurrentBlockDragging }

10
web/components/issues/issue-layouts/kanban/kanban-group.tsx
View File

@ -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
@ -173,6 +174,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}`}
@ -187,12 +190,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}
@ -205,7 +209,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
updateIssue={updateIssue}
quickActions={quickActions}
canEditProperties={canEditProperties}
scrollableContainerRef={scrollableContainerRef}
scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef}
/>
{enableQuickIssueCreate && !disableIssueCreation && (

4
web/components/issues/issue-layouts/kanban/utils.ts
View File

@ -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);
};