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

Merged
ben merged 1 commit from feature/Add-Comment-Input into master 2025-01-21 13:58:14 +00:00
Conversation 0 Commits 1 Files changed 1 +40 -26
1 changed files with 40 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c0dbf668ec - Show all commits

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")
}
}
}
}