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

style: improve ui for selected timeline elements

Browse Source
This commit is contained in:
Maze Winther
2025-08-16 19:11:50 +02:00
parent 77d8c6c774
commit 11d2a66c95
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline/timeline-element.tsx
+10 -6
View File
@@ -208,7 +208,7 @@ export function TimelineElement({
}`} }`}
> >
<div <div
className={`absolute top-[0.15rem] bottom-[0.15rem] left-0 right-0`} className={`absolute top-[0.25rem] bottom-[0.25rem] left-0 right-0`}
style={{ style={{
backgroundImage: imageUrl ? `url(${imageUrl})` : "none", backgroundImage: imageUrl ? `url(${imageUrl})` : "none",
backgroundRepeat: "repeat-x", backgroundRepeat: "repeat-x",
@@ -271,7 +271,7 @@ export function TimelineElement({
onMouseLeave={resizing ? handleResizeEnd : undefined} onMouseLeave={resizing ? handleResizeEnd : undefined}
> >
<div <div
className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackElementClasses( className={`relative h-full rounded-[0.5rem] cursor-pointer overflow-hidden ${getTrackElementClasses(
track.type track.type
)} ${isSelected ? "" : ""} ${ )} ${isSelected ? "" : ""} ${
isBeingDragged ? "z-50" : "z-10" isBeingDragged ? "z-50" : "z-10"
@@ -299,13 +299,17 @@ export function TimelineElement({
{isSelected && ( {isSelected && (
<> <>
<div <div
className="absolute left-0 top-0 bottom-0 w-[0.2rem] cursor-w-resize bg-primary z-50" className="absolute left-0 top-0 bottom-0 w-[0.6rem] cursor-w-resize bg-primary z-50 flex items-center justify-center"
onMouseDown={(e) => handleResizeStart(e, element.id, "left")} onMouseDown={(e) => handleResizeStart(e, element.id, "left")}
/> >
<div className="w-[0.2rem] h-[1.5rem] bg-foreground/75 rounded-full" />
</div>
<div <div
className="absolute right-0 top-0 bottom-0 w-[0.2rem] cursor-e-resize bg-primary z-50" className="absolute right-0 top-0 bottom-0 w-[0.6em] cursor-e-resize bg-primary z-50 flex items-center justify-center"
onMouseDown={(e) => handleResizeStart(e, element.id, "right")} onMouseDown={(e) => handleResizeStart(e, element.id, "right")}
/> >
<div className="w-[0.2rem] h-[1.5rem] bg-foreground/75 rounded-full" />
</div>
</> </>
)} )}
</div> </div>