fix: calendar and spreadsheet layout quick action toggle event propogation

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

View File

@ -65,6 +65,7 @@ export const CalendarIssueBlock = observer(
const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
return (
<div className="relative group/card">
<ControlLink
id={`issue-${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>
</Tooltip>
</div>
<div
className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${
isMenuActive ? "!block" : ""
}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<span className={`w-24 hidden group-hover:block ${isMenuActive ? "!block" : ""}`} />
</div>
</>
</ControlLink>
<div className="absolute right-1 bottom-0 flex items-center gap-1.5">
<div className={` hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
{quickActions({
issue,
parentRef: blockRef,
@ -121,8 +119,7 @@ export const CalendarIssueBlock = observer(
})}
</div>
</div>
</>
</ControlLink>
</div>
);
})
);

View File

@ -206,12 +206,13 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
return (
<>
<td id={`issue-${issueId}`} ref={cellRef} tabIndex={0} className="sticky left-0 z-10">
<div className="group relative">
<ControlLink
href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issueDetail)}
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 border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issueDetail.id),
@ -261,6 +262,11 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
</Tooltip>
</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" : ""}`}>
{quickActions({
issue: issueDetail,
@ -270,7 +276,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
})}
</div>
</div>
</ControlLink>
</div>
</td>
{/* Rest of the columns */}
{spreadsheetColumnsList.map((property) => (