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

chore : calendar layout improvement (#3705)

Browse Source 
* chore: current date indicator added in calendar layout

* style: calendar layout ui improvement
This commit is contained in:
Anmol Singh Bhatia 2024-02-20 15:03:58 +05:30 committed by GitHub
parent a6a28d46c7
commit 6bf9d84bea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,7 +76,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} /> <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
<div className="h-full w-full overflow-y-auto"> <div className="h-full w-full overflow-y-auto">
{layout === "month" && ( {layout === "month" && (
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200"> <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-400">
{allWeeksOfActiveMonth && {allWeeksOfActiveMonth &&
Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => ( Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
<CalendarWeekDays <CalendarWeekDays

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

@ -52,12 +52,15 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null; const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
const totalIssues = issueIdList?.length ?? 0; const totalIssues = issueIdList?.length ?? 0;
const isToday = date.date.toDateString() === new Date().toDateString();
return ( return (
<> <>
<div className="group relative flex h-full w-full flex-col bg-custom-background-90"> <div className="group relative flex h-full w-full flex-col bg-custom-background-90">
{/* header */} {/* header */}
<div <div
className={`flex-shrink-0 px-2 py-1 text-right text-xs ${ className={`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 calendarLayout === "month" // if month layout, highlight current month days
? date.is_current_month ? date.is_current_month
? "font-medium" ? "font-medium"
@ -67,10 +70,16 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
date.date.getDay() === 0 || date.date.getDay() === 6 date.date.getDay() === 0 || date.date.getDay() === 6
? "bg-custom-background-90" ? "bg-custom-background-90"
: "bg-custom-background-100" : "bg-custom-background-100"
}`} } `}
> >
{date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "} {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
{isToday ? (
<span className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-primary-100 text-white">
{date.date.getDate()} {date.date.getDate()}
</span>
) : (
<>{date.date.getDate()}</>
)}
</div> </div>
{/* content */} {/* content */}

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

@ -50,7 +50,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
return ( return (
<div <div
className={`grid divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${ className={`grid divide-x-[0.5px] divide-custom-border-400 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
calendarLayout === "month" ? "" : "h-full" calendarLayout === "month" ? "" : "h-full"
}`} }`}
> >

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 ( return (
<div <div
className={`relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${ className={`relative grid divide-x-[0.5px] divide-custom-border-400 text-sm font-medium ${
showWeekends ? "grid-cols-7" : "grid-cols-5" 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; if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
return ( return (
<div key={day.shortTitle} className="flex h-11 items-center bg-custom-background-90 px-4"> <div key={day.shortTitle} className="flex h-11 items-center justify-end bg-custom-background-90 px-4">
{day.shortTitle} {day.shortTitle}
</div> </div>
); );