- New TimelineRenderer using @fullcalendar/timeline + @fullcalendar/resource-timeline - Column mapping config (title/start/end/resource) persisted in bridge Redis TTL 30d - useTimelineConfig hook (GET+POST /views/:viewId/timeline-config) - Inline config panel shown on first use; re-accessible via Configure button - Resource swimlane mode activated automatically when resourceCol is configured - eventResize persists endCol via useUpdateRow (respects canWriteRows) - End date fallback: start + 1 day when endCol is absent - InsertDatabaseModal extended with step 3 for column mapping on timeline views - database-view-component dispatches timeline viewType to TimelineRenderer - 14 client Vitest tests + 12 bridge Vitest tests (26 total new, all green) - 0 TypeScript errors (client + bridge) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
1.4 KiB
CSS
49 lines
1.4 KiB
CSS
.timelineWrapper {
|
|
font-size: var(--mantine-font-size-sm);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.timelineWrapper :global(.fc-toolbar-title) {
|
|
font-size: var(--mantine-font-size-md);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timelineWrapper :global(.fc-button) {
|
|
background-color: var(--mantine-color-gray-1);
|
|
color: var(--mantine-color-gray-8);
|
|
border: 1px solid var(--mantine-color-gray-3);
|
|
border-radius: var(--mantine-radius-sm);
|
|
font-size: var(--mantine-font-size-xs);
|
|
}
|
|
|
|
.timelineWrapper :global(.fc-button:hover) {
|
|
background-color: var(--mantine-color-gray-2);
|
|
}
|
|
|
|
.timelineWrapper :global(.fc-button-primary:not(:disabled):active),
|
|
.timelineWrapper :global(.fc-button-primary:not(:disabled).fc-button-active) {
|
|
background-color: var(--mantine-primary-color-filled);
|
|
border-color: var(--mantine-primary-color-filled);
|
|
color: white;
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .timelineWrapper :global(.fc-button) {
|
|
background-color: var(--mantine-color-dark-5);
|
|
color: var(--mantine-color-dark-0);
|
|
border-color: var(--mantine-color-dark-4);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .timelineWrapper :global(.fc-button:hover) {
|
|
background-color: var(--mantine-color-dark-4);
|
|
}
|
|
|
|
.timelineEvent {
|
|
cursor: pointer;
|
|
border-radius: var(--mantine-radius-xs) !important;
|
|
font-size: var(--mantine-font-size-xs) !important;
|
|
}
|
|
|
|
/* Resource lane styling */
|
|
.timelineWrapper :global(.fc-resource-timeline-divider) {
|
|
width: 3px;
|
|
}
|