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

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)

Browse Source
This commit is contained in:
Ramesh Kumar Chandra 2024-02-12 12:34:15 +05:30 committed by GitHub
parent be5d1eb9f9
commit 3f7f91e120
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 320 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/ui/src/breadcrumbs/breadcrumbs.tsx
View File

@ -1,33 +1,71 @@
import * as React from "react"; import * as React from "react";
// icons
import { ChevronRight } from "lucide-react"; import { ChevronRight } from "lucide-react";
type BreadcrumbsProps = { type BreadcrumbsProps = {
children: any; children: React.ReactNode;
onBack?: () => void;
}; };
const Breadcrumbs = ({ children }: BreadcrumbsProps) => ( const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
<div className="flex items-center space-x-2"> const [isSmallScreen, setIsSmallScreen] = React.useState(false);
{React.Children.map(children, (child, index) => (
<div key={index} className="flex items-center gap-2.5"> React.useEffect(() => {
{child} const handleResize = () => {
{index !== React.Children.count(children) - 1 && ( setIsSmallScreen(window.innerWidth <= 640); // Adjust this value as per your requirement
<ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" /> };
)}
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 (
<div className="flex items-center space-x-2 overflow-hidden">
{!isSmallScreen && (
<>
{childrenArray.map((child, index) => (
<React.Fragment key={index}>
{index > 0 && !isSmallScreen && (
<div className="flex items-center gap-2.5">
<ChevronRight
className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
aria-hidden="true"
/>
</div> </div>
)}
<div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? 'hidden sm:flex' : 'flex'}`}>
{child}
</div>
</React.Fragment>
))} ))}
</>
)}
{isSmallScreen && childrenArray.length > 1 && (
<>
<div className="flex items-center gap-2.5">
{onBack && <span onClick={onBack} className="text-custom-text-200">...</span>}
<ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
</div>
<div className="flex items-center gap-2.5">{childrenArray[childrenArray.length - 1]}</div>
</>
)}
{isSmallScreen && childrenArray.length === 1 && childrenArray}
</div> </div>
); );
};
type Props = { type Props = {
type?: "text" | "component"; type?: "text" | "component";
component?: React.ReactNode; component?: React.ReactNode;
link?: JSX.Element; link?: JSX.Element;
}; };
const BreadcrumbItem: React.FC<Props> = (props) => { const BreadcrumbItem: React.FC<Props> = (props) => {
const { type = "text", component, link } = props; const { type = "text", component, link } = props;
return <>{type != "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>; return <>{type !== "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>;
}; };
Breadcrumbs.BreadcrumbItem = BreadcrumbItem; Breadcrumbs.BreadcrumbItem = BreadcrumbItem;

2
web/components/cycles/cycle-peek-overview.tsx
View File

@ -38,7 +38,7 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
{peekCycle && ( {peekCycle && (
<div <div
ref={ref} ref={ref}
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300" className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 fixed md:relative right-0 z-[9]"
style={{ style={{
boxShadow: boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)", "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

4
web/components/cycles/cycles-board-card.tsx
View File

@ -158,7 +158,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
/> />
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
<div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md"> <div className="flex h-44 w-full flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-3 truncate"> <div className="flex items-center gap-3 truncate">
<span className="flex-shrink-0"> <span className="flex-shrink-0">
@ -236,7 +236,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
) : ( ) : (
<span className="text-xs text-custom-text-400">No due date</span> <span className="text-xs text-custom-text-400">No due date</span>
)} )}
<div className="z-10 flex items-center gap-1.5"> <div className="z-[5] flex items-center gap-1.5">
{isEditingAllowed && {isEditingAllowed &&
(cycleDetails.is_favorite ? ( (cycleDetails.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}> <button type="button" onClick={handleRemoveFromFavorites}>

2
web/components/cycles/cycles-list-item.tsx
View File

@ -187,7 +187,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
</Tooltip> </Tooltip>
</div> </div>
<button onClick={openCycleOverview} className="flex-shrink-0 z-10 invisible group-hover:visible"> <button onClick={openCycleOverview} className="flex-shrink-0 z-[5] invisible group-hover:visible">
<Info className="h-4 w-4 text-custom-text-400" /> <Info className="h-4 w-4 text-custom-text-400" />
</button> </button>
</div> </div>

14
web/components/cycles/sidebar.tsx
View File

@ -403,14 +403,12 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<> <>
<Popover.Button <Popover.Button
ref={startDateButtonRef} ref={startDateButtonRef}
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${ className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
disabled={isCompleted || !isEditingAllowed} disabled={isCompleted || !isEditingAllowed}
> >
<span <span
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${ className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${watch("start_date") ? "" : "text-custom-text-400"
watch("start_date") ? "" : "text-custom-text-400"
}`} }`}
> >
{renderFormattedDate(startDate) ?? "No date selected"} {renderFormattedDate(startDate) ?? "No date selected"}
@ -460,14 +458,12 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<> <>
<Popover.Button <Popover.Button
ref={endDateButtonRef} ref={endDateButtonRef}
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${ className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
disabled={isCompleted || !isEditingAllowed} disabled={isCompleted || !isEditingAllowed}
> >
<span <span
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${ className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${watch("end_date") ? "" : "text-custom-text-400"
watch("end_date") ? "" : "text-custom-text-400"
}`} }`}
> >
{renderFormattedDate(endDate) ?? "No date selected"} {renderFormattedDate(endDate) ?? "No date selected"}
@ -584,7 +580,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</div> </div>
<div className="relative h-40 w-80"> <div className="relative h-40 w-full max-w-80">
<ProgressChart <ProgressChart
distribution={cycleDetails.distribution?.completion_chart} distribution={cycleDetails.distribution?.completion_chart}
startDate={cycleDetails.start_date} startDate={cycleDetails.start_date}

6
web/components/headers/cycle-issues.tsx
View File

@ -153,7 +153,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
<div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4"> <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<SidebarHamburgerToggle /> <SidebarHamburgerToggle />
<Breadcrumbs> <Breadcrumbs onBack={router.back}>
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ link={
@ -196,7 +196,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
label={ label={
<> <>
<ContrastIcon className="h-3 w-3" /> <ContrastIcon className="h-3 w-3" />
{cycleDetails?.name && truncateText(cycleDetails.name, 40)} <div className=" w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
{cycleDetails?.name && cycleDetails.name}
</div>
</> </>
} }
className="ml-1.5 flex-shrink-0" className="ml-1.5 flex-shrink-0"

4
web/components/headers/cycles.tsx
View File

@ -50,7 +50,7 @@ export const CyclesHeader: FC = observer(() => {
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap"> <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<SidebarHamburgerToggle /> <SidebarHamburgerToggle />
<div> <div>
<Breadcrumbs> <Breadcrumbs onBack={router.back}>
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ link={
@ -89,7 +89,7 @@ export const CyclesHeader: FC = observer(() => {
toggleCreateCycleModal(true); toggleCreateCycleModal(true);
}} }}
> >
Add Cycle <div className="hidden sm:block">Add</div> Cycle
</Button> </Button>
</div> </div>
)} )}

11
web/components/headers/module-issues.tsx
View File

@ -21,7 +21,7 @@ import { ProjectAnalyticsModal } from "components/analytics";
import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle"; import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
import { BreadcrumbLink } from "components/common"; import { BreadcrumbLink } from "components/common";
// ui // ui
import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui"; import { Breadcrumbs, Button, CustomMenu, DiceIcon, LayersIcon } from "@plane/ui";
// icons // icons
import { ArrowRight, PanelRight, Plus } from "lucide-react"; import { ArrowRight, PanelRight, Plus } from "lucide-react";
// helpers // helpers
@ -156,7 +156,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
<div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4"> <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<SidebarHamburgerToggle /> <SidebarHamburgerToggle />
<Breadcrumbs> <Breadcrumbs onBack={router.back}>
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ link={
@ -199,7 +199,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
label={ label={
<> <>
<DiceIcon className="h-3 w-3" /> <DiceIcon className="h-3 w-3" />
{moduleDetails?.name && truncateText(moduleDetails.name, 40)} <div className="w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
{moduleDetails?.name && moduleDetails.name}
</div>
</> </>
} }
className="ml-1.5 flex-shrink-0" className="ml-1.5 flex-shrink-0"
@ -251,6 +253,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
Analytics Analytics
</Button> </Button>
<Button <Button
className="hidden sm:flex"
onClick={() => { onClick={() => {
setTrackElement("Module issues page"); setTrackElement("Module issues page");
toggleCreateIssueModal(true, EIssuesStoreType.MODULE); toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
@ -258,7 +261,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
size="sm" size="sm"
prependIcon={<Plus />} prependIcon={<Plus />}
> >
<span className="hidden md:block">Add</span> Issue Add Issue
</Button> </Button>
</> </>
)} )}

46
web/components/headers/modules-list.tsx
View File

@ -1,11 +1,11 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react"; import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react";
// hooks // hooks
import { useApplication, useEventTracker, useProject, useUser } from "hooks/store"; import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
import useLocalStorage from "hooks/use-local-storage"; import useLocalStorage from "hooks/use-local-storage";
// ui // ui
import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui"; import { Breadcrumbs, Button, Tooltip, DiceIcon, CustomMenu } from "@plane/ui";
// helper // helper
import { renderEmoji } from "helpers/emoji.helper"; import { renderEmoji } from "helpers/emoji.helper";
// constants // constants
@ -31,13 +31,13 @@ export const ModulesListHeader: React.FC = observer(() => {
const canUserCreateModule = const canUserCreateModule =
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
return ( return (
<div>
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4"> <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap"> <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<SidebarHamburgerToggle /> <SidebarHamburgerToggle />
<div> <div>
<Breadcrumbs> <Breadcrumbs onBack={router.back}>
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ link={
@ -66,20 +66,18 @@ export const ModulesListHeader: React.FC = observer(() => {
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex items-center gap-1 rounded bg-custom-background-80 p-1"> <div className="items-center gap-1 rounded bg-custom-background-80 p-1 hidden md:flex">
{MODULE_VIEW_LAYOUTS.map((layout) => ( {MODULE_VIEW_LAYOUTS.map((layout) => (
<Tooltip key={layout.key} tooltipContent={layout.title}> <Tooltip key={layout.key} tooltipContent={layout.title}>
<button <button
type="button" type="button"
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${ className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${modulesView == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
modulesView == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
}`} }`}
onClick={() => setModulesView(layout.key)} onClick={() => setModulesView(layout.key)}
> >
<layout.icon <layout.icon
strokeWidth={2} strokeWidth={2}
className={`h-3.5 w-3.5 ${ className={`h-3.5 w-3.5 ${modulesView == layout.key ? "text-custom-text-100" : "text-custom-text-200"
modulesView == layout.key ? "text-custom-text-100" : "text-custom-text-200"
}`} }`}
/> />
</button> </button>
@ -96,10 +94,38 @@ export const ModulesListHeader: React.FC = observer(() => {
commandPaletteStore.toggleCreateModuleModal(true); commandPaletteStore.toggleCreateModuleModal(true);
}} }}
> >
Add Module <div className="hidden sm:block">Add</div> Module
</Button> </Button>
)} )}
</div> </div>
</div> </div>
<div className="flex justify-center md:hidden">
<CustomMenu
maxHeight={"md"}
className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
// placement="bottom-start"
customButton={
<span className="flex items-center gap-2">
{modulesView === 'gantt_chart' ? <GanttChartSquare className="w-3 h-3" /> : modulesView === 'grid' ? <LayoutGrid className="w-3 h-3" /> : <List className="w-3 h-3" />}
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
</span>
}
customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
closeOnSelect
>
{MODULE_VIEW_LAYOUTS.map((layout) => (
<CustomMenu.MenuItem
onClick={() => setModulesView(layout.key)}
className="flex items-center gap-2"
>
<layout.icon className="w-3 h-3" />
<div className="text-custom-text-300">{layout.title}</div>
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
</div>
); );
}); });

9
web/components/headers/project-issues.tsx
View File

@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react"; import { Briefcase, Circle, ExternalLink, Plus, Inbox } from "lucide-react";
// hooks // hooks
import { import {
useApplication, useApplication,
@ -120,7 +120,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap"> <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<SidebarHamburgerToggle /> <SidebarHamburgerToggle />
<div> <div>
<Breadcrumbs> <Breadcrumbs onBack={() => router.back()}>
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ link={
@ -203,7 +203,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
</div> </div>
{currentProjectDetails?.inbox_view && inboxDetails && ( {currentProjectDetails?.inbox_view && inboxDetails && (
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
<span> <span className="hidden md:block" >
<Button variant="neutral-primary" size="sm" className="relative"> <Button variant="neutral-primary" size="sm" className="relative">
Inbox Inbox
{inboxDetails?.pending_issue_count > 0 && ( {inboxDetails?.pending_issue_count > 0 && (
@ -213,6 +213,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
)} )}
</Button> </Button>
</span> </span>
<Inbox className="w-4 h-4 mr-2 text-custom-text-200" />
</Link> </Link>
)} )}
{canUserCreateIssue && ( {canUserCreateIssue && (
@ -228,7 +229,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
size="sm" size="sm"
prependIcon={<Plus />} prependIcon={<Plus />}
> >
Add Issue <div className="hidden sm:block">Add</div> Issue
</Button> </Button>
</> </>
)} )}

2
web/components/headers/project-settings.tsx
View File

@ -36,7 +36,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap"> <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div> <div>
<div className="z-50"> <div className="z-50">
<Breadcrumbs> <Breadcrumbs onBack={router.back}>
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ link={

2
web/components/headers/projects.tsx
View File

@ -56,7 +56,7 @@ export const ProjectsHeader = observer(() => {
}} }}
className="items-center" className="items-center"
> >
Add Project <div className="hidden sm:block">Add</div> Project
</Button> </Button>
)} )}
</div> </div>

4
web/components/modules/module-card-item.tsx
View File

@ -147,7 +147,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
)} )}
<DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} /> <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
<Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}> <Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}>
<div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md"> <div className="flex h-44 w-full flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
<div> <div>
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<Tooltip tooltipContent={moduleDetails.name} position="top"> <Tooltip tooltipContent={moduleDetails.name} position="top">
@ -223,7 +223,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
<span className="text-xs text-custom-text-400">No due date</span> <span className="text-xs text-custom-text-400">No due date</span>
)} )}
<div className="z-10 flex items-center gap-1.5"> <div className="z-[5] flex items-center gap-1.5">
{isEditingAllowed && {isEditingAllowed &&
(moduleDetails.is_favorite ? ( (moduleDetails.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}> <button type="button" onClick={handleRemoveFromFavorites}>

23
web/components/modules/module-list-item.tsx
View File

@ -137,8 +137,9 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
)} )}
<DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} /> <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
<Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}> <Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}>
<div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90"> <div className="group flex w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 flex-col sm:flex-row px-5 py-6 text-sm hover:bg-custom-background-90">
<div className="flex w-full items-center gap-3 truncate"> <div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
<div className="relative w-full flex items-center gap-3 overflow-hidden">
<div className="flex items-center gap-4 truncate"> <div className="flex items-center gap-4 truncate">
<span className="flex-shrink-0"> <span className="flex-shrink-0">
<CircularProgressIndicator size={38} percentage={progress}> <CircularProgressIndicator size={38} percentage={progress}>
@ -159,16 +160,14 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
<span className="truncate text-base font-medium">{moduleDetails.name}</span> <span className="truncate text-base font-medium">{moduleDetails.name}</span>
</Tooltip> </Tooltip>
</div> </div>
<button onClick={openModuleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex"> <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
<Info className="h-4 w-4 text-custom-text-400" /> <Info className="h-4 w-4 text-custom-text-400" />
</button> </button>
</div> </div>
<div className="flex items-center justify-center flex-shrink-0">
<div className="flex w-full items-center justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
<div className="flex items-center justify-center">
{moduleStatus && ( {moduleStatus && (
<span <span
className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs" className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs flex-shrink-0"
style={{ style={{
color: moduleStatus.color, color: moduleStatus.color,
backgroundColor: `${moduleStatus.color}20`, backgroundColor: `${moduleStatus.color}20`,
@ -178,15 +177,20 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
</span> </span>
)} )}
</div> </div>
</div>
<div className="flex w-full sm:w-auto relative overflow-hidden items-center gap-2.5 justify-between sm:justify-end sm:flex-shrink-0 ">
<div className="text-xs text-custom-text-300">
{renderDate && ( {renderDate && (
<span className="flex w-40 items-center justify-center gap-2 text-xs text-custom-text-300"> <span className=" text-xs text-custom-text-300">
{renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
</span> </span>
)} )}
</div>
<div className="flex-shrink-0 relative flex items-center gap-3">
<Tooltip tooltipContent={`${moduleDetails.members_detail.length} Members`}> <Tooltip tooltipContent={`${moduleDetails.members_detail.length} Members`}>
<div className="flex w-16 cursor-default items-center justify-center gap-1"> <div className="flex w-10 cursor-default items-center justify-center gap-1">
{moduleDetails.members_detail.length > 0 ? ( {moduleDetails.members_detail.length > 0 ? (
<AvatarGroup showTooltip={false}> <AvatarGroup showTooltip={false}>
{moduleDetails.members_detail.map((member) => ( {moduleDetails.members_detail.map((member) => (
@ -238,6 +242,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
</CustomMenu> </CustomMenu>
</div> </div>
</div> </div>
</div>
</Link> </Link>
</> </>
); );

2
web/components/modules/module-peek-overview.tsx
View File

@ -39,7 +39,7 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
{peekModule && ( {peekModule && (
<div <div
ref={ref} ref={ref}
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300" className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 absolute md:relative right-0 z-[9]"
style={{ style={{
boxShadow: boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)", "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

17
web/components/modules/sidebar.tsx
View File

@ -298,8 +298,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<CustomSelect <CustomSelect
customButton={ customButton={
<span <span
className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${ className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
style={{ style={{
color: moduleStatus ? moduleStatus.color : "#a3a3a2", color: moduleStatus ? moduleStatus.color : "#a3a3a2",
@ -349,14 +348,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<> <>
<Popover.Button <Popover.Button
ref={startDateButtonRef} ref={startDateButtonRef}
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${ className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
disabled={!isEditingAllowed} disabled={!isEditingAllowed}
> >
<span <span
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${ className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${watch("start_date") ? "" : "text-custom-text-400"
watch("start_date") ? "" : "text-custom-text-400"
}`} }`}
> >
{renderFormattedDate(startDate) ?? "No date selected"} {renderFormattedDate(startDate) ?? "No date selected"}
@ -405,14 +402,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<> <>
<Popover.Button <Popover.Button
ref={endDateButtonRef} ref={endDateButtonRef}
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${ className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`} }`}
disabled={!isEditingAllowed} disabled={!isEditingAllowed}
> >
<span <span
className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${ className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${watch("target_date") ? "" : "text-custom-text-400"
watch("target_date") ? "" : "text-custom-text-400"
}`} }`}
> >
{renderFormattedDate(endDate) ?? "No date selected"} {renderFormattedDate(endDate) ?? "No date selected"}
@ -571,7 +566,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</div> </div>
<div className="relative h-40 w-80"> <div className="relative h-40 w-full max-w-80">
<ProgressChart <ProgressChart
distribution={moduleDetails.distribution?.completion_chart ?? {}} distribution={moduleDetails.distribution?.completion_chart ?? {}}
startDate={moduleDetails.start_date} startDate={moduleDetails.start_date}