fix: Move album art upload button out of ribbon thumbnail
Ribbon view artwork hover now shows only play button (larger, cleaner). Upload art button moved to action row alongside rename/delete. Order: rename → upload art → delete. All buttons 4x4, consistent spacing.
This commit is contained in:
1 parent
069170398f
commit
5868be5f93
1 file changed
+26
-25
@@ -191,30 +191,18 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* Hover overlay: play + upload art */}
|
{/* Hover overlay: play */}
|
||||||
<div className="absolute inset-0 rounded bg-black/60 flex items-center justify-center gap-1 opacity-0 group-hover/art:opacity-100 transition-opacity">
|
<div className="absolute inset-0 rounded bg-black/60 flex items-center justify-center opacity-0 group-hover/art:opacity-100 transition-opacity"
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
onClick={(e) => { e.stopPropagation(); onPlay(clip) }}
|
onClick={(e) => { e.stopPropagation(); onPlay(clip) }}
|
||||||
className="text-white hover:text-lyria-accent transition-colors"
|
className="text-white hover:text-lyria-accent transition-colors"
|
||||||
title="Play"
|
title="Play"
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<path d="M8 5v14l11-7z" />
|
<path d="M8 5v14l11-7z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
setUploadingId(clip.id)
|
|
||||||
setTimeout(() => artworkInputRef.current?.click(), 0)
|
|
||||||
}}
|
|
||||||
className="text-white hover:text-lyria-accent transition-colors"
|
|
||||||
title="Upload album art"
|
|
||||||
>
|
|
||||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -263,15 +251,6 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={(e) => { e.stopPropagation(); onDelete(clip.id) }}
|
|
||||||
className="text-lyria-muted hover:text-red-400 transition-colors shrink-0"
|
|
||||||
title="Delete clip"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
onClick={(e) => { e.stopPropagation(); startRename(clip) }}
|
onClick={(e) => { e.stopPropagation(); startRename(clip) }}
|
||||||
className="text-lyria-muted/40 hover:text-lyria-accent transition-colors shrink-0"
|
className="text-lyria-muted/40 hover:text-lyria-accent transition-colors shrink-0"
|
||||||
@@ -281,6 +260,28 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
|
|||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
setUploadingId(clip.id)
|
||||||
|
setTimeout(() => artworkInputRef.current?.click(), 0)
|
||||||
|
}}
|
||||||
|
className="text-lyria-muted/40 hover:text-lyria-accent transition-colors shrink-0"
|
||||||
|
title="Upload album art"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); onDelete(clip.id) }}
|
||||||
|
className="text-lyria-muted hover:text-red-400 transition-colors shrink-0"
|
||||||
|
title="Delete clip"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user