From d0d4e65304b748fc094bf860e0d8af06fd18cf13 Mon Sep 17 00:00:00 2001 From: Anastasiya Date: Mon, 26 Aug 2024 14:41:42 +0300 Subject: [PATCH] fix: change timeline`s style --- .../ReportTimeline/ReportTimeline.styled.ts | 66 +++++++++++++++---- .../ReportTimeline/ReportTimeline.tsx | 40 ++++++++--- 2 files changed, 85 insertions(+), 21 deletions(-) diff --git a/application/frontend/src/components/ReportTimeline/ReportTimeline.styled.ts b/application/frontend/src/components/ReportTimeline/ReportTimeline.styled.ts index fb383cf..592114f 100644 --- a/application/frontend/src/components/ReportTimeline/ReportTimeline.styled.ts +++ b/application/frontend/src/components/ReportTimeline/ReportTimeline.styled.ts @@ -2,6 +2,10 @@ import { Box, TableCell, Typography } from "@mui/material" import { styled } from "@mui/material/styles" const ROW_HEIGHT = 60 +const HEADER_ROW_HEIGHT = ROW_HEIGHT +const COLUMN_WIDTH = 100 +const HORIZONTAL_PADDING = 8 +const LINE_HEIGHT = 50 export const ScrollableBox = styled(Box)` overflow-x: auto; @@ -12,42 +16,53 @@ export const ScrollableBox = styled(Box)` export const StickyColumnCell = styled(TableCell)` position: sticky; left: 0; - background-color: #f5f5f5; z-index: 2; - width: 200px; + width: ${COLUMN_WIDTH}px; height: ${ROW_HEIGHT}px; display: flex; align-items: center; - padding: 16px; + padding: 0 ${HORIZONTAL_PADDING}px; border-right: 1px solid #ddd; + vertical-align: middle; + box-sizing: border-box; ` export const StickyHeaderCell = styled(TableCell)` position: sticky; top: 0; - background-color: #f5f5f5; z-index: 3; - width: 60px; - height: ${ROW_HEIGHT}px; + width: ${COLUMN_WIDTH}px; + height: ${HEADER_ROW_HEIGHT}px; border-bottom: 1px solid #ddd; + padding: 0 ${HORIZONTAL_PADDING}px; + vertical-align: middle; + box-sizing: border-box; ` export const TimelineCell = styled(TableCell)` - padding: 0; + padding: 0 ${HORIZONTAL_PADDING}px; border: none; height: ${ROW_HEIGHT}px; position: relative; + vertical-align: middle; + width: ${COLUMN_WIDTH}px; + box-sizing: border-box; ` export const LineContainer = styled(Box)` position: absolute; - top: 0; + top: 50%; left: 0; width: 100%; - height: 100%; + height: ${LINE_HEIGHT}px; + transform: translateY(-50%); background-color: ${(props: { color: string }) => props.color}; - border-radius: 4px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + border-radius: 0; + box-shadow: none; + margin: 0; + padding: 0; + z-index: 1; + box-sizing: border-box; ` export const HeaderText = styled(Typography)` @@ -55,5 +70,32 @@ export const HeaderText = styled(Typography)` text-transform: uppercase; font-weight: 400; text-align: center; - line-height: ${ROW_HEIGHT}px; + line-height: ${HEADER_ROW_HEIGHT}px; + vertical-align: middle; + margin: 0; +` + +export const DateCell = styled(Box)` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: ${HEADER_ROW_HEIGHT}px; + padding: 0; + margin: 0; + box-sizing: border-box; +` + +export const DayOfWeek = styled(Typography)` + font-size: 12px; + color: rgba(0, 0, 0, 0.54); + line-height: 1; + margin: 0; +` + +export const DateNumber = styled(Typography)` + font-size: 16px; + font-weight: bold; + line-height: 1; + margin: 0; ы ` diff --git a/application/frontend/src/components/ReportTimeline/ReportTimeline.tsx b/application/frontend/src/components/ReportTimeline/ReportTimeline.tsx index 13737a1..d10dd34 100644 --- a/application/frontend/src/components/ReportTimeline/ReportTimeline.tsx +++ b/application/frontend/src/components/ReportTimeline/ReportTimeline.tsx @@ -13,6 +13,9 @@ import { } from "@mui/material" import { + DateCell, + DateNumber, + DayOfWeek, HeaderText, LineContainer, ScrollableBox, @@ -24,9 +27,8 @@ import { type Report = { id: number name: string - startDate: Date - endDate: Date - color: string + startDate: string + endDate: string stage: string } @@ -48,6 +50,14 @@ const getDaysArray = (start: Date, end: Date): Date[] => { return arr } +const stageColors: { [key: string]: string } = { + Initial: "rgba(0, 122, 255, 1)", + Onboarding: "rgba(88, 86, 214, 1)", + "In progress": "rgba(255, 59, 48, 1)", + "In review": "rgba(255, 149, 0, 1)", + "In test": "rgba(52, 199, 89, 1)", +} + export const ReportTimeline: React.FC = ({ reports, startDate, endDate }) => { const days = getDaysArray(startDate, endDate) const adjustedDaysOfWeek = [...daysOfWeek.slice(1), daysOfWeek[0]] @@ -88,8 +98,10 @@ export const ReportTimeline: React.FC = ({ reports, startDa {days.map((day, index) => ( - {adjustedDaysOfWeek[day.getDay()]} - {day.getDate()} + + {adjustedDaysOfWeek[day.getDay()]} + {day.getDate()} + ))} @@ -99,12 +111,22 @@ export const ReportTimeline: React.FC = ({ reports, startDa {days.map((day, index) => { - const isWithinRange = - day >= new Date(report.startDate.setHours(0, 0, 0, 0)) && - day <= new Date(report.endDate.setHours(23, 59, 59, 999)) + const reportStartDate = new Date(report.startDate) + const reportEndDate = new Date(report.endDate) + + const dayStart = new Date(day) + dayStart.setHours(0, 0, 0, 0) + + const dayEnd = new Date(day) + dayEnd.setHours(23, 59, 59, 999) + + const isWithinRange = dayStart <= reportEndDate && dayEnd >= reportStartDate + + const color = stageColors[report.stage] + return ( - {isWithinRange && } + {isWithinRange && } ) })}