fix: position crop button as overlay next to trash icon on image
Moved the crop button from below the image into the ImageUpload component as an absolute-positioned overlay next to the trash icon, matching the visual pattern. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -112,6 +112,29 @@ export function ImageUpload({
|
|||||||
alt="Item"
|
alt="Item"
|
||||||
dominantColor={dominantColor}
|
dominantColor={dominantColor}
|
||||||
/>
|
/>
|
||||||
|
{/* Crop button */}
|
||||||
|
{onCropChange && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowCropEditor(true);
|
||||||
|
}}
|
||||||
|
className="absolute top-2 right-11 w-7 h-7 flex items-center justify-center bg-white/80 hover:bg-white rounded-full text-gray-600 hover:text-gray-900 transition-colors shadow-sm"
|
||||||
|
title="Adjust framing"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
strokeWidth={2}
|
||||||
|
>
|
||||||
|
<path d="M6.13 1L6 16a2 2 0 0 0 2 2h15" />
|
||||||
|
<path d="M1 6.13L16 6a2 2 0 0 1 2 2v15" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
{/* Remove button */}
|
{/* Remove button */}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -292,28 +292,6 @@ function ItemDetail() {
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{imageUrl && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setIsEditing(false);
|
|
||||||
setEditingCrop(true);
|
|
||||||
}}
|
|
||||||
className="mt-2 w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors"
|
|
||||||
title="Adjust framing"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-4 h-4"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
strokeWidth={2}
|
|
||||||
>
|
|
||||||
<path d="M6.13 1L6 16a2 2 0 0 0 2 2h15" />
|
|
||||||
<path d="M1 6.13L16 6a2 2 0 0 1 2 2v15" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
) : editingCrop && imageUrl ? (
|
) : editingCrop && imageUrl ? (
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
|
|||||||
Reference in New Issue
Block a user