bob/mobile-application
1
0
Fork 0
Code Issues 3 Pull requests 3 Projects 1 Releases 4 Activity Actions

feat: improve layout and add send icon to comment submission UI (#15)
All checks were successful
Build / build (push) Successful in 6m38s
Details

Browse source 
This commit makes the following improvements to the comment submission UI:
-   Wraps the UI in a `Box` to center the content.
-   Pads `Row` components.
-   Adds an `Icon` in the submit button.
-   Makes `TextField` fill available width and height.
These changes affect `App.kt`.

Closes #6

Reviewed-on: #15
Co-authored-by: Ben Martin <ben.martin@sky.uk>
Co-committed-by: Ben Martin <ben.martin@sky.uk>
This commit is contained in:
Ben Martin 2025-01-21 13:58:12 +00:00 • committed by Ben Martin
parent 54fdb64c40
commit 0feaf9e92b
1 changed files with 40 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

66
composeApp/src/commonMain/kotlin/uk/sky/bob/application/App.kt
View file

@ -1,15 +1,21 @@
package uk.sky.bob.application
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FilterChip
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Send
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@ -27,38 +33,46 @@ import org.jetbrains.compose.ui.tooling.preview.Preview
@Preview
fun App() {
MaterialTheme {
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
Row {
val state = remember { mutableStateOf(Sentiment.HAPPY) }
for (emotion in Sentiment.entries) {
FilterChip(
onClick = { state.value = emotion },
selected = state.value == emotion,
modifier = Modifier.padding(8.dp),
leadingIcon = { Text(emotion.leadingIcon) },
) {
Text(emotion.friendlyName)
Box(
modifier = Modifier.fillMaxHeight(),
contentAlignment = Alignment.Center,
) {
Column(
Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Row(modifier = Modifier.padding(8.dp)) {
val state = remember { mutableStateOf(Sentiment.HAPPY) }
for (emotion in Sentiment.entries) {
FilterChip(
onClick = { state.value = emotion },
selected = state.value == emotion,
modifier = Modifier.padding(8.dp),
leadingIcon = { Text(emotion.leadingIcon) },
) {
Text(emotion.friendlyName)
}
}
}
}
Row {
var text by rememberSaveable(stateSaver = TextFieldValue.Saver) {
mutableStateOf(
TextFieldValue("")
Row(modifier = Modifier.padding(8.dp)) {
var text by rememberSaveable(stateSaver = TextFieldValue.Saver) {
mutableStateOf(
TextFieldValue("")
)
}
TextField(
value = text,
onValueChange = { text = it },
label = { Text("Your comment") },
modifier = Modifier.height(100.dp).fillMaxWidth().padding(8.dp),
)
}
TextField(
value = text,
onValueChange = { text = it },
label = { Text("Your comment") },
maxLines = 3,
)
}
Row {
Button(onClick = { /* Handle submit */ }) {
Text("Submit")
Row(modifier = Modifier.padding(8.dp)) {
Button(onClick = { /* Handle submit */ }, modifier = Modifier.padding(8.dp)) {
Icon(Icons.AutoMirrored.Filled.Send, contentDescription = "Send")
}
}
}
}