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} disabled={!!issue?.tempId}
ref={cardRef} ref={cardRef}
className={cn( 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 }, { "hover:cursor-pointer": isDragAllowed },
{ "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }, { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
{ "bg-custom-background-80 z-[100]": isCurrentBlockDragging } { "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, TIssueGroupByOptions,
TIssueOrderByOptions, TIssueOrderByOptions,
} from "@plane/types"; } from "@plane/types";
import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
// helpers // helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
// hooks // hooks
@ -173,6 +174,8 @@ export const KanbanGroup = (props: IKanbanGroup) => {
}; };
const shouldOverlay = isDraggingOverColumn && orderBy !== "sort_order"; const shouldOverlay = isDraggingOverColumn && orderBy !== "sort_order";
const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
return ( return (
<div <div
id={`${groupId}__${sub_group_id}`} id={`${groupId}__${sub_group_id}`}
@ -187,12 +190,13 @@ export const KanbanGroup = (props: IKanbanGroup) => {
className={cn( className={cn(
"absolute top-0 left-0 h-full w-full justify-center items-center text-sm text-custom-text-100", "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 } { 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> </div>
<KanbanIssueBlocksList <KanbanIssueBlocksList
sub_group_id={sub_group_id} sub_group_id={sub_group_id}
@ -205,7 +209,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
updateIssue={updateIssue} updateIssue={updateIssue}
quickActions={quickActions} quickActions={quickActions}
canEditProperties={canEditProperties} canEditProperties={canEditProperties}
scrollableContainerRef={scrollableContainerRef} scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef}
/> />
{enableQuickIssueCreate && !disableIssueCreation && ( {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 sourceElementId = elementId ?? "";
const sourceElement = document.getElementById(sourceElementId); const sourceElement = document.getElementById(sourceElementId);
if (shouldScrollIntoView && sourceElement) if (shouldScrollIntoView && sourceElement)
await scrollIntoView(sourceElement, { behavior: "smooth", block: "center" }); await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 });
sourceElement?.classList?.add("highlight"); sourceElement?.classList?.add("highlight");
setTimeout(() => { setTimeout(() => {
const sourceElementId = elementId ?? ""; const sourceElementId = elementId ?? "";
const sourceElement = document.getElementById(sourceElementId); const sourceElement = document.getElementById(sourceElementId);
sourceElement?.classList?.remove("highlight"); sourceElement?.classList?.remove("highlight");
}, 1000); }, 2000);
}, 200); }, 200);
}; };