From 0e161d64b362367ba73b9e368082334a32721f54 Mon Sep 17 00:00:00 2001 From: andrekir Date: Sun, 6 Oct 2024 08:52:00 -0300 Subject: [PATCH] style: unify `AlertDialog` shape, background and buttons --- .../mesh/ui/DeviceSettingsFragment.kt | 12 +- .../mesh/ui/components/DeviceMetrics.kt | 4 +- .../mesh/ui/components/IndoorAirQuality.kt | 22 ++- .../mesh/ui/components/SimpleAlertDialog.kt | 2 +- .../ui/components/config/EditChannelDialog.kt | 144 +++++++++--------- .../config/PacketResponseStateDialog.kt | 7 +- 6 files changed, 106 insertions(+), 85 deletions(-) diff --git a/app/src/main/java/com/geeksville/mesh/ui/DeviceSettingsFragment.kt b/app/src/main/java/com/geeksville/mesh/ui/DeviceSettingsFragment.kt index 637836d68..bc495ad42 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/DeviceSettingsFragment.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/DeviceSettingsFragment.kt @@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.AlertDialog import androidx.compose.material.Button import androidx.compose.material.Card @@ -29,6 +30,7 @@ import androidx.compose.material.IconButton import androidx.compose.material.MaterialTheme import androidx.compose.material.Scaffold import androidx.compose.material.Text +import androidx.compose.material.TextButton import androidx.compose.material.TopAppBar import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack @@ -686,7 +688,9 @@ private fun NavCard( private fun NavButton(@StringRes title: Int, enabled: Boolean, onClick: () -> Unit) { var showDialog by remember { mutableStateOf(false) } if (showDialog) AlertDialog( - onDismissRequest = { }, + onDismissRequest = {}, + shape = RoundedCornerShape(16.dp), + backgroundColor = MaterialTheme.colors.background, title = { Row( modifier = Modifier.fillMaxWidth(), @@ -708,11 +712,13 @@ private fun NavButton(@StringRes title: Int, enabled: Boolean, onClick: () -> Un }, buttons = { Row( - modifier = Modifier.fillMaxWidth(), + modifier = Modifier + .fillMaxWidth() + .padding(start = 16.dp, end = 16.dp, bottom = 16.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically, ) { - Button( + TextButton( modifier = Modifier.weight(1f), onClick = { showDialog = false }, ) { Text(stringResource(R.string.cancel)) } diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/DeviceMetrics.kt b/app/src/main/java/com/geeksville/mesh/ui/components/DeviceMetrics.kt index c4f9cbcf2..ea886d1a4 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/components/DeviceMetrics.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/components/DeviceMetrics.kt @@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.material.AlertDialog import androidx.compose.material.Card @@ -312,9 +313,10 @@ private fun DeviceInfoDialog(onDismiss: () -> Unit) { onDismissRequest = onDismiss, confirmButton = { TextButton(onClick = onDismiss) { - Text(stringResource(R.string.okay)) + Text(stringResource(R.string.close)) } }, + shape = RoundedCornerShape(16.dp), backgroundColor = MaterialTheme.colors.background ) } diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/IndoorAirQuality.kt b/app/src/main/java/com/geeksville/mesh/ui/components/IndoorAirQuality.kt index eeb46ba86..dae1bed60 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/components/IndoorAirQuality.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/components/IndoorAirQuality.kt @@ -15,12 +15,12 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.AlertDialog -import androidx.compose.material.Button import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.Icon import androidx.compose.material.LinearProgressIndicator import androidx.compose.material.MaterialTheme import androidx.compose.material.Text +import androidx.compose.material.TextButton import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ThumbUp import androidx.compose.material.icons.filled.Warning @@ -34,9 +34,11 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import com.geeksville.mesh.R enum class Iaq(val color: Color, val description: String) { Excellent(Color.Green, "Excellent"), @@ -173,13 +175,14 @@ fun IndoorAirQuality(iaq: Int, displayMode: IaqDisplayMode = IaqDisplayMode.Pill if (isLegendOpen) { AlertDialog( onDismissRequest = { isLegendOpen = false }, - title = { Text("IAQ Scale") }, + shape = RoundedCornerShape(16.dp), + backgroundColor = MaterialTheme.colors.background, text = { IAQScale() }, confirmButton = { - Button(onClick = { isLegendOpen = false }) { - Text("Close") + TextButton(onClick = { isLegendOpen = false }) { + Text(text = stringResource(id = R.string.close)) } } ) @@ -198,8 +201,15 @@ fun IAQScale(modifier: Modifier = Modifier) { .padding(16.dp), horizontalAlignment = Alignment.Start ) { - Text("Indoor Air Quality (IAQ)", style = MaterialTheme.typography.h6) - Spacer(modifier = Modifier.height(8.dp)) + Text( + text = "Indoor Air Quality (IAQ)", + style = MaterialTheme.typography.h6.copy( + fontWeight = FontWeight.Bold, + textAlign = TextAlign.Center, + ), + modifier = Modifier.fillMaxWidth(), + ) + Spacer(modifier = Modifier.height(16.dp)) for (iaq in Iaq.entries) { Row(verticalAlignment = Alignment.CenterVertically) { Box( diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/SimpleAlertDialog.kt b/app/src/main/java/com/geeksville/mesh/ui/components/SimpleAlertDialog.kt index 49b83848c..4b9c9370d 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/components/SimpleAlertDialog.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/components/SimpleAlertDialog.kt @@ -36,7 +36,6 @@ fun SimpleAlertDialog( ), ) { Text(text = stringResource(id = R.string.close)) } }, - modifier = Modifier.background(MaterialTheme.colors.background.copy(alpha = 1f)), title = { Text( text = stringResource(id = title), @@ -46,6 +45,7 @@ fun SimpleAlertDialog( }, text = text, shape = RoundedCornerShape(16.dp), + backgroundColor = MaterialTheme.colors.background, ) @Composable diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/config/EditChannelDialog.kt b/app/src/main/java/com/geeksville/mesh/ui/components/config/EditChannelDialog.kt index b1126fb68..80f4cfca9 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/components/config/EditChannelDialog.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/EditChannelDialog.kt @@ -7,10 +7,12 @@ import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +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.MaterialTheme import androidx.compose.material.Text import androidx.compose.material.TextButton import androidx.compose.runtime.Composable @@ -34,7 +36,6 @@ import com.geeksville.mesh.ui.components.EditBase64Preference import com.geeksville.mesh.ui.components.EditTextPreference import com.geeksville.mesh.ui.components.PositionPrecisionPreference import com.geeksville.mesh.ui.components.SwitchPreference -import com.google.accompanist.themeadapter.appcompat.AppCompatTheme @Suppress("LongMethod") @OptIn(ExperimentalLayoutApi::class) @@ -46,99 +47,96 @@ fun EditChannelDialog( modifier: Modifier = Modifier, modemPresetName: String = "Default", ) { + val focusManager = LocalFocusManager.current + var isFocused by remember { mutableStateOf(false) } + var channelInput by remember(channelSettings) { mutableStateOf(channelSettings) } AlertDialog( onDismissRequest = onDismissRequest, + shape = RoundedCornerShape(16.dp), + backgroundColor = MaterialTheme.colors.background, text = { - AppCompatTheme { - Column(modifier.fillMaxWidth()) { - val focusManager = LocalFocusManager.current - var isFocused by remember { mutableStateOf(false) } - EditTextPreference( - title = stringResource(R.string.channel_name), - value = if (isFocused) channelInput.name else channelInput.name.ifEmpty { modemPresetName }, - maxSize = 11, // name max_size:12 - enabled = true, - isError = false, - keyboardOptions = KeyboardOptions.Default.copy( - keyboardType = KeyboardType.Text, imeAction = ImeAction.Done - ), - keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }), - onValueChanged = { - channelInput = channelInput.copy { - name = it.trim() - if (psk == Channel.default.settings.psk) psk = Channel.getRandomKey() - } - }, - onFocusChanged = { isFocused = it.isFocused }, - ) + Column(modifier.fillMaxWidth()) { + EditTextPreference( + title = stringResource(R.string.channel_name), + value = if (isFocused) channelInput.name else channelInput.name.ifEmpty { modemPresetName }, + maxSize = 11, // name max_size:12 + enabled = true, + isError = false, + keyboardOptions = KeyboardOptions.Default.copy( + keyboardType = KeyboardType.Text, imeAction = ImeAction.Done + ), + keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }), + onValueChanged = { + channelInput = channelInput.copy { + name = it.trim() + if (psk == Channel.default.settings.psk) psk = Channel.getRandomKey() + } + }, + onFocusChanged = { isFocused = it.isFocused }, + ) - EditBase64Preference( - title = "PSK", - value = channelInput.psk, - enabled = true, - keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }), - onValueChange = { - val fullPsk = Channel(channelSettings { psk = it }).psk - if (fullPsk.size() in setOf(0, 16, 32)) { - channelInput = channelInput.copy { psk = it } - } - }, - onGenerateKey = { - channelInput = channelInput.copy { psk = Channel.getRandomKey() } - }, - ) + EditBase64Preference( + title = "PSK", + value = channelInput.psk, + enabled = true, + keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }), + onValueChange = { + val fullPsk = Channel(channelSettings { psk = it }).psk + if (fullPsk.size() in setOf(0, 16, 32)) { + channelInput = channelInput.copy { psk = it } + } + }, + onGenerateKey = { + channelInput = channelInput.copy { psk = Channel.getRandomKey() } + }, + ) - SwitchPreference( - title = "Uplink enabled", - checked = channelInput.uplinkEnabled, - enabled = true, - onCheckedChange = { - channelInput = channelInput.copy { uplinkEnabled = it } - }, - padding = PaddingValues(0.dp) - ) + SwitchPreference( + title = "Uplink enabled", + checked = channelInput.uplinkEnabled, + enabled = true, + onCheckedChange = { + channelInput = channelInput.copy { uplinkEnabled = it } + }, + padding = PaddingValues(0.dp) + ) - SwitchPreference( - title = "Downlink enabled", - checked = channelInput.downlinkEnabled, - enabled = true, - onCheckedChange = { - channelInput = channelInput.copy { downlinkEnabled = it } - }, - padding = PaddingValues(0.dp) - ) + SwitchPreference( + title = "Downlink enabled", + checked = channelInput.downlinkEnabled, + enabled = true, + onCheckedChange = { + channelInput = channelInput.copy { downlinkEnabled = it } + }, + padding = PaddingValues(0.dp) + ) - PositionPrecisionPreference( - title = "Position enabled", - enabled = true, - value = channelInput.moduleSettings.positionPrecision, - onValueChanged = { - val module = channelInput.moduleSettings.copy { positionPrecision = it } - channelInput = channelInput.copy { moduleSettings = module } - }, - ) - } + PositionPrecisionPreference( + title = "Position enabled", + enabled = true, + value = channelInput.moduleSettings.positionPrecision, + onValueChanged = { + val module = channelInput.moduleSettings.copy { positionPrecision = it } + channelInput = channelInput.copy { moduleSettings = module } + }, + ) } }, buttons = { FlowRow( modifier = modifier .fillMaxWidth() - .padding(horizontal = 24.dp), + .padding(start = 24.dp, end = 24.dp, bottom = 16.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), ) { TextButton( - modifier = modifier - .fillMaxWidth() - .weight(1f), + modifier = modifier.weight(1f), onClick = onDismissRequest ) { Text(stringResource(R.string.cancel)) } Button( - modifier = modifier - .fillMaxWidth() - .weight(1f), + modifier = modifier.weight(1f), onClick = { onAddClick(channelInput) }, diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/config/PacketResponseStateDialog.kt b/app/src/main/java/com/geeksville/mesh/ui/components/config/PacketResponseStateDialog.kt index b8f8b4e09..61dde89df 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/components/config/PacketResponseStateDialog.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/components/config/PacketResponseStateDialog.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.AlertDialog import androidx.compose.material.Button import androidx.compose.material.LinearProgressIndicator @@ -29,6 +30,8 @@ fun PacketResponseStateDialog( ) { AlertDialog( onDismissRequest = {}, + shape = RoundedCornerShape(16.dp), + backgroundColor = MaterialTheme.colors.background, title = { Column( modifier = Modifier.fillMaxWidth(), @@ -60,7 +63,9 @@ fun PacketResponseStateDialog( }, buttons = { Row( - modifier = Modifier.fillMaxWidth(), + modifier = Modifier + .fillMaxWidth() + .padding(start = 24.dp, end = 24.dp, bottom = 16.dp), horizontalArrangement = Arrangement.Center ) { Button(