kbolen/photophetch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix selection indicator: high-contrast white circle on any background

Browse Source 
Replace low-contrast RadioButtonUnchecked (50% white) and primary-tint
CheckCircle with a custom indicator:
- Unselected: white circle (90% opacity) with dark border — visible on
  both light and dark thumbnails
- Selected: filled primary-color circle with white checkmark inside

The circle is also directly clickable (same as the thumbnail tap).
This commit is contained in:
Kyle Bolen
2026-07-30 05:51:12 +00:00
parent de240be014
commit bc3a89e858
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/main/kotlin/com/bolenpad/photophetch/ui/DensePhotoGrid.kt
View File

@@ -252,16 +252,31 @@ private fun DenseThumb(
} }
} }
// Top-right: selection indicator only (no other labels here) // Top-right: high-contrast selection indicator
if (isSelected) { // White circle with drop shadow so it's visible on both light and dark thumbnails
Icon(Icons.Default.CheckCircle, contentDescription = null, Box(
tint = MaterialTheme.colorScheme.primary, modifier = Modifier
modifier = Modifier.align(Alignment.TopEnd).padding(2.dp).size(16.dp)) .align(Alignment.TopEnd)
} else { .padding(4.dp)
// Faint unchecked indicator so user knows cell is tappable .size(20.dp)
Icon(Icons.Default.RadioButtonUnchecked, contentDescription = null, .background(
tint = Color.White.copy(alpha = 0.5f), if (isSelected) MaterialTheme.colorScheme.primary
modifier = Modifier.align(Alignment.TopEnd).padding(2.dp).size(14.dp)) else Color.White.copy(alpha = 0.9f),
shape = androidx.compose.foundation.shape.CircleShape,
)
.border(
width = 1.5.dp,
color = if (isSelected) MaterialTheme.colorScheme.primary
else Color.Black.copy(alpha = 0.3f),
shape = androidx.compose.foundation.shape.CircleShape,
)
.clickable(onClick = onToggle),
contentAlignment = Alignment.Center,
) {
if (isSelected) {
Icon(Icons.Default.CheckCircle, contentDescription = null,
tint = Color.White, modifier = Modifier.size(18.dp))
}
} }
// Bottom-left: LIVE badge or video size badge // Bottom-left: LIVE badge or video size badge