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

gantt remove drag handles

Browse Source
This commit is contained in:
rahulramesha 2024-06-10 12:43:11 +05:30
parent 9a4971efa4
commit 3403fd72c3
9 changed files with 32 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/components/cycles/gantt-chart/blocks.tsx
View File

@ -76,6 +76,7 @@ export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
<Link
className="relative flex h-full w-full items-center gap-2"
href={`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`}
draggable={false}
>
<ContrastIcon
className="h-5 w-5 flex-shrink-0"
@ -83,12 +84,12 @@ export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
cycleStatus === "current"
? "#09a953"
: cycleStatus === "upcoming"
? "#f7ae59"
: cycleStatus === "completed"
? "#3f76ff"
: cycleStatus === "draft"
? "rgb(var(--color-text-200))"
: ""
? "#f7ae59"
: cycleStatus === "completed"
? "#3f76ff"
: cycleStatus === "draft"
? "rgb(var(--color-text-200))"
: ""
}`}
/>
<h6 className="flex-grow truncate text-sm font-medium">{cycleDetails?.name}</h6>

14
web/components/gantt-chart/sidebar/cycles/block.tsx
View File

@ -15,13 +15,11 @@ import { findTotalDaysInRange } from "@/helpers/date-time.helper";
type Props = {
block: IGanttBlock;
enableReorder: boolean;
isDragging: boolean;
dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
};
export const CyclesSidebarBlock: React.FC<Props> = observer((props) => {
const { block, enableReorder, isDragging, dragHandleRef } = props;
const { block, isDragging } = props;
// store hooks
const { updateActiveBlockId, isBlockActive } = useGanttChart();
@ -44,16 +42,6 @@ export const CyclesSidebarBlock: React.FC<Props> = observer((props) => {
height: `${BLOCK_HEIGHT}px`,
}}
>
{enableReorder && (
<button
type="button"
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
ref={dragHandleRef}
>
<MoreVertical className="h-3.5 w-3.5" />
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
</button>
)}
<div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
<div className="flex-grow truncate">
<CycleGanttSidebarBlock cycleId={block.data.id} />

9
web/components/gantt-chart/sidebar/cycles/sidebar.tsx
View File

@ -37,14 +37,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
isDragEnabled={enableReorder}
onDrop={handleOnDrop}
>
{(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => (
<CyclesSidebarBlock
block={block}
enableReorder={enableReorder}
isDragging={isDragging}
dragHandleRef={dragHandleRef}
/>
)}
{(isDragging: boolean) => <CyclesSidebarBlock block={block} isDragging={isDragging} />}
</GanttDnDHOC>
))
) : (

26
web/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
View File

@ -3,7 +3,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
import { observer } from "mobx-react";
import { DropIndicator } from "@plane/ui";
import { DropIndicator, TOAST_TYPE, setToast } from "@plane/ui";
import { HIGHLIGHT_WITH_LINE, highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
@ -11,7 +11,7 @@ type Props = {
id: string;
isLastChild: boolean;
isDragEnabled: boolean;
children: (isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => JSX.Element;
children: (isDragging: boolean) => JSX.Element;
onDrop: (draggingBlockId: string | undefined, droppedBlockId: string | undefined, dropAtEndOfList: boolean) => void;
};
@ -22,11 +22,9 @@ export const GanttDnDHOC = observer((props: Props) => {
const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
// refs
const blockRef = useRef<HTMLDivElement | null>(null);
const dragHandleRef = useRef<HTMLButtonElement | null>(null);
useEffect(() => {
const element = blockRef.current;
const dragHandleElement = dragHandleRef.current;
if (!element) return;
@ -34,7 +32,6 @@ export const GanttDnDHOC = observer((props: Props) => {
draggable({
element,
canDrag: () => isDragEnabled,
dragHandle: dragHandleElement ?? undefined,
getInitialData: () => ({ id }),
onDragStart: () => {
setIsDragging(true);
@ -90,14 +87,27 @@ export const GanttDnDHOC = observer((props: Props) => {
},
})
);
}, [blockRef?.current, dragHandleRef?.current, isLastChild, onDrop]);
}, [blockRef?.current, isLastChild, onDrop]);
useOutsideClickDetector(blockRef, () => blockRef?.current?.classList?.remove(HIGHLIGHT_WITH_LINE));
return (
<div id={`issue-draggable-${id}`} className={"relative"} ref={blockRef}>
<div
id={`draggable-${id}`}
className={"relative"}
ref={blockRef}
onDragStart={() => {
if (!isDragEnabled) {
setToast({
title: "Warning!",
type: TOAST_TYPE.WARNING,
message: "Drag and drop is only enabled when sorted by manual",
});
}
}}
>
<DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
{children(isDragging, dragHandleRef)}
{children(isDragging)}
{isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
</div>
);

14
web/components/gantt-chart/sidebar/issues/block.tsx
View File

@ -18,15 +18,13 @@ import { IGanttBlock } from "../../types";
type Props = {
block: IGanttBlock;
enableReorder: boolean;
enableSelection: boolean;
isDragging: boolean;
dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
selectionHelpers?: TSelectionHelper;
};
export const IssuesSidebarBlock = observer((props: Props) => {
const { block, enableReorder, enableSelection, isDragging, dragHandleRef, selectionHelpers } = props;
const { block, enableSelection, isDragging, selectionHelpers } = props;
// store hooks
const { updateActiveBlockId, isBlockActive } = useGanttChart();
const { getIsIssuePeeked } = useIssueDetail();
@ -58,16 +56,6 @@ export const IssuesSidebarBlock = observer((props: Props) => {
}}
>
<div className="flex items-center gap-2">
{enableReorder && (
<button
type="button"
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
ref={dragHandleRef}
>
<MoreVertical className="h-3.5 w-3.5" />
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
</button>
)}
{enableSelection && selectionHelpers && (
<MultipleSelectEntityAction
className={cn(

4
web/components/gantt-chart/sidebar/issues/sidebar.tsx
View File

@ -47,13 +47,11 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
isDragEnabled={enableReorder}
onDrop={handleOnDrop}
>
{(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => (
{(isDragging: boolean) => (
<IssuesSidebarBlock
block={block}
enableReorder={enableReorder}
enableSelection={enableSelection}
isDragging={isDragging}
dragHandleRef={dragHandleRef}
selectionHelpers={selectionHelpers}
/>
)}

14
web/components/gantt-chart/sidebar/modules/block.tsx
View File

@ -15,13 +15,11 @@ import { findTotalDaysInRange } from "@/helpers/date-time.helper";
type Props = {
block: IGanttBlock;
enableReorder: boolean;
isDragging: boolean;
dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
};
export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
const { block, enableReorder, isDragging, dragHandleRef } = props;
const { block, isDragging } = props;
// store hooks
const { updateActiveBlockId, isBlockActive } = useGanttChart();
@ -44,16 +42,6 @@ export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
height: `${BLOCK_HEIGHT}px`,
}}
>
{enableReorder && (
<button
type="button"
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
ref={dragHandleRef}
>
<MoreVertical className="h-3.5 w-3.5" />
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
</button>
)}
<div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
<div className="flex-grow truncate">
<ModuleGanttSidebarBlock moduleId={block.data.id} />

9
web/components/gantt-chart/sidebar/modules/sidebar.tsx
View File

@ -37,14 +37,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
isDragEnabled={enableReorder}
onDrop={handleOnDrop}
>
{(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => (
<ModulesSidebarBlock
block={block}
enableReorder={enableReorder}
isDragging={isDragging}
dragHandleRef={dragHandleRef}
/>
)}
{(isDragging: boolean) => <ModulesSidebarBlock block={block} isDragging={isDragging} />}
</GanttDnDHOC>
))
) : (

1
web/components/modules/gantt-chart/blocks.tsx
View File

@ -67,6 +67,7 @@ export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
<Link
className="relative flex h-full w-full items-center gap-2"
href={`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
draggable={false}
>
<ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
<h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>