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

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: выравнивание home Gantt-шкалы

This commit is contained in:
DCCONSTRUCTIONS 2026-04-29 19:58:59 +03:00
parent a7e0a63426
commit 52a05ba607
2 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) => (
<div key={tick.id} className="nodedc-home-gantt-grid-label" style={{ left: `${tick.left}px` }}>
{tick.label}
<div
key={tick.id}
className={cn("nodedc-home-gantt-grid-label", {
"nodedc-home-gantt-grid-label-today": tick.isToday,
})}
style={{ left: `${tick.left}px` }}
>
<span>{tick.label}</span>
</div>
))}
<div className="nodedc-home-gantt-today-marker" style={{ left: `${timeline.todayLeft}px` }}>
<span className="nodedc-home-gantt-today-pill">Сегодня · {timeline.todayLabel}</span>
</div>
<div className="nodedc-home-gantt-today-marker" style={{ left: `${timeline.todayLeft}px` }} />
</div>
{selectedPreviewItemId && selectedPreviewItem && (

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

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