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

[WEB-1548] chore: Remove Drag Handles (#4769)

Browse Source 
* gantt remove drag handles

* remove drag handles for labels and project sidebar develop
This commit is contained in:
rahulramesha 2024-06-12 12:08:19 +05:30 committed by GitHub
parent 679db712cf
commit afe723ee3d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 62 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,6 +78,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"
@ -85,12 +86,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/core/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} />

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

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

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

@ -5,7 +5,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";
@ -13,7 +13,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;
};
@ -24,11 +24,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;
@ -36,7 +34,6 @@ export const GanttDnDHOC = observer((props: Props) => {
draggable({
element,
canDrag: () => isDragEnabled,
dragHandle: dragHandleElement ?? undefined,
getInitialData: () => ({ id }),
onDragStart: () => {
setIsDragging(true);
@ -92,14 +89,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/core/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();
@ -60,16 +58,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/core/components/gantt-chart/sidebar/issues/sidebar.tsx
View File

@ -72,13 +72,11 @@ export const IssueGanttSidebar: React.FC<Props> = observer((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/core/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/core/components/gantt-chart/sidebar/modules/sidebar.tsx
View File

@ -42,14 +42,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>
);
})

9
web/core/components/labels/label-block/label-item-block.tsx
View File

@ -27,11 +27,10 @@ interface ILabelItemBlock {
customMenuItems: ICustomMenuItem[];
handleLabelDelete: (label: IIssueLabel) => void;
isLabelGroup?: boolean;
dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
}
export const LabelItemBlock = (props: ILabelItemBlock) => {
const { label, isDragging, customMenuItems, handleLabelDelete, isLabelGroup, dragHandleRef } = props;
const { label, customMenuItems, handleLabelDelete, isLabelGroup } = props;
// states
const [isMenuActive, setIsMenuActive] = useState(false);
// refs
@ -42,12 +41,6 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
return (
<div className="group flex items-center">
<div className="flex items-center">
<DragHandle
className={cn("opacity-0 group-hover:opacity-100", {
"opacity-100": isDragging,
})}
ref={dragHandleRef}
/>
<LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
</div>

2
web/core/components/labels/label-block/label-name.tsx
View File

@ -10,7 +10,7 @@ export const LabelName = (props: ILabelName) => {
const { name, color, isGroup } = props;
return (
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 pl-2">
{isGroup ? (
<Component className="h-3.5 w-3.5" color={color} />
) : (

5
web/core/components/labels/project-setting-label-group.tsx
View File

@ -55,13 +55,13 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
return (
<LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}>
{(isDragging, isDroppingInLabel, dragHandleRef) => (
{(isDragging, isDroppingInLabel) => (
<div
className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
>
<Disclosure
as="div"
className={`rounded text-custom-text-100 ${
className={`rounded text-custom-text-100 cursor-grab ${
!isDroppingInLabel ? "border-[0.5px] border-custom-border-200" : ""
} ${isDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`}
defaultOpen
@ -89,7 +89,6 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
customMenuItems={customMenuItems}
handleLabelDelete={handleLabelDelete}
isLabelGroup
dragHandleRef={dragHandleRef}
/>
)}

5
web/core/components/labels/project-setting-label-item.tsx
View File

@ -64,9 +64,9 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
return (
<LabelDndHOC label={label} isGroup={false} isChild={isChild} isLastChild={isLastChild} onDrop={onDrop}>
{(isDragging, isDroppingInLabel, dragHandleRef) => (
{(isDragging, isDroppingInLabel) => (
<div
className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
className={`rounded cursor-grab ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
>
<div
className={`py-3 px-1 group relative flex items-center justify-between gap-2 space-y-3 rounded ${
@ -90,7 +90,6 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
isDragging={isDragging}
customMenuItems={customMenuItems}
handleLabelDelete={handleLabelDelete}
dragHandleRef={dragHandleRef}
/>
)}
</div>

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

@ -69,6 +69,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>

69
web/core/components/project/sidebar-list-item.tsx
View File

@ -12,7 +12,6 @@ import { useParams, usePathname } from "next/navigation";
import { createRoot } from "react-dom/client";
// icons
import {
MoreVertical,
PenSquare,
LinkIcon,
Star,
@ -111,7 +110,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const { projectId, handleCopyText, disableDrag, disableDrop, isLastChild, handleOnProjectDrop, projectListType } =
props;
// store hooks
const { sidebarCollapsed: isCollapsed, toggleSidebar } = useAppTheme();
const { sidebarCollapsed: isSideBarCollapsed, toggleSidebar } = useAppTheme();
const { setTrackElement } = useEventTracker();
const { addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
const { isMobile } = usePlatformOS();
@ -124,7 +123,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
// refs
const actionSectionRef = useRef<HTMLDivElement | null>(null);
const projectRef = useRef<HTMLDivElement | null>(null);
const dragHandleRef = useRef<HTMLButtonElement | null>(null);
// router params
const { workspaceSlug, projectId: URLProjectId } = useParams();
// pathname
@ -187,15 +185,13 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
useEffect(() => {
const element = projectRef.current;
const dragHandleElement = dragHandleRef.current;
if (!element) return;
return combine(
draggable({
element,
canDrag: () => !disableDrag && !isCollapsed,
dragHandle: dragHandleElement ?? undefined,
canDrag: () => !disableDrag && !isSideBarCollapsed,
getInitialData: () => ({ id: projectId, dragInstanceId: "PROJECTS" }),
onDragStart: () => {
setIsDragging(true);
@ -211,7 +207,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const root = createRoot(container);
root.render(
<div className="rounded flex items-center bg-custom-background-100 text-sm p-1 pr-2">
<div className="h-7 w-7 grid place-items-center flex-shrink-0">
<div className="h-6 w-6 grid place-items-center flex-shrink-0">
{project && <Logo logo={project?.logo_props} />}
</div>
<p className="truncate text-custom-sidebar-text-200">{project?.name}</p>
@ -272,7 +268,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
},
})
);
}, [projectRef?.current, dragHandleRef?.current, projectId, isLastChild, projectListType, handleOnProjectDrop]);
}, [projectRef?.current, projectId, isLastChild, projectListType, handleOnProjectDrop]);
useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
useOutsideClickDetector(projectRef, () => projectRef?.current?.classList?.remove(HIGHLIGHT_CLASS));
@ -295,56 +291,35 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
"group relative flex w-full items-center rounded-md py-1 text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80",
{
"bg-custom-sidebar-background-80": isMenuActive,
"pl-7": disableDrag && !isCollapsed,
}
)}
>
{!disableDrag && (
<Tooltip
isMobile={isMobile}
tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
position="top-right"
disabled={isDragging}
>
<button
type="button"
className={cn(
"flex opacity-0 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 ml-2",
{
"group-hover:opacity-100": !isCollapsed,
"cursor-not-allowed opacity-60": project.sort_order === null,
flex: isMenuActive,
hidden: isCollapsed,
}
)}
ref={dragHandleRef}
>
<MoreVertical className="-ml-3 h-3.5" />
<MoreVertical className="-ml-5 h-3.5" />
</button>
</Tooltip>
)}
<Tooltip tooltipContent={`${project.name}`} position="right" disabled={!isCollapsed} isMobile={isMobile}>
<Tooltip
tooltipContent={`${project.name}`}
position="right"
disabled={!isSideBarCollapsed}
isMobile={isMobile}
>
<Disclosure.Button
as="div"
className={cn(
"flex flex-grow cursor-pointer select-none items-center justify-between truncate text-left text-sm font-medium",
"flex flex-grow cursor-pointer select-none items-center justify-between truncate text-left text-sm font-medium pl-2",
{
"justify-center": isCollapsed,
"justify-center": isSideBarCollapsed,
}
)}
>
<div
className={cn("flex w-full flex-grow items-center gap-1 truncate", {
"justify-center": isCollapsed,
className={cn("flex w-full h-7 flex-grow items-center gap-1 truncate", {
"justify-center": isSideBarCollapsed,
})}
>
<div className="h-7 w-7 grid place-items-center flex-shrink-0">
<div className="h-5 w-5 grid place-items-center flex-shrink-0 mr-1">
<Logo logo={project.logo_props} />
</div>
{!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
{!isSideBarCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
</div>
{!isCollapsed && (
{!isSideBarCollapsed && (
<ChevronDown
className={cn(
"mb-0.5 hidden h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400 duration-300 group-hover:block",
@ -358,7 +333,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</Disclosure.Button>
</Tooltip>
{!isCollapsed && (
{!isSideBarCollapsed && (
<CustomMenu
customButton={
<div
@ -457,7 +432,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel className={`mt-1 space-y-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
<Disclosure.Panel className={`mt-1 space-y-1 ${isSideBarCollapsed ? "" : "ml-[2.25rem]"}`}>
{navigation(workspaceSlug as string, project?.id).map((item) => {
if (
(item.name === "Cycles" && !project.cycle_view) ||
@ -476,17 +451,17 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
tooltipContent={`${project?.name}: ${item.name}`}
position="right"
className="ml-2"
disabled={!isCollapsed}
disabled={!isSideBarCollapsed}
>
<div
className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${
pathname.includes(item.href)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${isCollapsed ? "justify-center" : ""}`}
} ${isSideBarCollapsed ? "justify-center" : ""}`}
>
<item.Icon className="h-4 w-4 stroke-[1.5]" />
{!isCollapsed && item.name}
{!isSideBarCollapsed && item.name}
</div>
</Tooltip>
</span>

4
web/core/components/project/sidebar-list.tsx
View File

@ -207,7 +207,7 @@ export const ProjectSidebarList: FC = observer(() => {
leaveTo="transform scale-95 opacity-0"
>
{isFavoriteProjectsListOpen && (
<Disclosure.Panel as="div" className={`space-y-2`} static>
<Disclosure.Panel as="div" className={`space-y-2 pl-2`} static>
{favoriteProjects.map((projectId, index) => (
<ProjectSidebarListItem
key={projectId}
@ -269,7 +269,7 @@ export const ProjectSidebarList: FC = observer(() => {
leaveTo="transform scale-95 opacity-0"
>
{isAllProjectsListOpen && (
<Disclosure.Panel as="div" static>
<Disclosure.Panel as="div" className="pl-2" static>
{joinedProjects.map((projectId, index) => (
<ProjectSidebarListItem
key={projectId}