SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: маркер текущего дня в Ганте главной

This commit is contained in:
DCCONSTRUCTIONS 2026-04-24 12:06:07 +03:00
parent 655ff7fc4a
commit 2642a522f2
2 changed files with 65 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx
View File

@ -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<TGanttPreviewRange>("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) {
<span>{tick.label}</span>
</div>
))}
<div className="nodedc-home-gantt-today-line" style={{ left: `${timeline.todayLeft}px` }} />
<div className="nodedc-home-gantt-today-marker" style={{ left: `${timeline.todayLeft}px` }}>
<span className="nodedc-home-gantt-today-pill">Сегодня · {timeline.todayLabel}</span>
</div>
</div>
<div className={cn("relative z-[1] space-y-3 pt-12", { "space-y-2": isCompactMode })}>

56
plane-src/apps/web/styles/globals.css
View File

@ -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 {