diff --git a/packages/ui/src/control-link/control-link.tsx b/packages/ui/src/control-link/control-link.tsx index 328dae4fa..801b170af 100644 --- a/packages/ui/src/control-link/control-link.tsx +++ b/packages/ui/src/control-link/control-link.tsx @@ -6,10 +6,11 @@ export type TControlLink = React.AnchorHTMLAttributes & { children: React.ReactNode; target?: string; disabled?: boolean; + className?: string; }; -export const ControlLink: React.FC = (props) => { - const { href, onClick, children, target = "_self", disabled = false, ...rest } = props; +export const ControlLink = React.forwardRef((props, ref) => { + const { href, onClick, children, target = "_self", disabled = false, className, ...rest } = props; const LEFT_CLICK_EVENT_CODE = 0; const handleOnClick = (event: React.MouseEvent) => { @@ -23,8 +24,8 @@ export const ControlLink: React.FC = (props) => { if (disabled) return <>{children}; return ( - + {children} ); -}; +}); diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx index d12e28914..8c484171b 100644 --- a/web/components/issues/issue-layouts/kanban/block.tsx +++ b/web/components/issues/issue-layouts/kanban/block.tsx @@ -60,7 +60,7 @@ const KanbanIssueDetailsBlock: React.FC = observer((prop className="absolute -top-1 right-0 hidden group-hover/kanban-block:block" onClick={handleEventPropagation} > - {quickActions(issue)} + {!isReadOnly && quickActions(issue)} @@ -103,7 +103,7 @@ export const KanbanIssueBlock: React.FC = memo((props) => { issueIds, } = props; - const cardRef = useRef(null); + const cardRef = useRef(null); const { router: { workspaceSlug }, } = useApplication(); @@ -138,6 +138,7 @@ export const KanbanIssueBlock: React.FC = memo((props) => { return combine( draggable({ element, + dragHandle: element, canDrag: () => isDragAllowed, getInitialData: () => ({ id: issue?.id, type: "ISSUE" }), onDragStart: () => { @@ -151,7 +152,6 @@ export const KanbanIssueBlock: React.FC = memo((props) => { }), dropTargetForElements({ element, - canDrop: (payload) => payload.source?.data?.id !== issue?.id, getData: () => ({ id: issue?.id, type: "ISSUE" }), onDragEnter: () => { setIsDraggingOverBlock(true); @@ -184,32 +184,29 @@ export const KanbanIssueBlock: React.FC = memo((props) => { target="_blank" onClick={() => handleIssuePeekOverview(issue)} disabled={!!issue?.tempId} + ref={cardRef} + className={cn( + "block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400", + { "hover:cursor-pointer": isDragAllowed }, + { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }, + { "bg-custom-background-80 z-[100]": isCurrentBlockDragging } + )} > -
- - - -
+ +