binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: issue click & peek overview improvement (#3157)

Browse source 
* improve issue popover to detect outside click

* chore: stopPropagation event added to prevent peekoverview triggering in action menu & issue properties

* chore: stopPropagation event added to prevent peekoverview triggering in issue properties

* chore: enable entire issue card clickability in list and kanban layout, introduce control-click functionality
to open issues in new tabs

* chore: build error fix and unused variable removed

* chore: build error fix

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2023-12-18 12:11:14 +05:30 • committed by GitHub
parent a37dec45d9
commit 969a51f425
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 167 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/components/issues/issue-layouts/properties/assignee.tsx
View file

@ -142,7 +142,10 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
className={`flex w-full items-center justify-between gap-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
} ${buttonClassName}`}
onClick={() => (!projectId || !_members[projectId]) && getProjectMembers()}
onClick={(e) => {
e.stopPropagation();
(!projectId || !_members[projectId]) && getProjectMembers();
}}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -178,6 +181,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
active && !selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>

5
web/components/issues/issue-layouts/properties/date.tsx
View file

@ -56,12 +56,14 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
return (
<>
<Popover.Button
as="button"
ref={dropdownBtn}
className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
disabled
? "pointer-events-none cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
}`}
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-center gap-2 overflow-hidden">
<dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
@ -92,7 +94,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
{({ close }) => (
<DatePicker
selected={value ? new Date(value) : new Date()}
onChange={(val: any) => {
onChange={(val: any, e) => {
e?.stopPropagation();
if (onChange && val) {
onChange(renderDateFormat(val));
close();

2
web/components/issues/issue-layouts/properties/estimates.tsx
View file

@ -116,6 +116,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={(e) => e.stopPropagation()}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -150,6 +151,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>

6
web/components/issues/issue-layouts/properties/labels.tsx
View file

@ -177,7 +177,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={() => !storeLabels && fetchLabels()}
onClick={(e) => {
e.stopPropagation();
!storeLabels && fetchLabels();
}}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -214,6 +217,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
selected ? "text-custom-text-100" : "text-custom-text-200"
}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>

6
web/components/issues/issue-layouts/properties/state.tsx
View file

@ -121,7 +121,10 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={() => !storeStates && fetchProjectStates()}
onClick={(e) => {
e.stopPropagation();
!storeStates && fetchProjectStates();
}}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -157,6 +160,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>