diff --git a/app/src/main/java/com/example/cupcake/CupcakeScreen.kt b/app/src/main/java/com/example/cupcake/CupcakeScreen.kt index dbb1e8c..86e8eaf 100644 --- a/app/src/main/java/com/example/cupcake/CupcakeScreen.kt +++ b/app/src/main/java/com/example/cupcake/CupcakeScreen.kt @@ -21,6 +21,8 @@ import androidx.annotation.StringRes import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.material3.Icon @@ -115,7 +117,10 @@ fun CupcakeApp( NavHost( navController = navController, startDestination = CupcakeScreen.Start.name, - modifier = Modifier.padding(innerPadding) + modifier = Modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()) + .padding(innerPadding) ) { composable(route = CupcakeScreen.Start.name) { StartOrderScreen( diff --git a/app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt b/app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt index a5d7df1..2f64572 100644 --- a/app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt +++ b/app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt @@ -39,6 +39,7 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import com.example.cupcake.R import com.example.cupcake.ui.components.FormattedPriceLabel +import com.example.cupcake.ui.theme.CupcakeTheme /** * Composable that displays the list of items as [RadioButton] options, @@ -54,7 +55,7 @@ fun SelectOptionScreen( onCancelButtonClicked: () -> Unit = {}, onNextButtonClicked: () -> Unit = {}, modifier: Modifier = Modifier -){ +) { var selectedValue by rememberSaveable { mutableStateOf("") } Column( @@ -72,7 +73,7 @@ fun SelectOptionScreen( } ), verticalAlignment = Alignment.CenterVertically - ){ + ) { RadioButton( selected = selectedValue == item, onClick = { @@ -100,12 +101,14 @@ fun SelectOptionScreen( Row( modifier = Modifier .fillMaxWidth() - .padding(dimensionResource(R.dimen.padding_medium)) - .weight(1f, false), + .padding(dimensionResource(R.dimen.padding_medium)), horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_medium)), verticalAlignment = Alignment.Bottom - ){ - OutlinedButton(modifier = Modifier.weight(1f), onClick = onCancelButtonClicked) { + ) { + OutlinedButton( + modifier = Modifier.weight(1f), + onClick = onCancelButtonClicked + ) { Text(stringResource(R.string.cancel)) } Button( @@ -123,10 +126,12 @@ fun SelectOptionScreen( @Preview @Composable -fun SelectOptionPreview(){ - SelectOptionScreen( - subtotal = "299.99", - options = listOf("Option 1", "Option 2", "Option 3", "Option 4"), - modifier = Modifier.fillMaxHeight() - ) +fun SelectOptionPreview() { + CupcakeTheme { + SelectOptionScreen( + subtotal = "299.99", + options = listOf("Option 1", "Option 2", "Option 3", "Option 4"), + modifier = Modifier.fillMaxHeight() + ) + } } diff --git a/app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt b/app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt index 036b29d..6b9c833 100644 --- a/app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt +++ b/app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt @@ -19,9 +19,7 @@ import androidx.annotation.StringRes import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height @@ -41,6 +39,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.cupcake.R import com.example.cupcake.data.DataSource +import com.example.cupcake.ui.theme.CupcakeTheme /** * Composable that allows the user to select the desired cupcake quantity and expects @@ -52,7 +51,7 @@ fun StartOrderScreen( quantityOptions: List>, onNextButtonClicked: (Int) -> Unit, modifier: Modifier = Modifier -){ +) { Column( modifier = modifier, verticalArrangement = Arrangement.SpaceBetween @@ -75,20 +74,19 @@ fun StartOrderScreen( ) Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_small))) } - Row(modifier = Modifier.weight(1f, false)) { - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy( - dimensionResource(id = R.dimen.padding_medium) + Column( + modifier = Modifier.fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy( + dimensionResource(id = R.dimen.padding_medium) + ) + ) { + quantityOptions.forEach { item -> + SelectQuantityButton( + labelResourceId = item.first, + onClick = { onNextButtonClicked(item.second) }, + modifier = Modifier.fillMaxWidth(), ) - ) { - quantityOptions.forEach { item -> - SelectQuantityButton( - labelResourceId = item.first, - onClick = { onNextButtonClicked(item.second) } - ) - } } } } @@ -103,7 +101,7 @@ fun SelectQuantityButton( @StringRes labelResourceId: Int, onClick: () -> Unit, modifier: Modifier = Modifier -){ +) { Button( onClick = onClick, modifier = modifier.widthIn(min = 250.dp) @@ -114,10 +112,14 @@ fun SelectQuantityButton( @Preview @Composable -fun StartOrderPreview(){ - StartOrderScreen( - quantityOptions = DataSource.quantityOptions, - onNextButtonClicked = {}, - modifier = Modifier.fillMaxSize().padding(dimensionResource(R.dimen.padding_medium)) - ) +fun StartOrderPreview() { + CupcakeTheme { + StartOrderScreen( + quantityOptions = DataSource.quantityOptions, + onNextButtonClicked = {}, + modifier = Modifier + .fillMaxSize() + .padding(dimensionResource(R.dimen.padding_medium)) + ) + } } diff --git a/app/src/main/java/com/example/cupcake/ui/SummaryScreen.kt b/app/src/main/java/com/example/cupcake/ui/SummaryScreen.kt index cd8c75a..1fae196 100644 --- a/app/src/main/java/com/example/cupcake/ui/SummaryScreen.kt +++ b/app/src/main/java/com/example/cupcake/ui/SummaryScreen.kt @@ -38,6 +38,7 @@ import androidx.compose.ui.tooling.preview.Preview import com.example.cupcake.R import com.example.cupcake.data.OrderUiState import com.example.cupcake.ui.components.FormattedPriceLabel +import com.example.cupcake.ui.theme.CupcakeTheme /** * This composable expects [orderUiState] that represents the order state, [onCancelButtonClicked] @@ -50,7 +51,7 @@ fun OrderSummaryScreen( onCancelButtonClicked: () -> Unit, onSendButtonClicked: (String, String) -> Unit, modifier: Modifier = Modifier -){ +) { val resources = LocalContext.current.resources val numberOfCupcakes = resources.getQuantityString( @@ -97,9 +98,7 @@ fun OrderSummaryScreen( ) } Row( - modifier = Modifier - .weight(1f, false) - .padding(dimensionResource(R.dimen.padding_medium)) + modifier = Modifier.padding(dimensionResource(R.dimen.padding_medium)) ) { Column( verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_small)) @@ -123,11 +122,13 @@ fun OrderSummaryScreen( @Preview @Composable -fun OrderSummaryPreview(){ - OrderSummaryScreen( - orderUiState = OrderUiState(0, "Test", "Test", "$300.00"), - onSendButtonClicked = { subject: String, summary: String -> }, - onCancelButtonClicked = {}, - modifier = Modifier.fillMaxHeight() - ) +fun OrderSummaryPreview() { + CupcakeTheme { + OrderSummaryScreen( + orderUiState = OrderUiState(0, "Test", "Test", "$300.00"), + onSendButtonClicked = { subject: String, summary: String -> }, + onCancelButtonClicked = {}, + modifier = Modifier.fillMaxHeight() + ) + } }