diff --git a/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx b/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx index f2ce50d..72768b3 100644 --- a/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx +++ b/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx @@ -167,7 +167,14 @@ const getTimelineBounds = (items: TGanttTimelinePreviewItem[], settings: TRangeS }; }; -const getTimelineTicks = (startDate: Date, endDate: Date, dayWidth: number, stepDays: number, locale: string) => { +const getTimelineTicks = ( + startDate: Date, + endDate: Date, + dayWidth: number, + stepDays: number, + locale: string, + today: Date +) => { const formatter = new Intl.DateTimeFormat(locale || "ru-RU", { day: "numeric", month: "short", @@ -178,6 +185,7 @@ const getTimelineTicks = (startDate: Date, endDate: Date, dayWidth: number, step const date = addDays(startDate, index * stepDays); return { id: date.toISOString(), + isToday: startOfDay(date).getTime() === startOfDay(today).getTime(), label: formatter.format(date).toUpperCase(), left: getDaysBetween(startDate, date) * dayWidth, }; @@ -320,8 +328,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) { blocks, canvasWidth, gridLines: getTimelineGridLines(startDate, endDate, settings.dayWidth), - ticks: getTimelineTicks(startDate, endDate, settings.dayWidth, settings.tickStepDays, locale), - todayLabel: getShortDateLabel(today, locale), + ticks: getTimelineTicks(startDate, endDate, settings.dayWidth, settings.tickStepDays, locale, today), timelineWidth, todayLeft: getDaysBetween(startDate, today) * settings.dayWidth, }; @@ -557,13 +564,17 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) { /> ))} {timeline.ticks.map((tick) => ( -
- {tick.label} +
+ {tick.label}
))} -
- Сегодня · {timeline.todayLabel} -
+
{selectedPreviewItemId && selectedPreviewItem && ( diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css index 46f30ba..0b5eaf3 100644 --- a/plane-src/apps/web/styles/globals.css +++ b/plane-src/apps/web/styles/globals.css @@ -2042,7 +2042,7 @@ flex-direction: column; justify-content: center; border-radius: 1.7rem; - background: #474747 !important; + background: #050506 !important; padding: 1.6rem 1.35rem; padding-right: max(1.35rem, calc(100% - var(--nodedc-home-title-width))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; @@ -2563,13 +2563,33 @@ .nodedc-home-gantt-grid-label { position: absolute; top: 0; - padding-left: 0.75rem; color: var(--text-color-placeholder); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; + transform: translateX(-50%); + } + + .nodedc-home-gantt-grid-label span { + display: inline-flex; + height: 1.36rem; + align-items: center; + border-radius: 999px; + padding-inline: 0.48rem; + } + + .nodedc-home-gantt-grid-label-today { + color: rgb(var(--nodedc-on-card-active-rgb)); + } + + .nodedc-home-gantt-grid-label-today span { + background: rgb(var(--nodedc-card-active-rgb)); + color: rgb(var(--nodedc-on-card-active-rgb)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.42), + 0 12px 24px rgba(0, 0, 0, 0.24); } .nodedc-home-gantt-today-marker { @@ -2609,28 +2629,6 @@ content: ""; } - .nodedc-home-gantt-today-pill { - position: absolute; - top: 0.15rem; - left: 0; - display: inline-flex; - height: 1.75rem; - align-items: center; - border-radius: 999px; - background: rgb(var(--nodedc-card-active-rgb)); - padding-inline: 0.72rem; - color: rgb(var(--nodedc-on-card-active-rgb)); - font-size: 0.67rem; - font-weight: 800; - letter-spacing: 0; - text-transform: uppercase; - white-space: nowrap; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.42), - 0 12px 24px rgba(0, 0, 0, 0.24); - transform: translateX(-50%); - } - .nodedc-home-gantt-row { display: grid; align-items: center; @@ -2750,7 +2748,6 @@ } .nodedc-home-gantt-grid-label { - padding-left: 0.35rem; font-size: 0.6rem; }