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;
}