chris/nsfwapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed non transparent box

Browse Source
This commit is contained in:
Linrador 2026-04-29 13:36:06 +02:00
parent 3456655220
commit bbab8e5e81
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/ui/TrainingTab.tsx
View File

@ -744,20 +744,23 @@ export default function TrainingTab() {
const isDraft = drawingBox && index === visibleBoxes.length - 1 const isDraft = drawingBox && index === visibleBoxes.length - 1
return ( return (
<button <div
key={`${box.label}-${index}-${isDraft ? 'draft' : 'box'}`} key={`${box.label}-${index}-${isDraft ? 'draft' : 'box'}`}
type="button" role={isDraft ? undefined : 'button'}
tabIndex={isDraft ? undefined : 0}
className={[ className={[
'absolute rounded border-2 bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent shadow-[0_0_0_1px_rgba(0,0,0,0.75)]', 'absolute rounded border-2 shadow-[0_0_0_1px_rgba(0,0,0,0.75)]',
isDraft isDraft
? 'pointer-events-none border-amber-400' ? 'pointer-events-none border-amber-400'
: 'border-emerald-400 hover:border-red-400', : 'cursor-pointer border-emerald-400 hover:border-red-400',
].join(' ')} ].join(' ')}
style={{ style={{
left: `${left}%`, left: `${left}%`,
top: `${top}%`, top: `${top}%`,
width: `${width}%`, width: `${width}%`,
height: `${height}%`, height: `${height}%`,
backgroundColor: 'transparent',
appearance: 'none',
}} }}
title={isDraft ? box.label : `${box.label} löschen`} title={isDraft ? box.label : `${box.label} löschen`}
onPointerDown={(e) => { onPointerDown={(e) => {
@ -769,6 +772,14 @@ export default function TrainingTab() {
e.stopPropagation() e.stopPropagation()
if (!isDraft) removeBox(index) if (!isDraft) removeBox(index)
}} }}
onKeyDown={(e) => {
if (isDraft) return
if (e.key !== 'Enter' && e.key !== ' ') return
e.preventDefault()
e.stopPropagation()
removeBox(index)
}}
> >
<span <span
className={[ className={[
@ -778,7 +789,7 @@ export default function TrainingTab() {
> >
{box.label} {typeof box.score === 'number' ? percent(box.score) : ''} {box.label} {typeof box.score === 'number' ? percent(box.score) : ''}
</span> </span>
</button> </div>
) )
})} })}
</div> </div>