cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-07 07:19:16 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor(timeline): default to fixed size timeline

Browse Source
This commit is contained in:
Carlos Valente
2025-11-12 06:25:02 +01:00
committed by Carlos Valente
parent 843f5a968d
commit f5753a0f5a
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/timeline/Timeline.tsx
+5 -5
View File
@@ -24,7 +24,7 @@ interface TimelineProps {
export default memo(Timeline); export default memo(Timeline);
function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: TimelineProps) { function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: TimelineProps) {
const { width: screenWidth } = useViewportSize(); const { width: screenWidth } = useViewportSize();
const { hidePast, autosize } = useTimelineOptions(); const { hidePast, fixedSize } = useTimelineOptions();
const selectedRef = useRef<HTMLDivElement>(null); const selectedRef = useRef<HTMLDivElement>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null); const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -38,7 +38,7 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
useHorizontalFollowComponent({ useHorizontalFollowComponent({
followRef: selectedRef, followRef: selectedRef,
scrollRef: scrollContainerRef, scrollRef: scrollContainerRef,
doFollow: autosize, doFollow: !fixedSize,
selectedEventId: selectedEventId, selectedEventId: selectedEventId,
// No offset when hiding past events to ensure content starts at 0 // No offset when hiding past events to ensure content starts at 0
leftOffset: hidePast ? 0 : screenWidth / 6, leftOffset: hidePast ? 0 : screenWidth / 6,
@@ -52,8 +52,8 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
duration: event.duration, duration: event.duration,
})); }));
return calculateTimelineLayout(playableEvents, scheduleStart, scheduleEnd, screenWidth, autosize); return calculateTimelineLayout(playableEvents, scheduleStart, scheduleEnd, screenWidth, !fixedSize);
}, [rundown, scheduleStart, scheduleEnd, screenWidth, autosize]); }, [rundown, scheduleStart, scheduleEnd, screenWidth, fixedSize]);
if (totalDuration === 0) { if (totalDuration === 0) {
return null; return null;
@@ -75,7 +75,7 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
}); });
return ( return (
<div ref={scrollContainerRef} className={cx([style.timelineContainer, autosize && style.scroll])}> <div ref={scrollContainerRef} className={cx([style.timelineContainer, !fixedSize && style.scroll])}>
<div className={style.timeline} style={{ width: totalWidth }}> <div className={style.timeline} style={{ width: totalWidth }}>
<TimelineMarkers startHour={startHour} endHour={endHour} /> <TimelineMarkers startHour={startHour} endHour={endHour} />
{rundown.map((event, index) => { {rundown.map((event, index) => {
apps/client/src/views/timeline/timeline.options.ts
+5 -5
View File
@@ -22,9 +22,9 @@ export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
defaultValue: false, defaultValue: false,
}, },
{ {
id: 'autosize', id: 'fixedSize',
title: 'Autosize timeline', title: 'Fixed timeline size',
description: 'Timeline will adjust sizes to help with readability and automatically scroll if necessary', description: 'Timeline will have a fixed size to prevent scrolling',
type: 'boolean', type: 'boolean',
defaultValue: false, defaultValue: false,
}, },
@@ -35,7 +35,7 @@ export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
type TimelineOptions = { type TimelineOptions = {
hidePast: boolean; hidePast: boolean;
autosize: boolean; fixedSize: boolean;
}; };
/** /**
@@ -48,7 +48,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
return { return {
hidePast: isStringBoolean(getValue('hidePast')), hidePast: isStringBoolean(getValue('hidePast')),
autosize: isStringBoolean(getValue('autosize')), fixedSize: isStringBoolean(getValue('fixedSize')),
}; };
} }