forked from github/plane
chore: nested issue highlighting improvement (#4488)
This commit is contained in:
parent
c054b18ad5
commit
f9de1e790c
@ -46,7 +46,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
|
||||
// hooks
|
||||
const { workspaceSlug } = useAppRouter();
|
||||
const { getProjectIdentifierById } = useProject();
|
||||
const { getIsIssuePeeked, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
|
||||
const { getIsIssuePeeked, peekIssue, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
|
||||
|
||||
const handleIssuePeekOverview = (issue: TIssue) =>
|
||||
workspaceSlug &&
|
||||
@ -54,7 +54,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
|
||||
issue.project_id &&
|
||||
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 subIssues = subIssuesStore.subIssuesByIssueId(issueId);
|
||||
@ -88,7 +88,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
|
||||
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",
|
||||
{
|
||||
"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),
|
||||
}
|
||||
)}
|
||||
|
@ -151,7 +151,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
|
||||
const { workspaceSlug } = router.query;
|
||||
// hooks
|
||||
const { getProjectIdentifierById } = useProject();
|
||||
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
|
||||
const { getIsIssuePeeked, peekIssue, setPeekIssue } = useIssueDetail();
|
||||
const { isMobile } = usePlatformOS();
|
||||
|
||||
const handleIssuePeekOverview = (issue: TIssue) =>
|
||||
@ -160,7 +160,12 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
|
||||
issue.project_id &&
|
||||
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();
|
||||
|
||||
@ -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",
|
||||
{
|
||||
"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,
|
||||
}
|
||||
)}
|
||||
|
@ -29,6 +29,7 @@ export type TPeekIssue = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
nestingLevel?: number;
|
||||
};
|
||||
|
||||
export type TIssueRelationModal = {
|
||||
|
Loading…
Reference in New Issue
Block a user