Report Submitted Screen #60
Conversation
| onSubmitAnother: () -> Unit = {}, | ||
| onReturnHome: () -> Unit = {} |
There was a problem hiding this comment.
Add a TODO to replace with a viewmodel!
| Column( | ||
| horizontalAlignment = Alignment.CenterHorizontally, | ||
| verticalArrangement = Arrangement.spacedBy(26.dp) | ||
| ) { | ||
| Image( | ||
| painter = painterResource(id = R.drawable.ic_check_circle), | ||
| contentDescription = "Check Circle", | ||
| ) | ||
| Column( | ||
| horizontalAlignment = Alignment.CenterHorizontally, | ||
| verticalArrangement = Arrangement.spacedBy(10.dp) | ||
| ) { | ||
| Text( | ||
| text = "Thank you for your input!", | ||
| fontFamily = montserratFamily, | ||
| fontWeight = FontWeight.Bold, | ||
| fontSize = 16.sp, | ||
| ) | ||
| Text( | ||
| text = "Your report has been submitted.", | ||
| fontFamily = montserratFamily, | ||
| fontSize = 14.sp, | ||
| ) | ||
| } | ||
|
|
There was a problem hiding this comment.
It's a tad bit difficult to read the nested composables here; please pull this out into a new private fun composable for readability!
| Column( | ||
| verticalArrangement = Arrangement.spacedBy(16.dp), | ||
| ) { | ||
| Surface( | ||
| color = GRAY01, | ||
| shape = RoundedCornerShape(38.dp), | ||
| modifier = Modifier | ||
| .width(184.dp) | ||
| .height(42.dp), | ||
| shadowElevation = 2.dp, | ||
| onClick = { onSubmitAnother() } | ||
| ) { | ||
| Text( | ||
| text = "SUBMIT ANOTHER", | ||
| fontFamily = montserratFamily, | ||
| fontSize = 14.sp, | ||
| fontWeight = FontWeight.Bold, | ||
| textAlign = TextAlign.Center, | ||
| modifier = Modifier.padding(12.dp) | ||
| ) |
There was a problem hiding this comment.
Same thing with this column, private fun composable plz!
| @Preview(showBackground = true) | ||
| @Composable | ||
| private fun ReportSubmittedScreenPreview() { | ||
| ReportSubmittedScreen() | ||
| } |
There was a problem hiding this comment.
I do want to make sure that this screen looks correct on several device heights. I actually can't really tell how you're centering the text from the composables above, but...
In general, suppose we centered an object on one device by padding some 300.dp padding on top. If you then have a shorter screen, this might cause the object to render actually lower than the middle.
In general, usages of like Modifier.weight(1f) or verticalArrangement achieve a streamlined effect across screen sizes, but I wasn't quite sure if yours was doing anything like that. If you suspect that your code suffers from that problem above, plz fix!
There was a problem hiding this comment.
Hi, sorry for the disorganized composables, I extracted them into private composables, but the general idea for centering was I used
verticalArrangement = Arrangement.spacedBy(
60.dp,
Alignment.CenterVertically
),
from the main outermost column to center the inner most composables vertically and then space them apart by 60.dp
There was a problem hiding this comment.
Ah okay I see, I actually didn't know you could used spacedBy WITH a center vertically... that's awesome!!
…uappdev/uplift-android into andrew/report-submitted-screen
| SubmittedMessageColumn() | ||
| ButtonsColumn(onSubmitAnother, onReturnHome) |
Summary of Changes for Issue #59
Demo