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

fix: calendar and spreadsheet layout quick action toggle event propogation

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-05-10 17:39:59 +05:30
parent 2d1201cc92
commit 686d0984e6
2 changed files with 106 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/components/issues/issue-layouts/calendar/issue-block.tsx
View File

@ -65,6 +65,7 @@ export const CalendarIssueBlock = observer(
const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end"; const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
return ( return (
<div className="relative group/card">
<ControlLink <ControlLink
id={`issue-${issue.id}`} id={`issue-${issue.id}`}
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`} href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
@ -104,15 +105,12 @@ export const CalendarIssueBlock = observer(
<div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div> <div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
</Tooltip> </Tooltip>
</div> </div>
<div <span className={`w-24 hidden group-hover:block ${isMenuActive ? "!block" : ""}`} />
className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${ </div>
isMenuActive ? "!block" : "" </>
}`} </ControlLink>
onClick={(e) => { <div className="absolute right-1 bottom-0 flex items-center gap-1.5">
e.preventDefault(); <div className={` hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
e.stopPropagation();
}}
>
{quickActions({ {quickActions({
issue, issue,
parentRef: blockRef, parentRef: blockRef,
@ -121,8 +119,7 @@ export const CalendarIssueBlock = observer(
})} })}
</div> </div>
</div> </div>
</> </div>
</ControlLink>
); );
}) })
); );

10
web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View File

@ -206,12 +206,13 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
return ( return (
<> <>
<td id={`issue-${issueId}`} ref={cellRef} tabIndex={0} className="sticky left-0 z-10"> <td id={`issue-${issueId}`} ref={cellRef} tabIndex={0} className="sticky left-0 z-10">
<div className="group relative">
<ControlLink <ControlLink
href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`} href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
target="_blank" target="_blank"
onClick={() => handleIssuePeekOverview(issueDetail)} onClick={() => handleIssuePeekOverview(issueDetail)}
className={cn( className={cn(
"group clickable cursor-pointer h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200", "clickable cursor-pointer h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200",
{ {
"border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id), "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issueDetail.id), "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issueDetail.id),
@ -261,6 +262,11 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
<span className={`size-1 hidden group-hover:block ${isMenuActive ? "!block" : ""}`} />
</div>
</ControlLink>
<div className="absolute right-3 bottom-2.5 flex items-center gap-1.5">
<div className={`hidden group-hover:block ${isMenuActive ? "!block" : ""}`}> <div className={`hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
{quickActions({ {quickActions({
issue: issueDetail, issue: issueDetail,
@ -270,7 +276,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
})} })}
</div> </div>
</div> </div>
</ControlLink> </div>
</td> </td>
{/* Rest of the columns */} {/* Rest of the columns */}
{spreadsheetColumnsList.map((property) => ( {spreadsheetColumnsList.map((property) => (