External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Lay groundwork for Tailwind v4 upgrade

Browse Source
This commit is contained in:
Brandon McConnell
2025-07-30 13:15:09 -04:00
parent 1c20027d33
commit df1e80b528
65 changed files with 318 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline/index.tsx
+7 -7
View File
@@ -543,7 +543,7 @@ export function Timeline() {
{/* Timeline Header with Ruler */}
<div className="flex bg-panel sticky top-0 z-10">
{/* Track Labels Header */}
<div className="w-48 flex-shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
<div className="w-48 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
{/* Empty space */}
<span className="text-sm font-medium text-muted-foreground opacity-0">
.
@@ -652,7 +652,7 @@ export function Timeline() {
{tracks.length > 0 && (
<div
ref={trackLabelsRef}
className="w-48 flex-shrink-0 border-r border-black overflow-y-auto z-[200] bg-panel"
className="w-48 shrink-0 border-r border-black overflow-y-auto z-200 bg-panel"
data-track-labels
>
<ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
@@ -667,7 +667,7 @@ export function Timeline() {
<TrackIcon track={track} />
</div>
{track.muted && (
<span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">
<span className="ml-2 text-xs text-red-500 font-semibold shrink-0">
Muted
</span>
)}
@@ -745,7 +745,7 @@ export function Timeline() {
/>
</div>
</ContextMenuTrigger>
<ContextMenuContent className="z-[200]">
<ContextMenuContent className="z-200">
<ContextMenuItem
onClick={(e) => {
e.stopPropagation();
@@ -775,13 +775,13 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
return (
<>
{track.type === "media" && (
<Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
<Video className="w-4 h-4 shrink-0 text-muted-foreground" />
)}
{track.type === "text" && (
<TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
<TypeIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
)}
{track.type === "audio" && (
<Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
<Music className="w-4 h-4 shrink-0 text-muted-foreground" />
)}
</>
);
apps/web/src/components/editor/timeline/timeline-element.tsx
+1 -1
View File
@@ -358,7 +358,7 @@ export function TimelineElement({
</div>
</div>
</ContextMenuTrigger>
<ContextMenuContent className="z-[200]">
<ContextMenuContent className="z-200">
<ContextMenuItem onClick={handleElementSplitContext}>
<Scissors className="h-4 w-4 mr-2" />
Split at playhead
apps/web/src/components/editor/timeline/timeline-playhead.tsx
+2 -2
View File
@@ -126,7 +126,7 @@ export function TimelinePlayhead({
return (
<div
ref={playheadRef}
className="absolute pointer-events-auto z-[150]"
className="absolute pointer-events-auto z-150"
style={{
left: `${leftPosition}px`,
top: 0,
@@ -142,7 +142,7 @@ export function TimelinePlayhead({
{/* Playhead dot indicator at the top (in ruler area) */}
<div
className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-xs ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
/>
</div>
);