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

New Minor UX changes to Kanban (#4499)

Browse Source
This commit is contained in:
rahulramesha 2024-05-17 14:33:21 +05:30 committed by GitHub
parent 2988d5e429
commit 90b50a4162
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,6 +29,7 @@ interface IssueBlockProps {
displayProperties: IIssueDisplayProperties | undefined; displayProperties: IIssueDisplayProperties | undefined;
isDragDisabled: boolean; isDragDisabled: boolean;
draggableId: string; draggableId: string;
canDropOverIssue: boolean;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined; updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions; quickActions: TRenderQuickActions;
canEditProperties: (projectId: string | undefined) => boolean; canEditProperties: (projectId: string | undefined) => boolean;
@ -108,6 +109,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
issuesMap, issuesMap,
displayProperties, displayProperties,
isDragDisabled, isDragDisabled,
canDropOverIssue,
updateIssue, updateIssue,
quickActions, quickActions,
canEditProperties, canEditProperties,
@ -167,6 +169,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
}), }),
dropTargetForElements({ dropTargetForElements({
element, element,
canDrop: () => canDropOverIssue,
getData: () => ({ id: issue?.id, type: "ISSUE" }), getData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragEnter: () => { onDragEnter: () => {
setIsDraggingOverBlock(true); setIsDraggingOverBlock(true);

3
web/components/issues/issue-layouts/kanban/blocks-list.tsx
View File

@ -15,6 +15,7 @@ interface IssueBlocksListProps {
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined; updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions; quickActions: TRenderQuickActions;
canEditProperties: (projectId: string | undefined) => boolean; canEditProperties: (projectId: string | undefined) => boolean;
canDropOverIssue: boolean;
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>; scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
} }
@ -26,6 +27,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
issueIds, issueIds,
displayProperties, displayProperties,
isDragDisabled, isDragDisabled,
canDropOverIssue,
updateIssue, updateIssue,
quickActions, quickActions,
canEditProperties, canEditProperties,
@ -55,6 +57,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
quickActions={quickActions} quickActions={quickActions}
draggableId={draggableId} draggableId={draggableId}
isDragDisabled={isDragDisabled} isDragDisabled={isDragDisabled}
canDropOverIssue={canDropOverIssue}
canEditProperties={canEditProperties} canEditProperties={canEditProperties}
scrollableContainerRef={scrollableContainerRef} scrollableContainerRef={scrollableContainerRef}
/> />

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

@ -175,14 +175,15 @@ export const KanbanGroup = (props: IKanbanGroup) => {
return preloadedData; return preloadedData;
}; };
const shouldOverlay = isDraggingOverColumn && (orderBy !== "sort_order" || isDropDisabled); const canDropOverIssue = orderBy === "sort_order";
const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title; 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}`}
className={cn( className={cn(
"relative h-full transition-all min-h-[50px]", "relative h-full transition-all min-h-[120px]",
{ "bg-custom-background-80 rounded": isDraggingOverColumn }, { "bg-custom-background-80 rounded": isDraggingOverColumn },
{ "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlay } { "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlay }
)} )}
@ -201,7 +202,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
> >
<div <div
className={cn( className={cn(
"p-3 mt-6 flex flex-col border-[1px] rounded items-center", "p-3 mt-8 flex flex-col border-[1px] rounded items-center",
{ {
"bg-custom-background-primary border-custom-border-primary text-custom-text-primary": shouldOverlay, "bg-custom-background-primary border-custom-border-primary text-custom-text-primary": shouldOverlay,
}, },
@ -231,6 +232,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
quickActions={quickActions} quickActions={quickActions}
canEditProperties={canEditProperties} canEditProperties={canEditProperties}
scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef} scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef}
canDropOverIssue={canDropOverIssue}
/> />
{enableQuickIssueCreate && !disableIssueCreation && ( {enableQuickIssueCreate && !disableIssueCreation && (