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

style: timeclip's focus state

Browse Source
This commit is contained in:
Maze Winther
2025-07-01 14:56:14 +02:00
parent c37c64c1b9
commit 9c8594d8f3
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/components/editor/timeline-clip.tsx
View File

@ -281,9 +281,9 @@ export function TimelineClip({
return ( return (
<div <div
className={`absolute top-0 h-full select-none transition-all duration-75 ${ className={`absolute top-0 h-full select-none transition-all duration-75${
isBeingDragged ? "z-50" : "z-10" isBeingDragged ? "z-50" : "z-10"
} ${isSelected ? "ring-2 ring-primary" : ""}`} }`}
style={{ style={{
left: `${clipLeft}px`, left: `${clipLeft}px`,
width: `${clipWidth}px`, width: `${clipWidth}px`,
@ -293,9 +293,11 @@ export function TimelineClip({
onMouseLeave={resizing ? handleResizeEnd : undefined} onMouseLeave={resizing ? handleResizeEnd : undefined}
> >
<div <div
className={`relative h-full rounded border cursor-pointer overflow-hidden ${getTrackColor( className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackColor(
track.type track.type
)} ${isSelected ? "ring-2 ring-primary ring-offset-1" : ""}`} )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-primary" : ""} ${
isBeingDragged ? "z-50" : "z-10"
}`}
onClick={(e) => onClipClick && onClipClick(e, clip)} onClick={(e) => onClipClick && onClipClick(e, clip)}
onMouseDown={handleClipMouseDown} onMouseDown={handleClipMouseDown}
onContextMenu={(e) => onClipMouseDown && onClipMouseDown(e, clip)} onContextMenu={(e) => onClipMouseDown && onClipMouseDown(e, clip)}
@ -304,14 +306,18 @@ export function TimelineClip({
{renderClipContent()} {renderClipContent()}
</div> </div>
{isSelected && (
<>
<div <div
className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize hover:bg-primary/50 transition-colors" className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50"
onMouseDown={(e) => handleResizeStart(e, clip.id, "left")} onMouseDown={(e) => handleResizeStart(e, clip.id, "left")}
/> />
<div <div
className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize hover:bg-primary/50 transition-colors" className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50"
onMouseDown={(e) => handleResizeStart(e, clip.id, "right")} onMouseDown={(e) => handleResizeStart(e, clip.id, "right")}
/> />
</>
)}
<div className="absolute top-1 right-1"> <div className="absolute top-1 right-1">
<DropdownMenu open={clipMenuOpen} onOpenChange={setClipMenuOpen}> <DropdownMenu open={clipMenuOpen} onOpenChange={setClipMenuOpen}>