thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: nested issue highlighting improvement (#4488)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-05-17 12:17:43 +05:30 committed by GitHub
parent c054b18ad5
commit f9de1e790c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/issues/issue-layouts/list/block.tsx
View File

@ -46,7 +46,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
// hooks // hooks
const { workspaceSlug } = useAppRouter(); const { workspaceSlug } = useAppRouter();
const { getProjectIdentifierById } = useProject(); const { getProjectIdentifierById } = useProject();
const { getIsIssuePeeked, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail(); const { getIsIssuePeeked, peekIssue, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
const handleIssuePeekOverview = (issue: TIssue) => const handleIssuePeekOverview = (issue: TIssue) =>
workspaceSlug && workspaceSlug &&
@ -54,7 +54,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
issue.project_id && issue.project_id &&
issue.id && issue.id &&
!getIsIssuePeeked(issue.id) && !getIsIssuePeeked(issue.id) &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id, nestingLevel: nestingLevel });
const issue = issuesMap[issueId]; const issue = issuesMap[issueId];
// const subIssues = subIssuesStore.subIssuesByIssueId(issueId); // const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
@ -88,7 +88,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
className={cn( className={cn(
"min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-1.5 text-sm", "min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-1.5 text-sm",
{ {
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id), "border border-custom-primary-70 hover:border-custom-primary-70":
getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
"last:border-b-transparent": !getIsIssuePeeked(issue.id), "last:border-b-transparent": !getIsIssuePeeked(issue.id),
} }
)} )}

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

@ -151,7 +151,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
// hooks // hooks
const { getProjectIdentifierById } = useProject(); const { getProjectIdentifierById } = useProject();
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const { getIsIssuePeeked, peekIssue, setPeekIssue } = useIssueDetail();
const { isMobile } = usePlatformOS(); const { isMobile } = usePlatformOS();
const handleIssuePeekOverview = (issue: TIssue) => const handleIssuePeekOverview = (issue: TIssue) =>
@ -160,7 +160,12 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
issue.project_id && issue.project_id &&
issue.id && issue.id &&
!getIsIssuePeeked(issue.id) && !getIsIssuePeeked(issue.id) &&
setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id }); setPeekIssue({
workspaceSlug: workspaceSlug.toString(),
projectId: issue.project_id,
issueId: issue.id,
nestingLevel: nestingLevel,
});
const { subIssues: subIssuesStore, issue } = useIssueDetail(); const { subIssues: subIssuesStore, issue } = useIssueDetail();
@ -213,7 +218,8 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
"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", "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",
{ {
"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) && nestingLevel === peekIssue?.nestingLevel,
"shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current, "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
} }
)} )}

1
web/store/issue/issue-details/root.store.ts
View File

@ -29,6 +29,7 @@ export type TPeekIssue = {
workspaceSlug: string; workspaceSlug: string;
projectId: string; projectId: string;
issueId: string; issueId: string;
nestingLevel?: number;
}; };
export type TIssueRelationModal = { export type TIssueRelationModal = {