refactor Ui components for custom selector

This commit is contained in:
Rohit Verma 2025-01-03 22:49:05 +05:30
parent 1d11ab7eab
commit 443e713955
3 changed files with 29 additions and 15 deletions

View file

@ -22,12 +22,14 @@ fun PrimaryButton(
text: String,
onClick: ()-> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = RoundedCornerShape(12.dp),
) {
Button(
onClick = onClick,
modifier = modifier,
shape = shape,
enabled = enabled,
contentPadding = PaddingValues(horizontal = 24.dp, vertical = 4.dp)
) {
Text(
@ -42,11 +44,13 @@ fun SecondaryButton(
text: String,
onClick: ()-> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = RoundedCornerShape(12.dp),
) {
OutlinedButton(
onClick = onClick,
modifier = modifier,
enabled = enabled,
border = BorderStroke(1.dp, color = MaterialTheme.colorScheme.primary),
shape = shape,
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 4.dp)

View file

@ -19,14 +19,21 @@ import fr.free.nrw.commons.ui.theme.CommonsTheme
fun CustomSelectorBottomBar(
onPrimaryAction: ()-> Unit,
onSecondaryAction: ()-> Unit,
modifier: Modifier = Modifier
modifier: Modifier = Modifier,
isAnyImageNotForUpload: Boolean = false
) {
val buttonText = if (isAnyImageNotForUpload) {
R.string.unmark_as_not_for_upload
} else {
R.string.mark_as_not_for_upload
}
Row(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
SecondaryButton(
text = stringResource(R.string.mark_as_not_for_upload).uppercase(),
text = stringResource(buttonText).uppercase(),
onClick = onSecondaryAction,
modifier = Modifier.weight(1f)
)
@ -34,6 +41,7 @@ fun CustomSelectorBottomBar(
PrimaryButton(
text = stringResource(R.string.upload).uppercase(),
onClick = onPrimaryAction,
enabled = !isAnyImageNotForUpload,
modifier = Modifier
.weight(1f)
.height(IntrinsicSize.Max)

View file

@ -1,12 +1,14 @@
package fr.free.nrw.commons.customselector.ui.components
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.rounded.KeyboardArrowLeft
import androidx.compose.material.icons.filled.Close
@ -20,6 +22,7 @@ import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
@ -92,25 +95,24 @@ fun CustomSelectorTopBar(
colors = CardDefaults.elevatedCardColors(
containerColor = MaterialTheme.colorScheme.primary
),
elevation = CardDefaults.elevatedCardElevation(8.dp),
shape = CircleShape,
modifier = Modifier.semantics { contentDescription = "$selectionCount Selected" }
.padding(end = 8.dp)
shape = RoundedCornerShape(50),
modifier = Modifier.padding(end = 8.dp)
.semantics { contentDescription = "$selectionCount Selected" }
) {
Row(
modifier = Modifier.padding(start = 16.dp, end = 8.dp),
modifier = Modifier.padding(horizontal = 8.dp, vertical = 6.dp)
.widthIn(min = 52.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
horizontalArrangement = Arrangement.SpaceEvenly
) {
Text(
text = "$selectionCount",
modifier = Modifier.padding(vertical = 8.dp)
)
Text(text = "$selectionCount")
Icon(
imageVector = Icons.Default.Close,
contentDescription = null,
modifier = Modifier.clickable { onUnselectAllAction() }
modifier = Modifier.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null
) { onUnselectAllAction() }
)
}
}