mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore : calendar layout improvement (#3705)
* chore: current date indicator added in calendar layout * style: calendar layout ui improvement
This commit is contained in:
parent
a6a28d46c7
commit
6bf9d84bea
@ -76,7 +76,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
{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 &&
|
||||
Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
|
||||
<CalendarWeekDays
|
||||
|
@ -52,12 +52,15 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
|
||||
|
||||
const totalIssues = issueIdList?.length ?? 0;
|
||||
|
||||
const isToday = date.date.toDateString() === new Date().toDateString();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="group relative flex h-full w-full flex-col bg-custom-background-90">
|
||||
{/* header */}
|
||||
<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
|
||||
? date.is_current_month
|
||||
? "font-medium"
|
||||
@ -67,10 +70,16 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
date.date.getDay() === 0 || date.date.getDay() === 6
|
||||
? "bg-custom-background-90"
|
||||
: "bg-custom-background-100"
|
||||
}`}
|
||||
} `}
|
||||
>
|
||||
{date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
|
||||
{date.date.getDate()}
|
||||
{isToday ? (
|
||||
<span className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-primary-100 text-white">
|
||||
{date.date.getDate()}
|
||||
</span>
|
||||
) : (
|
||||
<>{date.date.getDate()}</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* content */}
|
||||
|
@ -50,7 +50,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 divide-x-[0.5px] divide-custom-border-400 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
|
||||
calendarLayout === "month" ? "" : "h-full"
|
||||
}`}
|
||||
>
|
||||
|
@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
@ -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 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}
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user