From 4caa4e33b1c163b38859fc921814202f0182f884 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Thu, 23 Feb 2023 16:46:52 +0530 Subject: [PATCH] fix: ui improvements (#327) * fix: kanban board header scroll fix * style: enable scrollbar style added * fix: emoji picker overflow * fix: delete project modal text overflow * fix: cycle card ellipsis * fix: tooltip position updated and custom class added * fix: assignees tooltip overflow * fix: module card * fix: my issue page tooltip and responsive title added * fix: home page tooltip and responsiveness --- .../core/board-view/single-board.tsx | 4 +- .../components/cycles/single-cycle-card.tsx | 2 +- .../components/emoji-icon-picker/index.tsx | 2 +- .../components/issues/my-issues-list-item.tsx | 41 ++++-- .../issues/view-select/assignee.tsx | 1 + .../components/modules/single-module-card.tsx | 44 +++++- .../project/confirm-project-deletion.tsx | 6 +- apps/app/components/ui/tooltip.tsx | 23 +++- apps/app/pages/[workspaceSlug]/index.tsx | 125 ++++++++++-------- apps/app/styles/globals.css | 4 + 10 files changed, 168 insertions(+), 84 deletions(-) diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx index 5fee43c88..cc7e6d084 100644 --- a/apps/app/components/core/board-view/single-board.tsx +++ b/apps/app/components/core/board-view/single-board.tsx @@ -72,7 +72,7 @@ export const SingleBoard: React.FC = ({ return (
-
+
= ({ {(provided, snapshot) => (
= (props) => {
-
+

diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx index a441cd4cb..711be870d 100644 --- a/apps/app/components/emoji-icon-picker/index.tsx +++ b/apps/app/components/emoji-icon-picker/index.tsx @@ -59,7 +59,7 @@ const EmojiIconPicker: React.FC = ({ label, value, onChange }) => { leaveTo="transform opacity-0 scale-95" > -
+
{tabOptions.map((tab) => ( diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx index 60eb7c61d..8e81c40ea 100644 --- a/apps/app/components/issues/my-issues-list-item.tsx +++ b/apps/app/components/issues/my-issues-list-item.tsx @@ -15,7 +15,7 @@ import { } from "components/issues/view-select"; // ui import { AssigneesList } from "components/ui/avatar"; -import { CustomMenu } from "components/ui"; +import { CustomMenu, Tooltip } from "components/ui"; // types import { IIssue, Properties } from "types"; // fetch-keys @@ -78,13 +78,20 @@ export const MyIssuesListItem: React.FC = ({ {properties?.key && ( - - {issue.project_detail?.identifier}-{issue.sequence_id} - + + + {issue.project_detail?.identifier}-{issue.sequence_id} + + )} - - {issue.name} - + + + {issue.name} + +
@@ -134,9 +141,23 @@ export const MyIssuesListItem: React.FC = ({
)} {properties.assignee && ( -
- -
+ 0 + ? issue.assignee_details + .map((assignee) => + assignee?.first_name !== "" ? assignee?.first_name : assignee?.email + ) + .join(", ") + : "No Assignee" + } + > +
+ +
+ )} Delete permanently diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx index f9b1c28cd..ba7816471 100644 --- a/apps/app/components/issues/view-select/assignee.tsx +++ b/apps/app/components/issues/view-select/assignee.tsx @@ -57,6 +57,7 @@ export const ViewAssigneeSelect: React.FC = ({
0 diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx index baa964f5a..8651f0a33 100644 --- a/apps/app/components/modules/single-module-card.tsx +++ b/apps/app/components/modules/single-module-card.tsx @@ -2,12 +2,14 @@ import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; +import Image from "next/image"; // components import { DeleteModuleModal } from "components/modules"; // ui import { AssigneesList, Avatar, CustomMenu } from "components/ui"; // icons +import User from "public/user.png"; import { CalendarDaysIcon } from "@heroicons/react/24/outline"; // helpers import { renderShortNumericDateFormat } from "helpers/date-time.helper"; @@ -67,24 +69,52 @@ export const SingleModuleCard: React.FC = ({ module, handleEditModule })
- - {module.name} + + + {module.name} +
-
+
LEAD
- + {module.lead_detail ? ( + + ) : ( +
+ N/A + N/A +
+ )}
MEMBERS
-
- +
+ {module.members_detail && module.members_detail.length > 0 ? ( + + ) : ( +
+ N/A + N/A +
+ )}
END DATE
-
+
{module.target_date ? renderShortNumericDateFormat(module?.target_date) : "N/A"}
diff --git a/apps/app/components/project/confirm-project-deletion.tsx b/apps/app/components/project/confirm-project-deletion.tsx index 236f71bdf..5c94772a5 100644 --- a/apps/app/components/project/confirm-project-deletion.tsx +++ b/apps/app/components/project/confirm-project-deletion.tsx @@ -122,12 +122,12 @@ const ConfirmProjectDeletion: React.FC = (props) = aria-hidden="true" />
-
+
Delete Project
-

+

Are you sure you want to delete project - {`"`} {selectedProject?.name} {`"`} ? All of the data related to the project will be permanently @@ -136,7 +136,7 @@ const ConfirmProjectDeletion: React.FC = (props) =

-

+

Enter the project name{" "} {selectedProject?.name} to continue: diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx index f7fb77425..1b7f40fea 100644 --- a/apps/app/components/ui/tooltip.tsx +++ b/apps/app/components/ui/tooltip.tsx @@ -5,9 +5,25 @@ import { Tooltip2 } from "@blueprintjs/popover2"; type Props = { tooltipHeading?: string; tooltipContent: string; - position?: "top" | "right" | "bottom" | "left"; + position?: + | "top" + | "right" + | "bottom" + | "left" + | "auto" + | "auto-end" + | "auto-start" + | "bottom-left" + | "bottom-right" + | "left-bottom" + | "left-top" + | "right-bottom" + | "right-top" + | "top-left" + | "top-right"; children: JSX.Element; disabled?: boolean; + className?: string; }; export const Tooltip: React.FC = ({ @@ -16,11 +32,14 @@ export const Tooltip: React.FC = ({ position = "top", children, disabled = false, + className = "", }) => ( +

{tooltipHeading ? ( <>
{tooltipHeading}
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx index ef0fb9d88..22b6d5596 100644 --- a/apps/app/pages/[workspaceSlug]/index.tsx +++ b/apps/app/pages/[workspaceSlug]/index.tsx @@ -14,7 +14,7 @@ import useIssues from "hooks/use-issues"; // components import { WorkspaceHomeCardsList, WorkspaceHomeGreetings } from "components/workspace"; // ui -import { Spinner } from "components/ui"; +import { Spinner, Tooltip } from "components/ui"; // icons import { ArrowRightIcon, @@ -90,69 +90,78 @@ const WorkspacePage: NextPage = () => { href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`} > - {issue.name} + + + {issue.name} + +
-
- {getPriorityIcon(issue.priority)} -
- -
- - {addSpaceIfCamelCase(issue.state_detail.name)} -
-
- - {issue.target_date - ? renderShortNumericDateFormat(issue.target_date) - : "N/A"} -
-
Target date
-
- {renderShortNumericDateFormat(issue.target_date ?? "")} -
-
- {issue.target_date && - (issue.target_date < new Date().toISOString() - ? `Target date has passed by ${findHowManyDaysLeft( - issue.target_date - )} days` - : findHowManyDaysLeft(issue.target_date) <= 3 - ? `Target date is in ${findHowManyDaysLeft( - issue.target_date - )} days` - : "Target date")} -
+
+ {getPriorityIcon(issue.priority)}
-
+ + +
+ + + {addSpaceIfCamelCase(issue.state_detail.name)} +
+ + +
+ + {issue.target_date + ? renderShortNumericDateFormat(issue.target_date) + : "N/A"} +
+
))} diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css index 7ed87ba41..ccb9ea2f1 100644 --- a/apps/app/styles/globals.css +++ b/apps/app/styles/globals.css @@ -23,6 +23,10 @@ -webkit-font-smoothing: antialiased; } +.scrollbar-enable::-webkit-scrollbar { + display: block ; +} + /* Scrollbar style */ ::-webkit-scrollbar { display: none;