paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(select): add per-tile checkbox selection in Admin grid and all gallery layouts; tile click opens viewer; checkbox toggles selection; auto-enable selection mode; add testids
Mirror to GitHub / mirror (push) Successful in 38s
Details
Test and Lint / backend-test (push) Successful in 1m34s
Details
Test and Lint / frontend-test (push) Successful in 2m13s
Details
Version and Release / version-bump (push) Successful in 57s
Details
Version and Release / trigger-drone (push) Successful in 3s
Details

Browse Source
This commit is contained in:
paul
2025-09-14 17:02:45 +02:00
parent 0d77a3a0a8
commit 9fda54bd06
7 changed files with 159 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
+17 -14
View File
@@ -90,13 +90,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
<div
key={photo.id}
className="relative group cursor-pointer aspect-square"
onClick={() => {
if (isSelectionMode && onPhotoSelect) {
onPhotoSelect(photo.id);
} else {
onPhotoClick(actualIndex);
}
}}
onClick={() => onPhotoClick(actualIndex)}
>
<AuthenticatedImage
src={photo.thumbnail_url || photo.url}
@@ -141,13 +135,22 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
)}
</div>
{isSelectionMode && (
<div className={`absolute top-2 right-2 ${selectedPhotos.has(photo.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
<div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
{selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
</div>
{/* Selection Checkbox (visible on hover or when selected) */}
<button
type="button"
aria-label={`Select ${photo.filename}`}
role="checkbox"
aria-checked={selectedPhotos.has(photo.id)}
data-testid={`gallery-photo-checkbox-${photo.id}`}
className={`absolute top-2 right-2 z-20 transition-opacity ${
selectedPhotos.has(photo.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
}`}
onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
>
<div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
{selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
</div>
)}
</button>
</div>
);
})}
@@ -157,4 +160,4 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
</div>
</div>
);
};
};