thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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;
isDragDisabled: boolean;
draggableId: string;
canDropOverIssue: boolean;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
canEditProperties: (projectId: string | undefined) => boolean;
@ -108,6 +109,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
issuesMap,
displayProperties,
isDragDisabled,
canDropOverIssue,
updateIssue,
quickActions,
canEditProperties,
@ -167,6 +169,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
}),
dropTargetForElements({
element,
canDrop: () => canDropOverIssue,
getData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragEnter: () => {
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;
quickActions: TRenderQuickActions;
canEditProperties: (projectId: string | undefined) => boolean;
canDropOverIssue: boolean;
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
}
@ -26,6 +27,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
issueIds,
displayProperties,
isDragDisabled,
canDropOverIssue,
updateIssue,
quickActions,
canEditProperties,
@ -55,6 +57,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
quickActions={quickActions}
draggableId={draggableId}
isDragDisabled={isDragDisabled}
canDropOverIssue={canDropOverIssue}
canEditProperties={canEditProperties}
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;
};
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;
return (
<div
id={`${groupId}__${sub_group_id}`}
className={cn(
"relative h-full transition-all min-h-[50px]",
"relative h-full transition-all min-h-[120px]",
{ "bg-custom-background-80 rounded": isDraggingOverColumn },
{ "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlay }
)}
@ -201,7 +202,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
>
<div
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,
},
@ -231,6 +232,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
quickActions={quickActions}
canEditProperties={canEditProperties}
scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef}
canDropOverIssue={canDropOverIssue}
/>
{enableQuickIssueCreate && !disableIssueCreation && (