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 93226d0..ffef5c9 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 @@ -148,6 +148,14 @@ const getTimelineTicks = (startDate: Date, endDate: Date, dayWidth: number, step }); }; +const getShortDateLabel = (date: Date, locale: string) => + new Intl.DateTimeFormat(locale || "ru-RU", { + day: "numeric", + month: "short", + }) + .format(date) + .toUpperCase(); + export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) { const { emptyMessage, isLoading = false, items, locale, subtitle, title } = props; const [activeRange, setActiveRange] = useState("Live"); @@ -204,6 +212,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) { blocks, canvasWidth, ticks: getTimelineTicks(startDate, endDate, settings.dayWidth, settings.tickStepDays, locale), + todayLabel: getShortDateLabel(today, locale), timelineWidth, todayLeft: getDaysBetween(startDate, today) * settings.dayWidth, }; @@ -270,7 +279,9 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) { {tick.label} ))} -
+
+ Сегодня · {timeline.todayLabel} +
diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css index 0ccf888..756c08e 100644 --- a/plane-src/apps/web/styles/globals.css +++ b/plane-src/apps/web/styles/globals.css @@ -1798,13 +1798,63 @@ text-transform: uppercase; } - .nodedc-home-gantt-today-line { + .nodedc-home-gantt-today-marker { position: absolute; top: 0; bottom: 0; + z-index: 3; + width: 0; + pointer-events: none; + } + + .nodedc-home-gantt-today-marker::before { + position: absolute; + top: 2.65rem; + bottom: 0.35rem; + left: -1px; width: 2px; - background: rgba(var(--nodedc-card-active-rgb), 0.42); - box-shadow: 0 0 18px rgba(var(--nodedc-card-active-rgb), 0.28); + border-radius: 999px; + background: rgb(var(--nodedc-card-active-rgb)); + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.42), + 0 0 22px rgba(var(--nodedc-card-active-rgb), 0.52); + content: ""; + } + + .nodedc-home-gantt-today-marker::after { + position: absolute; + top: 2.45rem; + left: -0.3rem; + width: 0.6rem; + height: 0.6rem; + border-radius: 999px; + background: rgb(var(--nodedc-card-active-rgb)); + box-shadow: + 0 0 0 0.28rem rgba(0, 0, 0, 0.62), + 0 0 24px rgba(var(--nodedc-card-active-rgb), 0.62); + 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 {