From f318467465c9a733120419f60423635aa29832fd Mon Sep 17 00:00:00 2001 From: Mathieu Date: Mon, 3 Jan 2022 15:05:08 +0100 Subject: [PATCH] Added dropdown menu, added text entry menu (instead of STT), made FAB bigger --- .idea/misc.xml | 6 + .../jarvis/android/MainActivity.kt | 72 +++++++++--- .../jarvis/android/utils/Dialogs.kt | 111 ++++++++++++++++++ .../res/drawable/ic_baseline_error_24.xml | 10 ++ .../res/drawable/ic_baseline_keyboard_24.xml | 10 ++ 5 files changed, 190 insertions(+), 19 deletions(-) create mode 100644 app/src/main/java/ch/mathieubroillet/jarvis/android/utils/Dialogs.kt create mode 100644 app/src/main/res/drawable/ic_baseline_error_24.xml create mode 100644 app/src/main/res/drawable/ic_baseline_keyboard_24.xml diff --git a/.idea/misc.xml b/.idea/misc.xml index 874569f..5c7a865 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -13,7 +13,13 @@ + + + + + + diff --git a/app/src/main/java/ch/mathieubroillet/jarvis/android/MainActivity.kt b/app/src/main/java/ch/mathieubroillet/jarvis/android/MainActivity.kt index 7051825..384f4df 100644 --- a/app/src/main/java/ch/mathieubroillet/jarvis/android/MainActivity.kt +++ b/app/src/main/java/ch/mathieubroillet/jarvis/android/MainActivity.kt @@ -6,21 +6,24 @@ import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.* import androidx.compose.foundation.layout.* +import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* -import androidx.compose.runtime.Composable +import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.core.view.WindowCompat import androidx.core.view.WindowInsetsControllerCompat import ch.mathieubroillet.jarvis.android.ui.theme.JarvisComposeTheme import ch.mathieubroillet.jarvis.android.ui.theme.productSansFont +import ch.mathieubroillet.jarvis.android.utils.IconAlertDialogTextField class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { @@ -52,18 +55,46 @@ class MainActivity : ComponentActivity() { } } +var messageScroll: ScrollState? = null //Draws the base of the main activity, that includes the 3-dots menu and the "hi text". @Composable fun Base() { + var expanded by remember { mutableStateOf(false) } + Column(Modifier.padding(bottom = 25.dp)) { Row(Modifier.align(Alignment.End)) { - IconButton(onClick = { /*TODO*/ }) { + + IconAlertDialogTextField( + R.drawable.ic_baseline_keyboard_24, + "Demandez-moi quelque chose", + "Entrez une phrase" + ) + + IconButton(onClick = { expanded = true }) { Icon( painter = painterResource(id = R.drawable.ic_baseline_more_vert_24), contentDescription = "3 dots button" ) } + + + DropdownMenu( + expanded = expanded, + onDismissRequest = { expanded = false }, + offset = DpOffset((-500).dp, 0.dp) + ) { + DropdownMenuItem(onClick = { /* Handle refresh! */ }) { + Text("Effacer la conversation") + } + DropdownMenuItem(onClick = { /* Handle settings! */ }) { + Text("Paramètres") + } + Divider() + DropdownMenuItem(onClick = { /* Handle send feedback! */ }) { + Text("Signaler un problème") + } + } } Text( @@ -76,17 +107,16 @@ fun Base() { } @Composable -fun Footer() { +fun RecordFloatingButton() { //We create a row that we align to the bottom center of the parent box Row( Modifier - .padding(bottom = 50.dp) .fillMaxWidth(), verticalAlignment = Alignment.Bottom, horizontalArrangement = Arrangement.Center ) { //Microphone floating button to manually start/stop listening - FloatingActionButton(onClick = { /*TODO*/ }) { + FloatingActionButton(onClick = { /*TODO*/ }, modifier = Modifier.size(70.dp)) { Icon( painter = painterResource(id = R.drawable.ic_baseline_mic_24), contentDescription = "microphone" @@ -158,30 +188,34 @@ fun DefaultPreview() { .fillMaxHeight() .fillMaxWidth() .padding(horizontal = 15.dp) - .padding(top = 45.dp, bottom = 0.dp) + .padding(top = 45.dp, bottom = 10.dp) ) { // This column regroup the base and all the conversations (everything except the footer) - Column { + Column(Modifier.padding(bottom = 80.dp)) { Base() + messageScroll = rememberScrollState() // This column regroup only the conversations and make them scrollable - Column( - modifier = Modifier - .verticalScroll(rememberScrollState()) - .weight(weight = 1f, fill = false) - ) { - // Basic interaction stuff for demo - MessageFromJarvis(text = "Salut, je suis Jarvis! \nPose moi une question et je ferais de mon mieux pour te renseigner.") - MessageFromUser(text = "Quel temps fait-il à Paris en ce moment ?") - MessageFromJarvis(text = "A Paris, il fait actuellement 10 degrés et le ciel est nuageux.") - } + + LazyColumn(content = { + item { + // Basic interaction stuff for demo + MessageFromJarvis(text = "Salut, je suis Jarvis! \nPose moi une question et je ferais de mon mieux pour te renseigner.") + MessageFromUser(text = "Quel temps fait-il à Paris en ce moment ?") + MessageFromJarvis(text = "A Paris, il fait actuellement 10 degrés et le ciel est nuageux.") + } + }) } // Finally we add the footer to the bottom center of the main box - Column(Modifier.align(Alignment.BottomCenter)) { - Footer() + Column( + Modifier + .align(Alignment.BottomCenter) + .padding(bottom = 40.dp) + ) { + RecordFloatingButton() } } } diff --git a/app/src/main/java/ch/mathieubroillet/jarvis/android/utils/Dialogs.kt b/app/src/main/java/ch/mathieubroillet/jarvis/android/utils/Dialogs.kt new file mode 100644 index 0000000..bdcc952 --- /dev/null +++ b/app/src/main/java/ch/mathieubroillet/jarvis/android/utils/Dialogs.kt @@ -0,0 +1,111 @@ +package ch.mathieubroillet.jarvis.android.utils + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.* +import androidx.compose.runtime.* +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.input.TextFieldValue +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import ch.mathieubroillet.jarvis.android.R +import ch.mathieubroillet.jarvis.android.ui.theme.productSansFont + +@Composable +fun IconAlertDialogTextField( + buttonIcon: Int = R.drawable.ic_baseline_error_24, + title: String = "Title", + label: String = "Label" +) { + MaterialTheme { + Column { + val openDialog = remember { mutableStateOf(false) } + + IconButton(onClick = { openDialog.value = true }) { + Icon( + painter = painterResource(id = buttonIcon), + contentDescription = "icon button with dialog" + ) + } + + if (openDialog.value) { + AlertDialog( + onDismissRequest = { + // Dismiss the dialog when the user clicks outside the dialog or on the back + // button. If you want to disable that functionality, simply use an empty + // onCloseRequest. + openDialog.value = false + }, + title = null, + text = null, + buttons = { + Column(Modifier.fillMaxWidth()) { + Box( + modifier = Modifier + .clip(RectangleShape) + .background(color = MaterialTheme.colors.secondaryVariant) + .padding(horizontal = 20.dp, vertical = 15.dp) + ) { + Text( + text = title, + fontFamily = productSansFont, + fontSize = 30.sp + ) + } + Box( + modifier = Modifier + .clip(RectangleShape) + .background(color = MaterialTheme.colors.background) + .padding(horizontal = 20.dp) + .padding(top = 15.dp, bottom = 10.dp) + ) { + Column { + var text by remember { mutableStateOf(TextFieldValue("")) } + OutlinedTextField( + value = text, + onValueChange = { newText -> + text = newText + }, + label = { Text(text = label) }, + colors = TextFieldDefaults.outlinedTextFieldColors( + focusedBorderColor = MaterialTheme.colors.secondaryVariant, + focusedLabelColor = MaterialTheme.colors.secondary + ) + ) + + Row( + Modifier + .fillMaxWidth() + .padding(top = 5.dp), + horizontalArrangement = Arrangement.End + ) { + TextButton(onClick = { openDialog.value = false }) { + Text( + text = "Annuler", + color = MaterialTheme.colors.secondary + ) + } + TextButton(onClick = { /*TODO*/ }) { + Text( + text = "OK", + color = MaterialTheme.colors.secondary + ) + } + } + } + + + } + } + }, + shape = RoundedCornerShape(8.dp) + ) + } + } + + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_baseline_error_24.xml b/app/src/main/res/drawable/ic_baseline_error_24.xml new file mode 100644 index 0000000..b915a34 --- /dev/null +++ b/app/src/main/res/drawable/ic_baseline_error_24.xml @@ -0,0 +1,10 @@ + + + diff --git a/app/src/main/res/drawable/ic_baseline_keyboard_24.xml b/app/src/main/res/drawable/ic_baseline_keyboard_24.xml new file mode 100644 index 0000000..533fc15 --- /dev/null +++ b/app/src/main/res/drawable/ic_baseline_keyboard_24.xml @@ -0,0 +1,10 @@ + + +