diff --git a/app/src/main/java/fr/free/nrw/commons/customselector/ui/components/CustomSelectorTopBar.kt b/app/src/main/java/fr/free/nrw/commons/customselector/ui/components/CustomSelectorTopBar.kt index 859c4fabc..a596d4620 100644 --- a/app/src/main/java/fr/free/nrw/commons/customselector/ui/components/CustomSelectorTopBar.kt +++ b/app/src/main/java/fr/free/nrw/commons/customselector/ui/components/CustomSelectorTopBar.kt @@ -2,8 +2,12 @@ package fr.free.nrw.commons.customselector.ui.components import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.rounded.KeyboardArrowLeft +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.ElevatedCard import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton @@ -14,6 +18,8 @@ import androidx.compose.material3.TopAppBar import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource +import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.semantics.semantics import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp @@ -28,7 +34,9 @@ fun CustomSelectorTopBar( onNavigateBack: ()-> Unit, modifier: Modifier = Modifier, secondaryText: String? = null, + selectionCount: Int = 0, showNavigationIcon: Boolean = true, + showSelectionCount: Boolean = false, showAlertIcon: Boolean = false, onAlertAction: ()-> Unit = { }, ) { @@ -38,7 +46,6 @@ fun CustomSelectorTopBar( Text( text = primaryText, style = MaterialTheme.typography.titleMedium.copy(fontSize = 18.sp), - color = MaterialTheme.colorScheme.primary, maxLines = 1, overflow = TextOverflow.Ellipsis ) @@ -73,6 +80,23 @@ fun CustomSelectorTopBar( ) } } + + if(showSelectionCount) { + ElevatedCard( + colors = CardDefaults.elevatedCardColors( + containerColor = MaterialTheme.colorScheme.primary + ), + shape = CircleShape, + modifier = Modifier.semantics { contentDescription = "$selectionCount Selected" } + .padding(end = 8.dp) + ) { + Text( + text = "$selectionCount", + modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp), + style = MaterialTheme.typography.labelMedium + ) + } + } } ) } @@ -86,7 +110,8 @@ private fun CustomSelectorTopBarPreview() { primaryText = "My Folder", secondaryText = "10 images", onNavigateBack = { }, - showAlertIcon = true + showAlertIcon = true, + selectionCount = 1 ) } } diff --git a/app/src/main/java/fr/free/nrw/commons/customselector/ui/components/PartialStorageAccessDialog.kt b/app/src/main/java/fr/free/nrw/commons/customselector/ui/components/PartialStorageAccessDialog.kt index 1fdec49a8..9cf69530f 100644 --- a/app/src/main/java/fr/free/nrw/commons/customselector/ui/components/PartialStorageAccessDialog.kt +++ b/app/src/main/java/fr/free/nrw/commons/customselector/ui/components/PartialStorageAccessDialog.kt @@ -21,37 +21,34 @@ import fr.free.nrw.commons.ui.theme.CommonsTheme @Composable fun PartialStorageAccessDialog( - isVisible: Boolean, - onManage: ()-> Unit, + onManageAction: () -> Unit, modifier: Modifier = Modifier ) { - if(isVisible) { - Card( - modifier = modifier, - colors = CardDefaults.cardColors( - containerColor = MaterialTheme.colorScheme.secondaryContainer - ), - shape = RoundedCornerShape(12.dp) + Card( + modifier = modifier, + colors = CardDefaults.cardColors( + containerColor = MaterialTheme.colorScheme.secondaryContainer + ), + shape = RoundedCornerShape(12.dp) + ) { + Row( + modifier = Modifier + .padding(vertical = 8.dp, horizontal = 16.dp) + .fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(4.dp), + verticalAlignment = Alignment.CenterVertically ) { - Row( - modifier = Modifier - .padding(vertical = 8.dp, horizontal = 16.dp) - .fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(4.dp), - verticalAlignment = Alignment.CenterVertically + Text( + text = "You've given access to a selected number of photos", + style = MaterialTheme.typography.bodyMedium, + modifier = Modifier.weight(1f) + ) + Button( + onClick = onManageAction, + shape = RoundedCornerShape(8.dp), + contentPadding = PaddingValues(horizontal = 16.dp) ) { - Text( - text = "You've given access to a selected number of photos", - style = MaterialTheme.typography.bodyMedium, - modifier = Modifier.weight(1f) - ) - Button( - onClick = onManage, - shape = RoundedCornerShape(8.dp), - contentPadding = PaddingValues(horizontal = 16.dp) - ) { - Text(text = "Manage", style = MaterialTheme.typography.labelMedium) - } + Text(text = "Manage", style = MaterialTheme.typography.labelMedium) } } } @@ -62,9 +59,11 @@ fun PartialStorageAccessDialog( fun PartialStorageAccessIndicatorPreview() { CommonsTheme { Surface { - PartialStorageAccessDialog(isVisible = true, onManage = {}, modifier = Modifier - .padding(8.dp) - .fillMaxWidth() + PartialStorageAccessDialog( + onManageAction = {}, + modifier = Modifier + .padding(8.dp) + .fillMaxWidth() ) } }