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

[WEB-2552] fix: issue list overflow and event propagation (#5706)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2024-09-26 16:55:01 +05:30 • committed by GitHub
parent 150af986fd
commit d253933995
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 47 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/core/components/core/modals/existing-issues-list-modal.tsx
View file

@ -249,7 +249,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
} ${selected ? "text-custom-text-100" : ""}`
}
>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 truncate">
<input type="checkbox" checked={selected} readOnly />
<span
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
@ -266,12 +266,12 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
textContainerClassName="text-xs text-custom-text-200"
/>
</span>
{issue.name}
<span className="truncate">{issue.name}</span>
</div>
<a
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
target="_blank"
className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>

4
web/core/components/issues/issue-layouts/list/block.tsx
View file

@ -271,6 +271,10 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
"md:flex": isSidebarCollapsed,
"lg:flex": !isSidebarCollapsed,
})}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
{quickActions({
issue,

14
web/core/components/issues/relations/issue-list-item.tsx
View file

@ -95,12 +95,12 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
id={`issue-${issue.id}`}
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
className="w-full cursor-pointer"
>
{issue && (
<div className="group relative flex min-h-11 h-full w-full items-center gap-3 px-1.5 py-1 transition-all hover:bg-custom-background-90">
<span className="size-5 flex-shrink-0" />
<div className="flex w-full cursor-pointer items-center gap-3">
<div className="flex w-full truncate cursor-pointer items-center gap-3">
<div
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
@ -120,10 +120,16 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
</div>
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>
<span>{issue.name}</span>
<span className="w-full truncate text-sm text-custom-text-100">{issue.name}</span>
</Tooltip>
</div>
<div className="flex-shrink-0 text-sm">
<div
className="flex-shrink-0 text-sm"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<RelationIssueProperty
workspaceSlug={workspaceSlug}
issueId={relationIssueId}

52
web/core/components/issues/sub-issues/issue-list-item.tsx
View file

@ -86,7 +86,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
id={`issue-${issue.id}`}
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
className="w-full cursor-pointer"
>
{issue && (
<div
@ -104,7 +104,9 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
) : (
<div
className="flex h-full w-full cursor-pointer items-center justify-center text-custom-text-400 hover:text-custom-text-300"
onClick={async () => {
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
if (!subIssueHelpers.issue_visibility.includes(issueId)) {
setSubIssueHelpers(parentIssueId, "preview_loader", issueId);
await subIssueOperations.fetchSubIssues(workspaceSlug, projectId, issueId);
@ -125,7 +127,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
)}
</div>
<div className="flex w-full cursor-pointer items-center gap-3">
<div className="flex w-full truncate cursor-pointer items-center gap-3">
<div
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
@ -144,11 +146,17 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
)}
</div>
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>
<span>{issue.name}</span>
<span className="w-full truncate text-sm text-custom-text-100">{issue.name}</span>
</Tooltip>
</div>
<div className="flex-shrink-0 text-sm">
<div
className="flex-shrink-0 text-sm"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<IssueProperty
workspaceSlug={workspaceSlug}
parentIssueId={parentIssueId}
@ -224,24 +232,24 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
</div>
</div>
)}
{/* should not expand the current issue if it is also the root issue*/}
{subIssueHelpers.issue_visibility.includes(issueId) &&
issue.project_id &&
subIssueCount > 0 &&
!isCurrentIssueRoot && (
<IssueList
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
parentIssueId={issue.id}
rootIssueId={rootIssueId}
spacingLeft={spacingLeft + 22}
disabled={disabled}
handleIssueCrudState={handleIssueCrudState}
subIssueOperations={subIssueOperations}
/>
)}
</ControlLink>
{/* should not expand the current issue if it is also the root issue*/}
{subIssueHelpers.issue_visibility.includes(issueId) &&
issue.project_id &&
subIssueCount > 0 &&
!isCurrentIssueRoot && (
<IssueList
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
parentIssueId={issue.id}
rootIssueId={rootIssueId}
spacingLeft={spacingLeft + 22}
disabled={disabled}
handleIssueCrudState={handleIssueCrudState}
subIssueOperations={subIssueOperations}
/>
)}
</div>
);
});