xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: timeline tracks

Browse Source
This commit is contained in:
Maze Winther
2025-07-09 22:31:45 +02:00
parent f4fbdf14a9
commit 059a4f4205
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/src/components/editor/timeline.tsx
View File

@ -999,11 +999,11 @@ export function Timeline() {
{/* Track Labels */} {/* Track Labels */}
{tracks.length > 0 && ( {tracks.length > 0 && (
<div className="w-48 flex-shrink-0 border-r bg-panel-accent overflow-y-auto"> <div className="w-48 flex-shrink-0 border-r bg-panel-accent overflow-y-auto">
<div className="flex flex-col"> <div className="flex flex-col gap-1">
{tracks.map((track) => ( {tracks.map((track) => (
<div <div
key={track.id} key={track.id}
className="flex items-center px-3 border-b border-muted/30 group" className="flex items-center px-3 border-b border-muted/30 group bg-foreground/5"
style={{ height: `${getTrackHeight(track.type)}px` }} style={{ height: `${getTrackHeight(track.type)}px` }}
> >
<div className="flex items-center flex-1 min-w-0"> <div className="flex items-center flex-1 min-w-0">
@ -1043,7 +1043,7 @@ export function Timeline() {
<ContextMenu key={track.id}> <ContextMenu key={track.id}>
<ContextMenuTrigger asChild> <ContextMenuTrigger asChild>
<div <div
className="absolute left-0 right-0 border-b border-muted/30" className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]"
style={{ style={{
top: `${getCumulativeHeightBefore(tracks, index)}px`, top: `${getCumulativeHeightBefore(tracks, index)}px`,
height: `${getTrackHeight(track.type)}px`, height: `${getTrackHeight(track.type)}px`,

11
apps/web/src/lib/timeline-constants.ts
View File

@ -49,16 +49,23 @@ export function getCumulativeHeightBefore(
tracks: Array<{ type: TrackType }>, tracks: Array<{ type: TrackType }>,
trackIndex: number trackIndex: number
): number { ): number {
const GAP = 4; // 4px gap between tracks (equivalent to Tailwind's gap-1)
return tracks return tracks
.slice(0, trackIndex) .slice(0, trackIndex)
.reduce((sum, track) => sum + getTrackHeight(track.type), 0); .reduce((sum, track) => sum + getTrackHeight(track.type) + GAP, 0);
} }
// Calculate total height of all tracks // Calculate total height of all tracks
export function getTotalTracksHeight( export function getTotalTracksHeight(
tracks: Array<{ type: TrackType }> tracks: Array<{ type: TrackType }>
): number { ): number {
return tracks.reduce((sum, track) => sum + getTrackHeight(track.type), 0); const GAP = 4; // 4px gap between tracks (equivalent to Tailwind's gap-1)
const tracksHeight = tracks.reduce(
(sum, track) => sum + getTrackHeight(track.type),
0
);
const gapsHeight = Math.max(0, tracks.length - 1) * GAP; // n-1 gaps for n tracks
return tracksHeight + gapsHeight;
} }
// Other timeline constants // Other timeline constants