github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-759] style: added calendar layout responsiveness (#3969)

Browse Source 
* style: added calendar layout responsiveness

* fix: quick-add-form

* fix: popover menu close on item select

* fix: class conditiion

* code review
This commit is contained in:
Lakhan Baheti 2024-03-18 12:51:19 +05:30 committed by GitHub
parent 4a93fdbdb4
commit e9774e1af3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 343 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/components/issues/issue-layouts/calendar/calendar.tsx
View File

@ -1,9 +1,11 @@
import { useState } from "react";
import { observer } from "mobx-react-lite";
// hooks
import useSize from "hooks/use-window-size";
// components
// ui
import { Spinner } from "@plane/ui";
import { CalendarHeader, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
import { CalendarHeader, CalendarIssueBlocks, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
// types
import {
IIssueDisplayFilterOptions,
@ -15,6 +17,9 @@ import {
TIssueMap,
} from "@plane/types";
import { ICalendarWeek } from "./types";
// helpers
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
import { cn } from "helpers/common.helper";
// constants
import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
import { EUserProjectRoles } from "constants/project";
@ -24,6 +29,7 @@ import { ICycleIssuesFilter } from "store/issue/cycle";
import { IModuleIssuesFilter } from "store/issue/module";
import { IProjectIssuesFilter } from "store/issue/project";
import { IProjectViewIssuesFilter } from "store/issue/project-views";
import { MONTHS_LIST } from "constants/calendar";
type Props = {
issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
@ -62,6 +68,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
updateFilters,
readOnly = false,
} = props;
// states
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
// store hooks
const {
issues: { viewFlags },
@ -70,6 +78,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
const {
membership: { currentProjectRole },
} = useUser();
const [windowWidth] = useSize();
const { enableIssueCreation } = viewFlags || {};
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@ -78,18 +87,30 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
const allWeeksOfActiveMonth = issueCalendarView.allWeeksOfActiveMonth;
if (!calendarPayload)
const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined;
if (!calendarPayload || !formattedDatePayload)
return (
<div className="grid h-full w-full place-items-center">
<Spinner />
</div>
);
const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
return (
<>
<div className="flex h-full w-full flex-col overflow-hidden">
<CalendarHeader issuesFilterStore={issuesFilterStore} updateFilters={updateFilters} />
<div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
<CalendarHeader
setSelectedDate={setSelectedDate}
issuesFilterStore={issuesFilterStore}
updateFilters={updateFilters}
/>
<div
className={cn("flex md:h-full w-full flex-col overflow-y-auto", {
"vertical-scrollbar scrollbar-lg": windowWidth > 768,
})}
>
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
<div className="h-full w-full">
{layout === "month" && (
@ -97,6 +118,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
{allWeeksOfActiveMonth &&
Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
<CalendarWeekDays
selectedDate={selectedDate}
setSelectedDate={setSelectedDate}
issuesFilterStore={issuesFilterStore}
key={weekIndex}
week={week}
@ -115,6 +138,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
)}
{layout === "week" && (
<CalendarWeekDays
selectedDate={selectedDate}
setSelectedDate={setSelectedDate}
issuesFilterStore={issuesFilterStore}
week={issueCalendarView.allDaysOfActiveWeek}
issues={issues}
@ -129,6 +154,28 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
/>
)}
</div>
{/* mobile view */}
<div className="md:hidden">
<p className="p-4 text-xl font-semibold">
{`${selectedDate.getDate()} ${
MONTHS_LIST[selectedDate.getMonth() + 1].title
}, ${selectedDate.getFullYear()}`}
</p>
<CalendarIssueBlocks
date={selectedDate}
issues={issues}
issueIdList={issueIdList}
quickActions={quickActions}
enableQuickIssueCreate
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
quickAddCallback={quickAddCallback}
addIssuesToView={addIssuesToView}
viewId={viewId}
readOnly={readOnly}
isDragDisabled
/>
</div>
</div>
</div>
</>

74
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -1,10 +1,10 @@
import { useState } from "react";
import { Droppable } from "@hello-pangea/dnd";
import { observer } from "mobx-react-lite";
// components
import { CalendarIssueBlocks, ICalendarDate, CalendarQuickAddIssueForm } from "components/issues";
import { CalendarIssueBlocks, ICalendarDate } from "components/issues";
// helpers
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
import { cn } from "helpers/common.helper";
// constants
import { MONTHS_LIST } from "constants/calendar";
// types
@ -31,6 +31,8 @@ type Props = {
addIssuesToView?: (issueIds: string[]) => Promise<any>;
viewId?: string;
readOnly?: boolean;
selectedDate: Date;
setSelectedDate: (date: Date) => void;
};
export const CalendarDayTile: React.FC<Props> = observer((props) => {
@ -46,8 +48,10 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
addIssuesToView,
viewId,
readOnly = false,
selectedDate,
setSelectedDate,
} = props;
const [showAllIssues, setShowAllIssues] = useState(false);
const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
const formattedDatePayload = renderFormattedPayloadDate(date.date);
@ -57,13 +61,14 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
const totalIssues = issueIdList?.length ?? 0;
const isToday = date.date.toDateString() === new Date().toDateString();
const isSelectedDate = date.date.toDateString() == selectedDate.toDateString();
return (
<>
<div className="group relative flex h-full w-full flex-col bg-custom-background-90">
{/* header */}
<div
className={`flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
className={`hidden md:flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
calendarLayout === "month" // if month layout, highlight current month days
? date.is_current_month
? "font-medium"
@ -86,7 +91,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
</div>
{/* content */}
<div className="h-full w-full">
<div className="h-full w-full hidden md:block">
<Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
{(provided, snapshot) => (
<div
@ -99,46 +104,45 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
ref={provided.innerRef}
>
<CalendarIssueBlocks
date={date.date}
issues={issues}
issueIdList={issueIdList}
quickActions={quickActions}
showAllIssues={showAllIssues}
isDragDisabled={readOnly}
addIssuesToView={addIssuesToView}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
quickAddCallback={quickAddCallback}
viewId={viewId}
readOnly={readOnly}
/>
{enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
<div className="px-2 py-1">
<CalendarQuickAddIssueForm
formKey="target_date"
groupId={formattedDatePayload}
prePopulatedData={{
target_date: renderFormattedPayloadDate(date.date) ?? undefined,
}}
quickAddCallback={quickAddCallback}
addIssuesToView={addIssuesToView}
viewId={viewId}
onOpen={() => setShowAllIssues(true)}
/>
</div>
)}
{totalIssues > 4 && (
<div className="flex items-center px-2.5 py-1">
<button
type="button"
className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium hover:bg-custom-background-80 hover:text-custom-text-300"
onClick={() => setShowAllIssues((prevData) => !prevData)}
>
{showAllIssues ? "Hide" : totalIssues - 4 + " more"}
</button>
</div>
)}
{provided.placeholder}
</div>
)}
</Droppable>
</div>
{/* Mobile view content */}
<div
onClick={() => setSelectedDate(date.date)}
className={cn(
"text-sm py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer",
{
"bg-custom-background-100": date.date.getDay() !== 0 && date.date.getDay() !== 6,
}
)}
>
<div
className={cn("h-6 w-6 rounded-full flex items-center justify-center ", {
"bg-custom-primary-100 text-white": isSelectedDate,
"bg-custom-primary-100/10 text-custom-primary-100 ": isToday && !isSelectedDate,
})}
>
{date.date.getDate()}
</div>
{totalIssues > 0 && <div className="flex flex-shrink-0 h-1.5 w-1.5 bg-custom-primary-100 rounded mt-1" />}
</div>
</div>
</>
);

41
web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
View File

@ -4,9 +4,10 @@ import { useRouter } from "next/router";
import { usePopper } from "react-popper";
import { Popover, Transition } from "@headlessui/react";
// hooks
import useSize from "hooks/use-window-size";
// ui
// icons
import { Check, ChevronUp } from "lucide-react";
import { Check, ChevronUp, MoreVerticalIcon } from "lucide-react";
import { ToggleSwitch } from "@plane/ui";
// types
import {
@ -41,6 +42,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
const { projectId } = router.query;
const issueCalendarView = useCalendarView();
const [windowWidth] = useSize();
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -60,7 +62,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
const handleLayoutChange = (layout: TCalendarLayouts) => {
const handleLayoutChange = (layout: TCalendarLayouts, closePopover: any) => {
if (!projectId || !updateFilters) return;
updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, {
@ -75,6 +77,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
? issueCalendarView.calendarFilters.activeMonthDate
: issueCalendarView.calendarFilters.activeWeekDate
);
if (windowWidth <= 768) closePopover(); // close the popover on mobile
};
const handleToggleWeekends = () => {
@ -92,21 +95,24 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
return (
<Popover className="relative">
{({ open }) => (
{({ open, close: closePopover }) => (
<>
<Popover.Button as={React.Fragment}>
<button
type="button"
ref={setReferenceElement}
className={`flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
open ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
<div className="font-medium">Options</div>
<button type="button" ref={setReferenceElement}>
<div
className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
className={`hidden md:flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
open ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
<ChevronUp width={12} strokeWidth={2} />
<div className="font-medium">Options</div>
<div
className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
>
<ChevronUp width={12} strokeWidth={2} />
</div>
</div>
<div className="md:hidden">
<MoreVerticalIcon className="h-4 text-custom-text-200" strokeWidth={2} />
</div>
</button>
</Popover.Button>
@ -132,7 +138,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
key={layout}
type="button"
className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
onClick={() => handleLayoutChange(layoutDetails.key)}
onClick={() => handleLayoutChange(layoutDetails.key, closePopover)}
>
{layoutDetails.title}
{calendarLayout === layout && <Check size={12} strokeWidth={2} />}
@ -144,7 +150,12 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
onClick={handleToggleWeekends}
>
Show weekends
<ToggleSwitch value={showWeekends} onChange={() => {}} />
<ToggleSwitch
value={showWeekends}
onChange={() => {
if (windowWidth <= 768) closePopover(); // close the popover on mobile
}}
/>
</button>
</div>
</div>

4
web/components/issues/issue-layouts/calendar/header.tsx
View File

@ -24,10 +24,11 @@ interface ICalendarHeader {
filterType: EIssueFilterType,
filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
) => Promise<void>;
setSelectedDate: (date: Date) => void;
}
export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
const { issuesFilterStore, updateFilters } = props;
const { issuesFilterStore, updateFilters, setSelectedDate } = props;
const issueCalendarView = useCalendarView();
@ -91,6 +92,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
activeMonthDate: firstDayOfCurrentMonth,
activeWeekDate: today,
});
setSelectedDate(today);
};
return (

2
web/components/issues/issue-layouts/calendar/index.ts
View File

@ -5,6 +5,8 @@ export * from "./types.d";
export * from "./day-tile";
export * from "./header";
export * from "./issue-blocks";
export * from "./issue-block-root";
export * from "./issue-block";
export * from "./week-days";
export * from "./week-header";
export * from "./quick-add-issue-form";

22
web/components/issues/issue-layouts/calendar/issue-block-root.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
// components
import { CalendarIssueBlock } from "components/issues";
// types
import { TIssue, TIssueMap } from "@plane/types";
type Props = {
issues: TIssueMap | undefined;
issueId: string;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
isDragging?: boolean;
};
export const CalendarIssueBlockRoot: React.FC<Props> = (props) => {
const { issues, issueId, quickActions, isDragging } = props;
if (!issues?.[issueId]) return null;
const issue = issues?.[issueId];
return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} />;
};

113
web/components/issues/issue-layouts/calendar/issue-block.tsx Normal file
View File

@ -0,0 +1,113 @@
import { useState, useRef } from "react";
import { MoreHorizontal } from "lucide-react";
import { observer } from "mobx-react";
// components
import { Tooltip, ControlLink } from "@plane/ui";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
// helpers
import { cn } from "helpers/common.helper";
// types
import { TIssue } from "@plane/types";
import { usePlatformOS } from "hooks/use-platform-os";
type Props = {
issue: TIssue;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
isDragging?: boolean;
};
export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
const { issue, quickActions, isDragging = false } = props;
// hooks
const {
router: { workspaceSlug, projectId },
} = useApplication();
const { getProjectIdentifierById } = useProject();
const { getProjectStates } = useProjectState();
const { peekIssue, setPeekIssue } = useIssueDetail();
const { isMobile } = usePlatformOS();
// states
const [isMenuActive, setIsMenuActive] = useState(false);
const menuActionRef = useRef<HTMLDivElement | null>(null);
const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
const handleIssuePeekOverview = (issue: TIssue) =>
workspaceSlug &&
issue &&
issue.project_id &&
issue.id &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
const customActionButton = (
<div
ref={menuActionRef}
className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
}`}
onClick={() => setIsMenuActive(!isMenuActive)}
>
<MoreHorizontal className="h-3.5 w-3.5" />
</div>
);
return (
<ControlLink
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}
className="w-full cursor-pointer text-sm text-custom-text-100"
disabled={!!issue?.tempId}
>
<>
{issue?.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
<div
className={cn(
"group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded border-b md:border-[0.5px] border-custom-border-200 hover:border-custom-border-400 md:px-1 px-4 py-1.5 ",
{
"bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
},
{ "bg-custom-background-100 hover:bg-custom-background-90": !isDragging },
{
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issue.id,
}
)}
>
<div className="flex h-full items-center gap-1.5 truncate">
<span
className="h-full w-0.5 flex-shrink-0 rounded"
style={{
backgroundColor: stateColor,
}}
/>
<div className="flex-shrink-0 text-sm md:text-xs text-custom-text-300">
{getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
</div>
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>
<div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
</Tooltip>
</div>
<div
className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${
isMenuActive ? "!block" : ""
}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
{quickActions(issue, customActionButton)}
</div>
</div>
</>
</ControlLink>
);
});

177
web/components/issues/issue-layouts/calendar/issue-blocks.tsx
View File

@ -1,74 +1,62 @@
import { useState, useRef } from "react";
import { useState } from "react";
import { Draggable } from "@hello-pangea/dnd";
import { observer } from "mobx-react-lite";
import { MoreHorizontal } from "lucide-react";
// components
import { Tooltip, ControlLink } from "@plane/ui";
// hooks
import { cn } from "helpers/common.helper";
import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
import { usePlatformOS } from "hooks/use-platform-os";
import { CalendarQuickAddIssueForm, CalendarIssueBlockRoot } from "components/issues";
// helpers
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
// types
import { TIssue, TIssueMap } from "@plane/types";
import useSize from "hooks/use-window-size";
type Props = {
date: Date;
issues: TIssueMap | undefined;
issueIdList: string[] | null;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
showAllIssues?: boolean;
isDragDisabled?: boolean;
enableQuickIssueCreate?: boolean;
disableIssueCreation?: boolean;
quickAddCallback?: (
workspaceSlug: string,
projectId: string,
data: TIssue,
viewId?: string
) => Promise<TIssue | undefined>;
addIssuesToView?: (issueIds: string[]) => Promise<any>;
viewId?: string;
readOnly?: boolean;
};
export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
const { issues, issueIdList, quickActions, showAllIssues = false, isDragDisabled = false } = props;
// hooks
const {
router: { workspaceSlug, projectId },
} = useApplication();
const { getProjectIdentifierById } = useProject();
const { getProjectStates } = useProjectState();
const { peekIssue, setPeekIssue } = useIssueDetail();
const { isMobile } = usePlatformOS();
date,
issues,
issueIdList,
quickActions,
isDragDisabled = false,
enableQuickIssueCreate,
disableIssueCreation,
quickAddCallback,
addIssuesToView,
viewId,
readOnly,
} = props;
// states
const [isMenuActive, setIsMenuActive] = useState(false);
const [showAllIssues, setShowAllIssues] = useState(false);
// hooks
const [windowWidth] = useSize();
const menuActionRef = useRef<HTMLDivElement | null>(null);
const formattedDatePayload = renderFormattedPayloadDate(date);
const totalIssues = issueIdList?.length ?? 0;
const handleIssuePeekOverview = (issue: TIssue) =>
workspaceSlug &&
issue &&
issue.project_id &&
issue.id &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
const customActionButton = (
<div
ref={menuActionRef}
className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
}`}
onClick={() => setIsMenuActive(!isMenuActive)}
>
<MoreHorizontal className="h-3.5 w-3.5" />
</div>
);
if (!formattedDatePayload) return null;
return (
<>
{issueIdList?.slice(0, showAllIssues ? issueIdList.length : 4).map((issueId, index) => {
if (!issues?.[issueId]) return null;
const issue = issues?.[issueId];
const stateColor =
getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
return (
<Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={isDragDisabled}>
{issueIdList?.slice(0, showAllIssues || windowWidth <= 768 ? issueIdList.length : 4).map((issueId, index) =>
windowWidth > 768 ? (
<Draggable key={issueId} draggableId={issueId} index={index} isDragDisabled={isDragDisabled}>
{(provided, snapshot) => (
<div
className="relative cursor-pointer p-1 px-2"
@ -76,63 +64,46 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<ControlLink
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
disabled={!!issue?.tempId}
>
<>
{issue?.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
<div
className={cn(
"group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-custom-border-200 hover:border-custom-border-400 px-1 py-1.5 ",
{
"bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100":
snapshot.isDragging,
},
{ "bg-custom-background-100 hover:bg-custom-background-90": !snapshot.isDragging },
{
"border border-custom-primary-70 hover:border-custom-primary-70":
peekIssue?.issueId === issue.id,
}
)}
>
<div className="flex h-full items-center gap-1.5">
<span
className="h-full w-0.5 flex-shrink-0 rounded"
style={{
backgroundColor: stateColor,
}}
/>
<div className="flex-shrink-0 text-xs text-custom-text-300">
{getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
</div>
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>
<div className="truncate text-xs">{issue.name}</div>
</Tooltip>
</div>
<div
className={`hidden h-5 w-5 group-hover/calendar-block:block ${isMenuActive ? "!block" : ""}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
{quickActions(issue, customActionButton)}
</div>
</div>
</>
</ControlLink>
<CalendarIssueBlockRoot
issues={issues}
issueId={issueId}
quickActions={quickActions}
isDragging={snapshot.isDragging}
/>
</div>
)}
</Draggable>
);
})}
) : (
<CalendarIssueBlockRoot key={issueId} issues={issues} issueId={issueId} quickActions={quickActions} />
)
)}
{enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
<div className="px-1 md:px-2 py-1 border-custom-border-200 border-b md:border-none">
<CalendarQuickAddIssueForm
formKey="target_date"
groupId={formattedDatePayload}
prePopulatedData={{
target_date: formattedDatePayload,
}}
quickAddCallback={quickAddCallback}
addIssuesToView={addIssuesToView}
viewId={viewId}
onOpen={() => setShowAllIssues(true)}
/>
</div>
)}
{totalIssues > 4 && (
<div className="hidden md:flex items-center px-2.5 py-1">
<button
type="button"
className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium hover:bg-custom-background-80 hover:text-custom-text-300"
onClick={() => setShowAllIssues(!showAllIssues)}
>
{showAllIssues ? "Hide" : totalIssues - 4 + " more"}
</button>
</div>
)}
</>
);
});

8
web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
View File

@ -50,7 +50,7 @@ const Inputs = (props: any) => {
return (
<>
<h4 className="text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
<h4 className="text-sm md:text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
<input
type="text"
autoComplete="off"
@ -58,7 +58,7 @@ const Inputs = (props: any) => {
{...register("name", {
required: "Issue title is required.",
})}
className="w-full rounded-md bg-transparent py-1.5 pr-2 text-xs font-medium leading-5 text-custom-text-200 outline-none"
className="w-full rounded-md bg-transparent py-1.5 pr-2 text-sm md:text-xs font-medium leading-5 text-custom-text-200 outline-none"
/>
</>
);
@ -221,7 +221,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
>
<form
onSubmit={handleSubmit(onSubmitHandler)}
className="z-50 flex w-full items-center gap-x-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 shadow-custom-shadow-2xs transition-opacity"
className="z-50 flex w-full items-center gap-x-2 rounded md:border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 md:shadow-custom-shadow-2xs transition-opacity"
>
<Inputs formKey={formKey} register={register} setFocus={setFocus} projectDetails={projectDetail} />
</form>
@ -230,7 +230,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
{!isOpen && (
<div
className={cn("hidden rounded border-[0.5px] border-custom-border-200 group-hover:block", {
className={cn("md:hidden rounded md:border-[0.5px] border-custom-border-200 md:group-hover:block", {
block: isMenuOpen,
})}
>

8
web/components/issues/issue-layouts/calendar/week-days.tsx
View File

@ -28,6 +28,8 @@ type Props = {
addIssuesToView?: (issueIds: string[]) => Promise<any>;
viewId?: string;
readOnly?: boolean;
selectedDate: Date;
setSelectedDate: (date: Date) => void;
};
export const CalendarWeekDays: React.FC<Props> = observer((props) => {
@ -43,6 +45,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
addIssuesToView,
viewId,
readOnly = false,
selectedDate,
setSelectedDate,
} = props;
const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@ -52,7 +56,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
return (
<div
className={`grid divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
className={`grid md:divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
calendarLayout === "month" ? "" : "h-full"
}`}
>
@ -61,6 +65,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
return (
<CalendarDayTile
selectedDate={selectedDate}
setSelectedDate={setSelectedDate}
issuesFilterStore={issuesFilterStore}
key={renderFormattedPayloadDate(date.date)}
date={date}

4
web/components/issues/issue-layouts/calendar/week-header.tsx
View File

@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
return (
<div
className={`relative sticky top-0 z-[1] grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
className={`relative sticky top-0 z-[1] grid md:divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
showWeekends ? "grid-cols-7" : "grid-cols-5"
}`}
>
@ -24,7 +24,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
return (
<div key={day.shortTitle} className="flex h-11 items-center justify-end bg-custom-background-90 px-4">
<div key={day.shortTitle} className="flex h-11 items-center justify-center md:justify-end bg-custom-background-90 px-4">
{day.shortTitle}
</div>
);