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

remove drag handles for labels and project sidebar develop

Browse Source
This commit is contained in:
rahulramesha 2024-06-11 20:45:39 +05:30
parent 91447e2e4d
commit 9d23c3d9e0
8 changed files with 32 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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} isDragEnabled={enableReorder}
onDrop={handleOnDrop} onDrop={handleOnDrop}
> >
{(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => ( {(isDragging: boolean) => (
<IssuesSidebarBlock <IssuesSidebarBlock
block={block} block={block}
enableReorder={enableReorder}
enableSelection={enableSelection} enableSelection={enableSelection}
isDragging={isDragging} isDragging={isDragging}
dragHandleRef={dragHandleRef}
selectionHelpers={selectionHelpers} selectionHelpers={selectionHelpers}
/> />
)} )}

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} isDragEnabled={enableReorder}
onDrop={handleOnDrop} onDrop={handleOnDrop}
> >
{(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => ( {(isDragging: boolean) => <ModulesSidebarBlock block={block} isDragging={isDragging} />}
<ModulesSidebarBlock
block={block}
enableReorder={enableReorder}
isDragging={isDragging}
dragHandleRef={dragHandleRef}
/>
)}
</GanttDnDHOC> </GanttDnDHOC>
); );
}) })

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

@ -27,11 +27,10 @@ interface ILabelItemBlock {
customMenuItems: ICustomMenuItem[]; customMenuItems: ICustomMenuItem[];
handleLabelDelete: (label: IIssueLabel) => void; handleLabelDelete: (label: IIssueLabel) => void;
isLabelGroup?: boolean; isLabelGroup?: boolean;
dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
} }
export const LabelItemBlock = (props: ILabelItemBlock) => { export const LabelItemBlock = (props: ILabelItemBlock) => {
const { label, isDragging, customMenuItems, handleLabelDelete, isLabelGroup, dragHandleRef } = props; const { label, customMenuItems, handleLabelDelete, isLabelGroup } = props;
// states // states
const [isMenuActive, setIsMenuActive] = useState(false); const [isMenuActive, setIsMenuActive] = useState(false);
// refs // refs
@ -42,12 +41,6 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
return ( return (
<div className="group flex items-center"> <div className="group flex items-center">
<div className="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} /> <LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
</div> </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; const { name, color, isGroup } = props;
return ( return (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 pl-2">
{isGroup ? ( {isGroup ? (
<Component className="h-3.5 w-3.5" color={color} /> <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 ( return (
<LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}> <LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}>
{(isDragging, isDroppingInLabel, dragHandleRef) => ( {(isDragging, isDroppingInLabel) => (
<div <div
className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`} className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
> >
<Disclosure <Disclosure
as="div" as="div"
className={`rounded text-custom-text-100 ${ className={`rounded text-custom-text-100 cursor-grab ${
!isDroppingInLabel ? "border-[0.5px] border-custom-border-200" : "" !isDroppingInLabel ? "border-[0.5px] border-custom-border-200" : ""
} ${isDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`} } ${isDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`}
defaultOpen defaultOpen
@ -89,7 +89,6 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
customMenuItems={customMenuItems} customMenuItems={customMenuItems}
handleLabelDelete={handleLabelDelete} handleLabelDelete={handleLabelDelete}
isLabelGroup 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 ( return (
<LabelDndHOC label={label} isGroup={false} isChild={isChild} isLastChild={isLastChild} onDrop={onDrop}> <LabelDndHOC label={label} isGroup={false} isChild={isChild} isLastChild={isLastChild} onDrop={onDrop}>
{(isDragging, isDroppingInLabel, dragHandleRef) => ( {(isDragging, isDroppingInLabel) => (
<div <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 <div
className={`py-3 px-1 group relative flex items-center justify-between gap-2 space-y-3 rounded ${ 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} isDragging={isDragging}
customMenuItems={customMenuItems} customMenuItems={customMenuItems}
handleLabelDelete={handleLabelDelete} handleLabelDelete={handleLabelDelete}
dragHandleRef={dragHandleRef}
/> />
)} )}
</div> </div>

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