Improve image focal point editor with zoom and per-ratio adjustments
Update the FocalPointEditor component to include zoom functionality and allow separate focal point adjustments for different aspect ratios (16:9, 9:16, 1:1) by making ratio previews clickable. Also includes backend data changes for focal points. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 8292fff7-dc86-4296-bd17-6fdcd79d618f Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ncMMRQ9 Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
parent
bcc93e01af
commit
81ba418cc7
@ -1,7 +1,7 @@
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState, useRef } from "react";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowLeft, Crosshair, X, Check, RotateCcw, User, Search, Filter, Cloud, HardDrive, Image, Trash2 } from "lucide-react";
|
||||
import { ArrowLeft, Crosshair, X, Check, RotateCcw, User, Search, Filter, Cloud, HardDrive, Image, Trash2, ZoomIn, ZoomOut, MousePointer } from "lucide-react";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import type { FocalPointMap } from "@/components/photo-gallery";
|
||||
import { getObjectPosition } from "@/components/photo-gallery";
|
||||
@ -28,6 +28,68 @@ function formatBytes(bytes: number): string {
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
function RatioPreview({
|
||||
image,
|
||||
point,
|
||||
ratio,
|
||||
label,
|
||||
width,
|
||||
height,
|
||||
active,
|
||||
onClickPreview,
|
||||
onSelect,
|
||||
}: {
|
||||
image: CloudinaryImage;
|
||||
point: { x: number; y: number } | null;
|
||||
ratio: string;
|
||||
label: string;
|
||||
width: string;
|
||||
height: string;
|
||||
active: boolean;
|
||||
onClickPreview: (e: React.MouseEvent<HTMLDivElement>) => void;
|
||||
onSelect: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<button
|
||||
onClick={onSelect}
|
||||
className={`text-[10px] font-medium px-2 py-0.5 rounded-full transition-colors ${
|
||||
active ? "bg-yellow-500 text-black" : "text-white/40 hover:text-white/70"
|
||||
}`}
|
||||
data-testid={`button-select-ratio-${ratio}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
<div
|
||||
onClick={onClickPreview}
|
||||
className={`relative rounded-lg overflow-hidden cursor-crosshair transition-all ${
|
||||
active ? "ring-2 ring-yellow-400 ring-offset-2 ring-offset-black" : "border border-white/20"
|
||||
}`}
|
||||
style={{ width, height }}
|
||||
data-testid={`preview-${ratio}`}
|
||||
>
|
||||
<img
|
||||
src={image.full || image.large}
|
||||
alt={label}
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
|
||||
/>
|
||||
{point && (
|
||||
<div
|
||||
className="absolute w-4 h-4 -ml-2 -mt-2 pointer-events-none"
|
||||
style={{ left: `${point.x}%`, top: `${point.y}%` }}
|
||||
>
|
||||
<div className="w-full h-full rounded-full border-2 border-yellow-400 bg-yellow-400/30" />
|
||||
</div>
|
||||
)}
|
||||
{active && (
|
||||
<div className="absolute inset-0 border-2 border-yellow-400/30 rounded-lg pointer-events-none" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FocalPointEditor({
|
||||
image,
|
||||
currentFocalPoint,
|
||||
@ -55,8 +117,11 @@ function FocalPointEditor({
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [zoom, setZoom] = useState(1);
|
||||
const [activeRatio, setActiveRatio] = useState<"main" | "16:9" | "9:16" | "1:1">("main");
|
||||
const imgRef = useRef<HTMLImageElement>(null);
|
||||
const suggestionsRef = useRef<HTMLDivElement>(null);
|
||||
const mainContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const filteredSuggestions = artistName.length >= 1
|
||||
? allArtistNames.filter(
|
||||
@ -64,7 +129,7 @@ function FocalPointEditor({
|
||||
).slice(0, 8)
|
||||
: [];
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const handleMainClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const img = imgRef.current;
|
||||
if (!img) return;
|
||||
const rect = img.getBoundingClientRect();
|
||||
@ -73,6 +138,25 @@ function FocalPointEditor({
|
||||
setPoint({ x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) });
|
||||
};
|
||||
|
||||
const handlePreviewClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const clickX = (e.clientX - rect.left) / rect.width;
|
||||
const clickY = (e.clientY - rect.top) / rect.height;
|
||||
const currentPos = point || { x: 50, y: 15 };
|
||||
const newX = Math.round(Math.max(0, Math.min(100, currentPos.x + (clickX - 0.5) * 30)));
|
||||
const newY = Math.round(Math.max(0, Math.min(100, currentPos.y + (clickY - 0.5) * 30)));
|
||||
setPoint({ x: newX, y: newY });
|
||||
};
|
||||
|
||||
const handleZoomIn = () => setZoom((z) => Math.min(z + 0.5, 4));
|
||||
const handleZoomOut = () => setZoom((z) => Math.max(z - 0.5, 1));
|
||||
|
||||
const handleWheel = (e: React.WheelEvent) => {
|
||||
e.preventDefault();
|
||||
if (e.deltaY < 0) handleZoomIn();
|
||||
else handleZoomOut();
|
||||
};
|
||||
|
||||
const handleSaveAll = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
@ -96,8 +180,8 @@ function FocalPointEditor({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/95 flex flex-col items-center justify-center p-4 overflow-y-auto" data-testid="focal-point-editor">
|
||||
<div className="absolute top-4 left-4 right-4 flex items-center justify-between z-50">
|
||||
<div className="fixed inset-0 z-50 bg-black/95 flex flex-col p-4 overflow-y-auto" data-testid="focal-point-editor">
|
||||
<div className="flex items-center justify-between mb-3 flex-shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<Crosshair className="w-5 h-5 text-yellow-400" />
|
||||
<div>
|
||||
@ -112,191 +196,246 @@ function FocalPointEditor({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 mt-16 w-full max-w-4xl">
|
||||
<div className="flex items-center gap-3 w-full max-w-md">
|
||||
<User className="w-4 h-4 text-white/50 flex-shrink-0" />
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={artistName}
|
||||
onChange={(e) => { setArtistName(e.target.value); setShowSuggestions(true); }}
|
||||
onFocus={() => setShowSuggestions(true)}
|
||||
onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
|
||||
placeholder="Interpret / Künstlername eingeben..."
|
||||
className="w-full bg-white/10 border border-white/20 rounded px-3 py-2 text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-yellow-400/60"
|
||||
data-testid="input-artist-name"
|
||||
/>
|
||||
{showSuggestions && filteredSuggestions.length > 0 && (
|
||||
<div
|
||||
ref={suggestionsRef}
|
||||
className="absolute top-full left-0 right-0 mt-1 bg-zinc-800 border border-white/20 rounded-lg shadow-xl overflow-hidden z-50 max-h-48 overflow-y-auto"
|
||||
data-testid="artist-suggestions"
|
||||
<div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0">
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<User className="w-4 h-4 text-white/50 flex-shrink-0" />
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<input
|
||||
type="text"
|
||||
value={artistName}
|
||||
onChange={(e) => { setArtistName(e.target.value); setShowSuggestions(true); }}
|
||||
onFocus={() => setShowSuggestions(true)}
|
||||
onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
|
||||
placeholder="Interpret / Künstlername eingeben..."
|
||||
className="w-full bg-white/10 border border-white/20 rounded px-3 py-2 text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-yellow-400/60"
|
||||
data-testid="input-artist-name"
|
||||
/>
|
||||
{showSuggestions && filteredSuggestions.length > 0 && (
|
||||
<div
|
||||
ref={suggestionsRef}
|
||||
className="absolute top-full left-0 right-0 mt-1 bg-zinc-800 border border-white/20 rounded-lg shadow-xl overflow-hidden z-50 max-h-48 overflow-y-auto"
|
||||
data-testid="artist-suggestions"
|
||||
>
|
||||
{filteredSuggestions.map((name) => (
|
||||
<button
|
||||
key={name}
|
||||
type="button"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => { setArtistName(name); setShowSuggestions(false); }}
|
||||
className="w-full text-left px-3 py-2 text-sm text-white/80 hover:bg-yellow-500/20 hover:text-white transition-colors flex items-center gap-2"
|
||||
data-testid={`suggestion-${name}`}
|
||||
>
|
||||
<User className="w-3 h-3 text-white/30 flex-shrink-0" />
|
||||
<span>{name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 ml-auto">
|
||||
<button
|
||||
onClick={handleZoomOut}
|
||||
disabled={zoom <= 1}
|
||||
className="w-8 h-8 rounded bg-white/10 hover:bg-white/20 flex items-center justify-center text-white/60 hover:text-white disabled:opacity-30 transition-colors"
|
||||
data-testid="button-zoom-out"
|
||||
>
|
||||
{filteredSuggestions.map((name) => (
|
||||
<button
|
||||
key={name}
|
||||
type="button"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => { setArtistName(name); setShowSuggestions(false); }}
|
||||
className="w-full text-left px-3 py-2 text-sm text-white/80 hover:bg-yellow-500/20 hover:text-white transition-colors flex items-center gap-2"
|
||||
data-testid={`suggestion-${name}`}
|
||||
>
|
||||
<User className="w-3 h-3 text-white/30 flex-shrink-0" />
|
||||
<span>{name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-white/50 text-xs text-center">
|
||||
Klicken Sie auf das Bild, um den Fokuspunkt zu setzen
|
||||
</p>
|
||||
|
||||
<div className="relative cursor-crosshair inline-block" onClick={handleClick}>
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={image.full || image.large}
|
||||
alt={image.artist || image.fileName}
|
||||
className="max-w-[85vw] max-h-[50vh] object-contain rounded-lg"
|
||||
data-testid="img-focal-editor"
|
||||
/>
|
||||
{point && (
|
||||
<div
|
||||
className="absolute w-10 h-10 -ml-5 -mt-5 pointer-events-none"
|
||||
style={{ left: `${point.x}%`, top: `${point.y}%` }}
|
||||
>
|
||||
<div className="w-full h-full rounded-full border-2 border-yellow-400 bg-yellow-400/20 flex items-center justify-center">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-[-16px] right-[-16px] h-px bg-yellow-400/50 -translate-y-1/2" />
|
||||
<div className="absolute left-1/2 top-[-16px] bottom-[-16px] w-px bg-yellow-400/50 -translate-x-1/2" />
|
||||
<ZoomOut className="w-4 h-4" />
|
||||
</button>
|
||||
<span className="text-white/40 text-xs w-10 text-center">{zoom.toFixed(1)}x</span>
|
||||
<button
|
||||
onClick={handleZoomIn}
|
||||
disabled={zoom >= 4}
|
||||
className="w-8 h-8 rounded bg-white/10 hover:bg-white/20 flex items-center justify-center text-white/60 hover:text-white disabled:opacity-30 transition-colors"
|
||||
data-testid="button-zoom-in"
|
||||
>
|
||||
<ZoomIn className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative w-44 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
|
||||
<img
|
||||
src={image.full || image.large}
|
||||
alt="16:9"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
|
||||
/>
|
||||
<span className="absolute bottom-0.5 right-1 text-[9px] text-white/60 bg-black/60 px-1 rounded">16:9</span>
|
||||
</div>
|
||||
<div className="relative w-14 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
|
||||
<img
|
||||
src={image.full || image.large}
|
||||
alt="9:16"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
|
||||
/>
|
||||
<span className="absolute bottom-0.5 right-0.5 text-[8px] text-white/60 bg-black/60 px-0.5 rounded">9:16</span>
|
||||
</div>
|
||||
<div className="relative w-24 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
|
||||
<img
|
||||
src={image.full || image.large}
|
||||
alt="1:1"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
|
||||
/>
|
||||
<span className="absolute bottom-0.5 right-0.5 text-[9px] text-white/60 bg-black/60 px-0.5 rounded">1:1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{point && (
|
||||
<p className="text-white/40 text-xs">Fokus: {point.x}% / {point.y}%</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={saving || deleting}
|
||||
className="flex items-center gap-1.5 px-3 py-2 rounded bg-red-500/20 hover:bg-red-500/40 text-red-400 hover:text-red-300 text-sm transition-colors disabled:opacity-50 border border-red-500/30"
|
||||
data-testid="button-delete-image"
|
||||
<div
|
||||
ref={mainContainerRef}
|
||||
className="relative flex-1 min-h-0 overflow-auto rounded-lg bg-zinc-900/50 border border-white/10 cursor-crosshair"
|
||||
onClick={handleMainClick}
|
||||
onWheel={handleWheel}
|
||||
data-testid="main-image-container"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Löschen
|
||||
</button>
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
onClick={handleResetFocal}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-1.5 px-3 py-2 rounded bg-white/10 hover:bg-white/20 text-white/70 hover:text-white text-sm transition-colors disabled:opacity-50"
|
||||
data-testid="button-focal-reset"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
Fokus zurücksetzen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveAll}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-1.5 px-5 py-2 rounded bg-yellow-500 hover:bg-yellow-400 disabled:bg-yellow-500/40 text-black font-medium text-sm transition-colors"
|
||||
data-testid="button-focal-save"
|
||||
>
|
||||
{saving ? (
|
||||
<div className="w-4 h-4 border-2 border-black/50 border-t-black rounded-full animate-spin" />
|
||||
) : (
|
||||
<Check className="w-4 h-4" />
|
||||
)}
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showDeleteConfirm && (
|
||||
<div className="fixed inset-0 z-[60] bg-black/80 flex items-center justify-center" data-testid="delete-confirm-dialog">
|
||||
<div className="bg-zinc-900 border border-red-500/30 rounded-xl p-6 max-w-sm mx-4 shadow-2xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center">
|
||||
<Trash2 className="w-5 h-5 text-red-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-sm">Bild löschen?</h3>
|
||||
<p className="text-white/40 text-xs">Aus Cloudinary entfernen</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-white/60 text-sm mb-1">
|
||||
<span className="font-medium text-white">{image.artist || image.fileName}</span>
|
||||
</p>
|
||||
<p className="text-white/30 text-xs mb-4">{image.publicId}</p>
|
||||
<p className="text-red-400/80 text-xs mb-5">
|
||||
Achtung: Diese Aktion kann nicht rückgängig gemacht werden!
|
||||
</p>
|
||||
<div className="flex items-center gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
disabled={deleting}
|
||||
className="px-4 py-2 rounded bg-white/10 hover:bg-white/20 text-white/70 text-sm transition-colors"
|
||||
data-testid="button-delete-cancel"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
setDeleting(true);
|
||||
await onDelete();
|
||||
setDeleting(false);
|
||||
setShowDeleteConfirm(false);
|
||||
onClose();
|
||||
<div className="flex items-center justify-center min-h-full" style={{ padding: zoom > 1 ? "20px" : "0" }}>
|
||||
<div className="relative inline-block">
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={image.full || image.large}
|
||||
alt={image.artist || image.fileName}
|
||||
className="object-contain rounded-lg transition-transform duration-200"
|
||||
style={{
|
||||
maxWidth: zoom === 1 ? "100%" : "none",
|
||||
maxHeight: zoom === 1 ? "100%" : "none",
|
||||
width: zoom === 1 ? "auto" : `${zoom * 100}%`,
|
||||
}}
|
||||
disabled={deleting}
|
||||
className="flex items-center gap-1.5 px-4 py-2 rounded bg-red-600 hover:bg-red-500 disabled:bg-red-600/40 text-white font-medium text-sm transition-colors"
|
||||
data-testid="button-delete-confirm"
|
||||
>
|
||||
{deleting ? (
|
||||
<div className="w-4 h-4 border-2 border-white/50 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="w-4 h-4" />
|
||||
)}
|
||||
Endgültig löschen
|
||||
</button>
|
||||
data-testid="img-focal-editor"
|
||||
/>
|
||||
{point && (
|
||||
<div
|
||||
className="absolute pointer-events-none"
|
||||
style={{ left: `${point.x}%`, top: `${point.y}%`, transform: "translate(-50%, -50%)" }}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full border-2 border-yellow-400 bg-yellow-400/20 flex items-center justify-center">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
|
||||
</div>
|
||||
<div className="absolute top-1/2 -left-4 -right-4 h-px bg-yellow-400/50" style={{ transform: "translateY(-50%)" }} />
|
||||
<div className="absolute left-1/2 -top-4 -bottom-4 w-px bg-yellow-400/50" style={{ transform: "translateX(-50%)" }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-2 left-2 flex items-center gap-2">
|
||||
<span className="text-white/30 text-[10px] bg-black/60 px-2 py-1 rounded">
|
||||
<MousePointer className="w-3 h-3 inline mr-1" />
|
||||
Klick = Fokuspunkt · Scroll = Zoom
|
||||
</span>
|
||||
</div>
|
||||
{point && (
|
||||
<div className="absolute top-2 left-2 text-yellow-400/80 text-[10px] bg-black/60 px-2 py-1 rounded">
|
||||
{point.x}% / {point.y}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="lg:w-72 flex-shrink-0 flex flex-col gap-3">
|
||||
<div className="text-white/50 text-xs font-medium flex items-center gap-2">
|
||||
<Crosshair className="w-3 h-3" />
|
||||
Vorschau — Klick auf Vorschau zum Feintuning
|
||||
</div>
|
||||
|
||||
<RatioPreview
|
||||
image={image}
|
||||
point={point}
|
||||
ratio="16:9"
|
||||
label="16:9 Breitbild"
|
||||
width="100%"
|
||||
height="162px"
|
||||
active={activeRatio === "16:9"}
|
||||
onClickPreview={handlePreviewClick}
|
||||
onSelect={() => setActiveRatio("16:9")}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<RatioPreview
|
||||
image={image}
|
||||
point={point}
|
||||
ratio="9:16"
|
||||
label="9:16 Hochformat"
|
||||
width="100px"
|
||||
height="178px"
|
||||
active={activeRatio === "9:16"}
|
||||
onClickPreview={handlePreviewClick}
|
||||
onSelect={() => setActiveRatio("9:16")}
|
||||
/>
|
||||
<RatioPreview
|
||||
image={image}
|
||||
point={point}
|
||||
ratio="1:1"
|
||||
label="1:1 Quadrat"
|
||||
width="178px"
|
||||
height="178px"
|
||||
active={activeRatio === "1:1"}
|
||||
onClickPreview={handlePreviewClick}
|
||||
onSelect={() => setActiveRatio("1:1")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 mt-auto pt-3 border-t border-white/10">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={saving || deleting}
|
||||
className="flex items-center gap-1.5 px-3 py-2 rounded bg-red-500/20 hover:bg-red-500/40 text-red-400 hover:text-red-300 text-xs transition-colors disabled:opacity-50 border border-red-500/30"
|
||||
data-testid="button-delete-image"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Löschen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleResetFocal}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-1.5 px-3 py-2 rounded bg-white/10 hover:bg-white/20 text-white/70 hover:text-white text-xs transition-colors disabled:opacity-50"
|
||||
data-testid="button-focal-reset"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
Zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSaveAll}
|
||||
disabled={saving}
|
||||
className="flex items-center justify-center gap-1.5 px-5 py-2.5 rounded bg-yellow-500 hover:bg-yellow-400 disabled:bg-yellow-500/40 text-black font-medium text-sm transition-colors w-full"
|
||||
data-testid="button-focal-save"
|
||||
>
|
||||
{saving ? (
|
||||
<div className="w-4 h-4 border-2 border-black/50 border-t-black rounded-full animate-spin" />
|
||||
) : (
|
||||
<Check className="w-4 h-4" />
|
||||
)}
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showDeleteConfirm && (
|
||||
<div className="fixed inset-0 z-[60] bg-black/80 flex items-center justify-center" data-testid="delete-confirm-dialog">
|
||||
<div className="bg-zinc-900 border border-red-500/30 rounded-xl p-6 max-w-sm mx-4 shadow-2xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center">
|
||||
<Trash2 className="w-5 h-5 text-red-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-sm">Bild löschen?</h3>
|
||||
<p className="text-white/40 text-xs">Aus Cloudinary entfernen</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-white/60 text-sm mb-1">
|
||||
<span className="font-medium text-white">{image.artist || image.fileName}</span>
|
||||
</p>
|
||||
<p className="text-white/30 text-xs mb-4">{image.publicId}</p>
|
||||
<p className="text-red-400/80 text-xs mb-5">
|
||||
Achtung: Diese Aktion kann nicht rückgängig gemacht werden!
|
||||
</p>
|
||||
<div className="flex items-center gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
disabled={deleting}
|
||||
className="px-4 py-2 rounded bg-white/10 hover:bg-white/20 text-white/70 text-sm transition-colors"
|
||||
data-testid="button-delete-cancel"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
setDeleting(true);
|
||||
await onDelete();
|
||||
setDeleting(false);
|
||||
setShowDeleteConfirm(false);
|
||||
onClose();
|
||||
}}
|
||||
disabled={deleting}
|
||||
className="flex items-center gap-1.5 px-4 py-2 rounded bg-red-600 hover:bg-red-500 disabled:bg-red-600/40 text-white font-medium text-sm transition-colors"
|
||||
data-testid="button-delete-confirm"
|
||||
>
|
||||
{deleting ? (
|
||||
<div className="w-4 h-4 border-2 border-white/50 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="w-4 h-4" />
|
||||
)}
|
||||
Endgültig löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -42,5 +42,13 @@
|
||||
"DSC07438.jpg": {
|
||||
"x": 57,
|
||||
"y": 46
|
||||
},
|
||||
"DSC07645.jpg": {
|
||||
"x": 96,
|
||||
"y": 38
|
||||
},
|
||||
"DSC08350.jpg": {
|
||||
"x": 51,
|
||||
"y": 33
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user