AcadeDoc/apps/client/src/features/acadenice/database-view/renderers/timeline-renderer.module.css
Corentin d0b75774d8 feat(acadenice): add timeline view (Gantt) for databases — R4.1
- 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>
2026-05-08 11:27:11 +02:00

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