fix: background, title and buttons for EditWaypointDialog

app/src/main/java/com/geeksville/mesh/ui/map/EditWaypointDialog.kt

@@ -1,32 +1,43 @@
 package com.geeksville.mesh.ui.map
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.Button
 import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Switch
 import androidx.compose.material.Text
+import androidx.compose.material.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -41,6 +52,8 @@ import com.geeksville.mesh.ui.theme.AppTheme
 import com.geeksville.mesh.util.CustomRecentEmojiProvider
 import com.geeksville.mesh.waypoint
 
+@Suppress("LongMethod")
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 internal fun EditWaypointDialog(
  waypoint: Waypoint,
@@ -56,10 +69,22 @@ internal fun EditWaypointDialog(
 
  if (!showEmojiPickerView) AlertDialog(
  onDismissRequest = onDismissRequest,
- title = { Text(stringResource(title)) },
+ shape = RoundedCornerShape(16.dp),
+ backgroundColor = MaterialTheme.colors.background,
  text = {
  Column(modifier = modifier.fillMaxWidth()) {
- EditTextPreference(title = stringResource(R.string.name),
+ Text(
+ text = stringResource(title),
+ style = MaterialTheme.typography.h6.copy(
+ fontWeight = FontWeight.Bold,
+ textAlign = TextAlign.Center,
+ ),
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(bottom = 16.dp),
+ )
+ EditTextPreference(
+ title = stringResource(R.string.name),
  value = waypointInput.name,
  maxSize = 29, // name max_size:30
  enabled = true,
@@ -71,7 +96,14 @@ internal fun EditWaypointDialog(
  onValueChanged = { waypointInput = waypointInput.copy { name = it } },
  trailingIcon = {
  IconButton(onClick = { showEmojiPickerView = true }) {
- Text(String(Character.toChars(emoji)), fontSize = 24.sp)
+ Text(
+ text = String(Character.toChars(emoji)),
+ modifier = Modifier
+ .background(MaterialTheme.colors.background, CircleShape)
+ .padding(4.dp),
+ fontSize = 24.sp,
+ color = Color.Unspecified.copy(alpha = 1f),
+ )
  }
  },
  )
@@ -111,50 +143,57 @@ internal fun EditWaypointDialog(
  }
  },
  buttons = {
- Row(
- modifier = modifier.fillMaxWidth(),
- verticalAlignment = Alignment.CenterVertically,
+ FlowRow(
+ modifier = modifier.padding(start = 20.dp, end = 20.dp, bottom = 16.dp),
+ horizontalArrangement = Arrangement.spacedBy(8.dp),
+ verticalArrangement = Arrangement.Center,
  ) {
- Button(
- modifier = modifier
- .fillMaxWidth()
- .weight(1f),
+ TextButton(
+ modifier = modifier.weight(1f),
  onClick = onDismissRequest
  ) { Text(stringResource(R.string.cancel)) }
- if (waypoint.id != 0) Button(
- modifier = modifier
- .fillMaxWidth()
- .weight(1f),
- onClick = { onDeleteClicked(waypointInput) },
- enabled = waypointInput.name.isNotEmpty(),
- ) { Text(stringResource(R.string.delete)) }
+ if (waypoint.id != 0) {
+ Button(
+ modifier = modifier.weight(1f),
+ onClick = { onDeleteClicked(waypointInput) },
+  enabled = waypointInput.name.isNotEmpty(),
+ ) { Text(stringResource(R.string.delete)) }
+ }
  Button(
- modifier = modifier
- .fillMaxWidth()
- .weight(1f),
+ modifier = modifier.weight(1f),
  onClick = { onSendClicked(waypointInput) },
  enabled = waypointInput.name.isNotEmpty(),
  ) { Text(stringResource(R.string.send)) }
  }
  },
- modifier = modifier.fillMaxWidth(),
- ) else AndroidView(
- factory = { context ->
- EmojiPickerView(context).apply {
- clipToOutline = true
- setRecentEmojiProvider(
- RecentEmojiProviderAdapter(CustomRecentEmojiProvider(context))
- )
- setOnEmojiPickedListener { emoji ->
- showEmojiPickerView = false
- waypointInput = waypointInput.copy { icon = emoji.emoji.codePointAt(0) }
- }
+ ) else {
+ Column(
+ verticalArrangement = Arrangement.Bottom
+ ) {
+ BackHandler {
+ showEmojiPickerView = false
  }
- },
- modifier = Modifier
- .fillMaxHeight(0.4f) // FIXME
- .background(colorResource(R.color.colorAdvancedBackground))
- )
+
+ AndroidView(
+ factory = { context ->
+ EmojiPickerView(context).apply {
+ clipToOutline = true
+ setRecentEmojiProvider(
+ RecentEmojiProviderAdapter(CustomRecentEmojiProvider(context))
+ )
+ setOnEmojiPickedListener { emoji ->
+ showEmojiPickerView = false
+ waypointInput = waypointInput.copy { icon = emoji.emoji.codePointAt(0) }
+ }
+ }
+ },
+ modifier = Modifier
+ .fillMaxWidth()
+ .fillMaxHeight(0.4f)
+ .background(MaterialTheme.colors.background)
+ )
+ }
+ }
 }
 
 @Preview(showBackground = true)