From ec14abd696051a38c2798cf690c20657599fc465 Mon Sep 17 00:00:00 2001 From: Pierre-Yves Nicolas <6371790+pynicolas@users.noreply.github.com> Date: Sat, 31 Jan 2026 14:36:52 +0100 Subject: [PATCH] Adjust style of thumbnails to show they can be tapped --- .../fairscan/app/ui/components/PageList.kt | 59 ++++++++++++------- .../fairscan/app/ui/screens/DocumentScreen.kt | 13 ++-- .../app/ui/screens/camera/CameraScreen.kt | 2 + 3 files changed, 44 insertions(+), 30 deletions(-) diff --git a/app/src/main/java/org/fairscan/app/ui/components/PageList.kt b/app/src/main/java/org/fairscan/app/ui/components/PageList.kt index dc8eb03..0bbced9 100644 --- a/app/src/main/java/org/fairscan/app/ui/components/PageList.kt +++ b/app/src/main/java/org/fairscan/app/ui/components/PageList.kt @@ -16,12 +16,14 @@ package org.fairscan.app.ui.components import android.content.res.Configuration import android.graphics.Bitmap +import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height @@ -33,6 +35,8 @@ import androidx.compose.foundation.lazy.LazyListState import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -60,6 +64,7 @@ data class CommonPageListState( val onPageClick: (Int) -> Unit, val onPageReorder: (String, Int) -> Unit, val listState: LazyListState, + val showPageNumbers: Boolean, val currentPageIndex: Int? = null, val onLastItemPosition: ((Offset) -> Unit)? = null, ) @@ -129,7 +134,7 @@ private fun PageThumbnail( val bitmap = image.asImageBitmap() val isSelected = index == state.currentPageIndex val borderColor = - if (isSelected) MaterialTheme.colorScheme.secondary else Color.Transparent + if (isSelected) MaterialTheme.colorScheme.primary else Color.LightGray val maxImageSize = PAGE_LIST_ELEMENT_SIZE_DP.dp var imageModifier = if (bitmap.height > bitmap.width) @@ -140,30 +145,40 @@ private fun PageThumbnail( val density = LocalDensity.current imageModifier = imageModifier.addPositionCallback(state.onLastItemPosition, density, 1.0f) } - Box (modifier = modifier.height(PAGE_LIST_ELEMENT_SIZE_DP.dp)) { - Image( - bitmap = bitmap, - contentDescription = null, - modifier = imageModifier - .align(Alignment.Center) - .padding(4.dp) - .border(2.dp, borderColor) - .clickable { state.onPageClick(index) } - ) - Box( - modifier = Modifier - .padding(8.dp) - .align(Alignment.BottomCenter) - .background(Color.Black.copy(alpha = 0.5f), shape = RoundedCornerShape(4.dp)) - .padding(vertical = 0.dp, horizontal = 8.dp) + Box(modifier = modifier.height(PAGE_LIST_ELEMENT_SIZE_DP.dp)) { + Card( + elevation = CardDefaults.cardElevation(defaultElevation = 2.dp), + shape = RoundedCornerShape(6.dp), + border = BorderStroke(1.dp, borderColor), + modifier = Modifier.padding(4.dp).align(Alignment.Center) ) { - Text( - text = "${index + 1}", - color = Color.White, - fontSize = 10.sp, - textAlign = TextAlign.Center, + Image( + bitmap = bitmap, + contentDescription = "${index + 1}", + modifier = imageModifier.clickable { state.onPageClick(index) } ) } + if (state.showPageNumbers) { + PageNumberBadge(index) + } + } +} + +@Composable +private fun BoxScope.PageNumberBadge(index: Int) { + Box( + modifier = Modifier + .padding(8.dp) + .align(Alignment.BottomCenter) + .background(Color.Black.copy(alpha = 0.5f), shape = RoundedCornerShape(4.dp)) + .padding(vertical = 0.dp, horizontal = 8.dp) + ) { + Text( + text = "${index + 1}", + color = Color.White, + fontSize = 10.sp, + textAlign = TextAlign.Center, + ) } } diff --git a/app/src/main/java/org/fairscan/app/ui/screens/DocumentScreen.kt b/app/src/main/java/org/fairscan/app/ui/screens/DocumentScreen.kt index 4164462..1cad869 100644 --- a/app/src/main/java/org/fairscan/app/ui/screens/DocumentScreen.kt +++ b/app/src/main/java/org/fairscan/app/ui/screens/DocumentScreen.kt @@ -14,6 +14,7 @@ */ package org.fairscan.app.ui.screens +import android.content.res.Configuration import androidx.activity.compose.BackHandler import androidx.compose.foundation.Image import androidx.compose.foundation.background @@ -103,6 +104,7 @@ fun DocumentScreen( onPageReorder = onPageReorder, currentPageIndex = currentPageIndex.intValue, listState = listState, + showPageNumbers = true, ), onBack = navigation.back, bottomBar = { @@ -235,11 +237,13 @@ private fun BottomBar( @Composable @Preview +@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true) +@Preview(name = "Landscape", showBackground = true, widthDp = 640, heightDp = 320) fun DocumentScreenPreview() { FairScanTheme { DocumentScreen( fakeDocument( - listOf(1, 2).map { "gallica.bnf.fr-bpt6k5530456s-$it.jpg" }.toImmutableList(), + listOf(1, 2).map { "gallica.bnf.fr-bpt6k5530456s-$it" }.toImmutableList(), LocalContext.current ), initialPage = 1, @@ -251,10 +255,3 @@ fun DocumentScreenPreview() { ) } } - -@Preview(showBackground = true, widthDp = 640, heightDp = 320) -@Composable -fun DocumentScreenPreviewInLandscapeMode() { - DocumentScreenPreview() -} - diff --git a/app/src/main/java/org/fairscan/app/ui/screens/camera/CameraScreen.kt b/app/src/main/java/org/fairscan/app/ui/screens/camera/CameraScreen.kt index 83fcb54..dbae91f 100644 --- a/app/src/main/java/org/fairscan/app/ui/screens/camera/CameraScreen.kt +++ b/app/src/main/java/org/fairscan/app/ui/screens/camera/CameraScreen.kt @@ -177,6 +177,7 @@ fun CameraScreen( onPageClick = { index -> viewModel.navigateTo(Screen.Main.Document(index)) }, onPageReorder = { id, index -> viewModel.movePage(id, index) }, listState = listState, + showPageNumbers = false, onLastItemPosition = { offset -> thumbnailCoords.value = offset }, ), cameraUiState = CameraUiState( @@ -556,6 +557,7 @@ private fun ScreenPreview(captureState: CaptureState, rotationDegrees: Float = 0 onPageClick = {}, onPageReorder = { _, _ -> }, listState = LazyListState(), + showPageNumbers = false, ), cameraUiState = CameraUiState(pageCount = 4, LiveAnalysisState(), captureState, false, rotationDegrees > 0, false, false),