From 3f7f91e120bd75c10047451464fdfddba5e6f5b1 Mon Sep 17 00:00:00 2001 From: Ramesh Kumar Chandra <31303617+rameshkumarchandra@users.noreply.github.com> Date: Mon, 12 Feb 2024 12:34:15 +0530 Subject: [PATCH] fix: breadcrumbs responsiveness fix, modules list mobile responsive layout component added, inbox button fix for responsiveness, board view card responsiveness in cycles and modules (#3620) --- packages/ui/src/breadcrumbs/breadcrumbs.tsx | 72 ++++++-- web/components/cycles/cycle-peek-overview.tsx | 2 +- web/components/cycles/cycles-board-card.tsx | 8 +- web/components/cycles/cycles-list-item.tsx | 2 +- web/components/cycles/sidebar.tsx | 26 ++- web/components/headers/cycle-issues.tsx | 6 +- web/components/headers/cycles.tsx | 4 +- web/components/headers/module-issues.tsx | 11 +- web/components/headers/modules-list.tsx | 156 +++++++++------- web/components/headers/project-issues.tsx | 75 ++++---- web/components/headers/project-settings.tsx | 2 +- web/components/headers/projects.tsx | 2 +- web/components/modules/module-card-item.tsx | 8 +- web/components/modules/module-list-item.tsx | 171 +++++++++--------- .../modules/module-peek-overview.tsx | 2 +- web/components/modules/sidebar.tsx | 27 ++- 16 files changed, 320 insertions(+), 254 deletions(-) diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx index a2ae1d680..9a3b69bb8 100644 --- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx +++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx @@ -1,35 +1,73 @@ import * as React from "react"; - -// icons import { ChevronRight } from "lucide-react"; type BreadcrumbsProps = { - children: any; + children: React.ReactNode; + onBack?: () => void; }; -const Breadcrumbs = ({ children }: BreadcrumbsProps) => ( -
- {React.Children.map(children, (child, index) => ( -
- {child} - {index !== React.Children.count(children) - 1 && ( -
- ))} -
-); +const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => { + const [isSmallScreen, setIsSmallScreen] = React.useState(false); + + React.useEffect(() => { + const handleResize = () => { + setIsSmallScreen(window.innerWidth <= 640); // Adjust this value as per your requirement + }; + + window.addEventListener("resize", handleResize); + handleResize(); // Call it initially to set the correct state + return () => window.removeEventListener("resize", handleResize); + }, []); + + const childrenArray = React.Children.toArray(children); + + return ( +
+ {!isSmallScreen && ( + <> + {childrenArray.map((child, index) => ( + + {index > 0 && !isSmallScreen && ( +
+
+ )} +
0 ? 'hidden sm:flex' : 'flex'}`}> + {child} +
+ + ))} + + )} + + {isSmallScreen && childrenArray.length > 1 && ( + <> +
+ {onBack && ...} +
+
{childrenArray[childrenArray.length - 1]}
+ + )} + {isSmallScreen && childrenArray.length === 1 && childrenArray} +
+ ); +}; type Props = { type?: "text" | "component"; component?: React.ReactNode; link?: JSX.Element; }; + const BreadcrumbItem: React.FC = (props) => { const { type = "text", component, link } = props; - return <>{type != "text" ?
{component}
: link}; + return <>{type !== "text" ?
{component}
: link}; }; Breadcrumbs.BreadcrumbItem = BreadcrumbItem; -export { Breadcrumbs, BreadcrumbItem }; +export { Breadcrumbs, BreadcrumbItem }; \ No newline at end of file diff --git a/web/components/cycles/cycle-peek-overview.tsx b/web/components/cycles/cycle-peek-overview.tsx index b7acff358..fbfb46b50 100644 --- a/web/components/cycles/cycle-peek-overview.tsx +++ b/web/components/cycles/cycle-peek-overview.tsx @@ -38,7 +38,7 @@ export const CyclePeekOverview: React.FC = observer(({ projectId, workspa {peekCycle && (
= (props) => { ? cycleTotalIssues === 0 ? "0 Issue" : cycleTotalIssues === cycleDetails.completed_issues - ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}` - : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues` + ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}` + : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues` : "0 Issue"; const handleCopyText = (e: MouseEvent) => { @@ -158,7 +158,7 @@ export const CyclesBoardCard: FC = (props) => { /> -
+
@@ -236,7 +236,7 @@ export const CyclesBoardCard: FC = (props) => { ) : ( No due date )} -
+
{isEditingAllowed && (cycleDetails.is_favorite ? (
-
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx index 299c71008..1a7bf9c58 100644 --- a/web/components/cycles/sidebar.tsx +++ b/web/components/cycles/sidebar.tsx @@ -403,15 +403,13 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { <> {renderFormattedDate(startDate) ?? "No date selected"} @@ -460,15 +458,13 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { <> {renderFormattedDate(endDate) ?? "No date selected"} @@ -569,8 +565,8 @@ export const CycleDetailsSidebar: React.FC = observer((props) => {
{cycleDetails.distribution?.completion_chart && - cycleDetails.start_date && - cycleDetails.end_date ? ( + cycleDetails.start_date && + cycleDetails.end_date ? (
@@ -584,7 +580,7 @@ export const CycleDetailsSidebar: React.FC = observer((props) => {
-
+
{
- + { label={ <> - {cycleDetails?.name && truncateText(cycleDetails.name, 40)} +
+ {cycleDetails?.name && cycleDetails.name} +
} className="ml-1.5 flex-shrink-0" diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx index a4bf963ab..496fabecd 100644 --- a/web/components/headers/cycles.tsx +++ b/web/components/headers/cycles.tsx @@ -50,7 +50,7 @@ export const CyclesHeader: FC = observer(() => {
- + { toggleCreateCycleModal(true); }} > - Add Cycle +
Add
Cycle
)} diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx index 6287223b0..d51c0f432 100644 --- a/web/components/headers/module-issues.tsx +++ b/web/components/headers/module-issues.tsx @@ -21,7 +21,7 @@ import { ProjectAnalyticsModal } from "components/analytics"; import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle"; import { BreadcrumbLink } from "components/common"; // ui -import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui"; +import { Breadcrumbs, Button, CustomMenu, DiceIcon, LayersIcon } from "@plane/ui"; // icons import { ArrowRight, PanelRight, Plus } from "lucide-react"; // helpers @@ -156,7 +156,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
- + { label={ <> - {moduleDetails?.name && truncateText(moduleDetails.name, 40)} +
+ {moduleDetails?.name && moduleDetails.name} +
} className="ml-1.5 flex-shrink-0" @@ -251,6 +253,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => { Analytics )} diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx index 91e05db46..9ad34678a 100644 --- a/web/components/headers/modules-list.tsx +++ b/web/components/headers/modules-list.tsx @@ -1,11 +1,11 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; -import { Plus } from "lucide-react"; +import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react"; // hooks import { useApplication, useEventTracker, useProject, useUser } from "hooks/store"; import useLocalStorage from "hooks/use-local-storage"; // ui -import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui"; +import { Breadcrumbs, Button, Tooltip, DiceIcon, CustomMenu } from "@plane/ui"; // helper import { renderEmoji } from "helpers/emoji.helper"; // constants @@ -31,75 +31,101 @@ export const ModulesListHeader: React.FC = observer(() => { const canUserCreateModule = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); - return ( -
-
- -
- - - {currentProjectDetails?.name.charAt(0)} - - ) - } - /> - } - /> - } />} - /> - +
+
+
+ +
+ + + {currentProjectDetails?.name.charAt(0)} + + ) + } + /> + } + /> + } />} + /> + +
+
+
+
+ {MODULE_VIEW_LAYOUTS.map((layout) => ( + + + + ))} +
+ {canUserCreateModule && ( + + )}
-
-
+
+ + {modulesView === 'gantt_chart' ? : modulesView === 'grid' ? : } + Layout + + } + customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm" + closeOnSelect + > {MODULE_VIEW_LAYOUTS.map((layout) => ( - - - + setModulesView(layout.key)} + className="flex items-center gap-2" + > + +
{layout.title}
+ ))} -
- {canUserCreateModule && ( - - )} +
); }); + + diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx index 81e2d2d76..c645c6318 100644 --- a/web/components/headers/project-issues.tsx +++ b/web/components/headers/project-issues.tsx @@ -2,7 +2,7 @@ import { useCallback, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; -import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react"; +import { Briefcase, Circle, ExternalLink, Plus, Inbox } from "lucide-react"; // hooks import { useApplication, @@ -120,35 +120,35 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
- + router.back()}> - {renderEmoji(currentProjectDetails.emoji)} - - ) : currentProjectDetails?.icon_prop ? ( -
- {renderEmoji(currentProjectDetails.icon_prop)} -
- ) : ( - - {currentProjectDetails?.name.charAt(0)} - - ) - ) : ( + - + {renderEmoji(currentProjectDetails.emoji)} + + ) : currentProjectDetails?.icon_prop ? ( +
+ {renderEmoji(currentProjectDetails.icon_prop)} +
+ ) : ( + + {currentProjectDetails?.name.charAt(0)} ) - } - /> + ) : ( + + + + ) + } + /> } /> @@ -202,18 +202,19 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
{currentProjectDetails?.inbox_view && inboxDetails && ( - - - - - + + + + + + )} {canUserCreateIssue && ( <> @@ -228,7 +229,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => { size="sm" prependIcon={} > - Add Issue +
Add
Issue )} diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx index fdb033a21..b70a4614f 100644 --- a/web/components/headers/project-settings.tsx +++ b/web/components/headers/project-settings.tsx @@ -36,7 +36,7 @@ export const ProjectSettingHeader: FC = observer((props)
- + { }} className="items-center" > - Add Project +
Add
Project )}
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx index 3d83be010..3275f1fe0 100644 --- a/web/components/modules/module-card-item.tsx +++ b/web/components/modules/module-card-item.tsx @@ -130,8 +130,8 @@ export const ModuleCardItem: React.FC = observer((props) => { ? !moduleTotalIssues || moduleTotalIssues === 0 ? "0 Issue" : moduleTotalIssues === moduleDetails.completed_issues - ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}` - : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues` + ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}` + : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues` : "0 Issue"; return ( @@ -147,7 +147,7 @@ export const ModuleCardItem: React.FC = observer((props) => { )} setDeleteModal(false)} /> -
+
@@ -223,7 +223,7 @@ export const ModuleCardItem: React.FC = observer((props) => { No due date )} -
+
{isEditingAllowed && (moduleDetails.is_favorite ? (
- -
- -
-
+
{moduleStatus && ( = observer((props) => { )}
+
- {renderDate && ( - - {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} - - )} - - -
- {moduleDetails.members_detail.length > 0 ? ( - - {moduleDetails.members_detail.map((member) => ( - - ))} - - ) : ( - - - - )} -
- - - {isEditingAllowed && - (moduleDetails.is_favorite ? ( - - ) : ( - - ))} - - - {isEditingAllowed && ( - <> - - - - Edit module - - - - - - Delete module - - - - )} - - - - Copy module link +
+
+ {renderDate && ( + + {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} - - + )} +
+ +
+ +
+ {moduleDetails.members_detail.length > 0 ? ( + + {moduleDetails.members_detail.map((member) => ( + + ))} + + ) : ( + + + + )} +
+ + + {isEditingAllowed && + (moduleDetails.is_favorite ? ( + + ) : ( + + ))} + + + {isEditingAllowed && ( + <> + + + + Edit module + + + + + + Delete module + + + + )} + + + + Copy module link + + + +
diff --git a/web/components/modules/module-peek-overview.tsx b/web/components/modules/module-peek-overview.tsx index f82d436bc..81614b61b 100644 --- a/web/components/modules/module-peek-overview.tsx +++ b/web/components/modules/module-peek-overview.tsx @@ -39,7 +39,7 @@ export const ModulePeekOverview: React.FC = observer(({ projectId, worksp {peekModule && (
= observer((props) => { = observer((props) => { <> {renderFormattedDate(startDate) ?? "No date selected"} @@ -405,15 +402,13 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { <> {renderFormattedDate(endDate) ?? "No date selected"} @@ -571,7 +566,7 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => {
-
+