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

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}