From 549790ee8a8a41386f4190512385cc8cf6313110 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 10 Apr 2024 14:03:22 +0530 Subject: [PATCH] [WEB-905] chore: kanban card icon color improvement (#4156) * chore: kanban card icon color improvement * chore: kanban card clickable area improvement --- web/components/dropdowns/date.tsx | 1 + .../issues/issue-layouts/kanban/block.tsx | 109 +++++++++--------- .../properties/all-properties.tsx | 55 ++++++--- .../issue-layouts/properties/labels.tsx | 6 +- 4 files changed, 97 insertions(+), 74 deletions(-) diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx index 8e207796d..e50379fc9 100644 --- a/web/components/dropdowns/date.tsx +++ b/web/components/dropdowns/date.tsx @@ -152,6 +152,7 @@ export const DateDropdown: React.FC = (props) => { className={cn("h-2.5 w-2.5 flex-shrink-0", clearIconClassName)} onClick={(e) => { e.stopPropagation(); + e.preventDefault(); onChange(null); }} /> diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx index 1e7bbcb6c..1c7cc7229 100644 --- a/web/components/issues/issue-layouts/kanban/block.tsx +++ b/web/components/issues/issue-layouts/kanban/block.tsx @@ -3,7 +3,7 @@ import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pan import { observer } from "mobx-react-lite"; import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types"; // hooks -import { Tooltip, ControlLink } from "@plane/ui"; +import { ControlLink, Tooltip } from "@plane/ui"; import RenderIfVisible from "@/components/core/render-if-visible-HOC"; import { cn } from "@/helpers/common.helper"; import { useApplication, useIssueDetail, useProject } from "@/hooks/store"; @@ -44,23 +44,16 @@ const KanbanIssueDetailsBlock: React.FC = observer((prop // hooks const { isMobile } = usePlatformOS(); const { getProjectIdentifierById } = useProject(); - const { - router: { workspaceSlug }, - } = useApplication(); - const { peekIssue, setPeekIssue } = useIssueDetail(); - const handleIssuePeekOverview = (issue: TIssue) => - workspaceSlug && - issue && - issue.project_id && - issue.id && - peekIssue?.issueId !== issue.id && - setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); + const handleEventPropagation = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + }; return ( <> -
+
{getProjectIdentifierById(issue.project_id)}-{issue.sequence_id}
@@ -73,24 +66,13 @@ const KanbanIssueDetailsBlock: React.FC = observer((prop {issue.name} ) : ( - handleIssuePeekOverview(issue)} - className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100 pb-1.5" - disabled={!!issue?.tempId} - > - - {issue.name} - - + + {issue.name} + )} = memo((props) => { issueIds, } = props; + const { + router: { workspaceSlug }, + } = useApplication(); + const { peekIssue, setPeekIssue } = useIssueDetail(); + + const handleIssuePeekOverview = (issue: TIssue) => + workspaceSlug && + issue && + issue.project_id && + issue.id && + peekIssue?.issueId !== issue.id && + setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); + const issue = issuesMap[issueId]; if (!issue) return null; @@ -138,32 +133,42 @@ export const KanbanIssueBlock: React.FC = memo((props) => { {...provided.dragHandleProps} ref={provided.innerRef} > -
handleIssuePeekOverview(issue)} + disabled={!!issue?.tempId} > - - - -
+ + + +
+
)} diff --git a/web/components/issues/issue-layouts/properties/all-properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx index ab1cad738..0904d144a 100644 --- a/web/components/issues/issue-layouts/properties/all-properties.tsx +++ b/web/components/issues/issue-layouts/properties/all-properties.tsx @@ -254,12 +254,17 @@ export const IssueProperties: React.FC = observer((props) => { const maxDate = getDate(issue.target_date); maxDate?.setDate(maxDate.getDate()); + const handleEventPropagation = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + }; + return (
{/* basic properties */} {/* state */} -
+
= observer((props) => { {/* priority */} -
+
= observer((props) => { {/* label */} - +
+ +
{/* start date */} -
+
= observer((props) => { {/* target/due date */} -
+
= observer((props) => { {/* assignee */} -
+
= observer((props) => { {/* modules */} {projectDetails?.module_view && ( -
+
= observer((props) => { {/* cycles */} {projectDetails?.cycle_view && ( -
+
= observer((props) => { {/* estimates */} {areEstimatesEnabledForCurrentProject && ( -
+
= observer((props) => { >
{}} + onClick={(e) => { + e.stopPropagation(); + e.preventDefault(); + if (issue.sub_issues_count) redirectToIssueDetail(); + }} className={cn( "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1", { @@ -432,7 +443,10 @@ export const IssueProperties: React.FC = observer((props) => { shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count} > -
+
{issue.attachment_count}
@@ -446,7 +460,10 @@ export const IssueProperties: React.FC = observer((props) => { shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count} > -
+
{issue.link_count}
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx index 5530e6a01..e2212d0c7 100644 --- a/web/components/issues/issue-layouts/properties/labels.tsx +++ b/web/components/issues/issue-layouts/properties/labels.tsx @@ -143,7 +143,7 @@ export const IssuePropertyLabels: React.FC = observer((pro query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); const label = ( -
+
{value.length > 0 ? ( value.length <= maxRender ? ( <> @@ -232,8 +232,8 @@ export const IssuePropertyLabels: React.FC = observer((pro disabled ? "cursor-not-allowed text-custom-text-200" : value.length <= maxRender - ? "cursor-pointer" - : "cursor-pointer hover:bg-custom-background-80" + ? "cursor-pointer" + : "cursor-pointer hover:bg-custom-background-80" } ${buttonClassName}`} onClick={handleOnClick} >