From a2f8b70bba3656bb73e83edefd569965aa4d2e0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sylwester=20Zieli=C5=84ski?= Date: Mon, 9 May 2022 13:18:30 +0200 Subject: [PATCH] Change macro screen button size and layout --- .../theme/view/dialog/StringListDialog.kt | 51 ++++---------- .../android/uart/view/MacroSection.kt | 63 +++++++++-------- .../uart/view/UARTAddConfigurationDialog.kt | 68 ++++++------------- .../android/uart/view/UARTMacroView.kt | 61 ++++++++++------- profile_uart/src/main/res/values/strings.xml | 2 +- 5 files changed, 102 insertions(+), 143 deletions(-) diff --git a/lib_theme/src/main/java/no/nordicsemi/android/theme/view/dialog/StringListDialog.kt b/lib_theme/src/main/java/no/nordicsemi/android/theme/view/dialog/StringListDialog.kt index 7199e8d5..f930491d 100644 --- a/lib_theme/src/main/java/no/nordicsemi/android/theme/view/dialog/StringListDialog.kt +++ b/lib_theme/src/main/java/no/nordicsemi/android/theme/view/dialog/StringListDialog.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.AlertDialog import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.TextButton @@ -17,40 +18,16 @@ import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp -import androidx.compose.ui.window.Dialog -import no.nordicsemi.android.material.you.Card import no.nordicsemi.android.theme.R @Composable fun StringListDialog(config: StringListDialogConfig) { - Dialog(onDismissRequest = { config.onResult(FlowCanceled) }) { - StringListView(config) - } -} - -@Composable -fun StringListView(config: StringListDialogConfig) { - Card( - modifier = Modifier.height(300.dp), - ) { - Column( - modifier = Modifier.padding(16.dp), - verticalArrangement = Arrangement.SpaceBetween - ) { - Column( - modifier = Modifier.fillMaxWidth(), - ) { - Text( - text = config.title ?: stringResource(id = R.string.dialog).toAnnotatedString(), - style = MaterialTheme.typography.headlineMedium - ) - } - - Spacer(modifier = Modifier.size(8.dp)) - + AlertDialog( + onDismissRequest = { config.onResult(FlowCanceled) }, + title = { Text(text = config.title ?: stringResource(id = R.string.dialog).toAnnotatedString()) }, + text = { Column( modifier = Modifier - .fillMaxHeight(0.8f) .verticalScroll(rememberScrollState()) ) { @@ -78,17 +55,13 @@ fun StringListView(config: StringListDialogConfig) { } } } - - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.End - ) { - TextButton(onClick = { config.onResult(FlowCanceled) }) { - Text( - text = stringResource(id = R.string.cancel), - ) - } + }, + confirmButton = { + TextButton(onClick = { config.onResult(FlowCanceled) }) { + Text( + text = stringResource(id = R.string.cancel), + ) } } - } + ) } diff --git a/profile_uart/src/main/java/no/nordicsemi/android/uart/view/MacroSection.kt b/profile_uart/src/main/java/no/nordicsemi/android/uart/view/MacroSection.kt index 4e059de5..3c5305fe 100644 --- a/profile_uart/src/main/java/no/nordicsemi/android/uart/view/MacroSection.kt +++ b/profile_uart/src/main/java/no/nordicsemi/android/uart/view/MacroSection.kt @@ -2,7 +2,6 @@ package no.nordicsemi.android.uart.view import androidx.compose.foundation.layout.* import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Add import androidx.compose.material.icons.filled.Delete import androidx.compose.material.icons.filled.Edit import androidx.compose.material3.* @@ -37,7 +36,9 @@ internal fun MacroSection(viewState: UARTViewState, onEvent: (UARTViewEvent) -> Column( horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.padding(16.dp).fillMaxSize() + modifier = Modifier + .padding(16.dp) + .fillMaxSize() ) { ScreenSection { Column( @@ -46,6 +47,31 @@ internal fun MacroSection(viewState: UARTViewState, onEvent: (UARTViewEvent) -> SectionTitle( resId = R.drawable.ic_macro, title = stringResource(R.string.uart_macros), + menu = { + viewState.selectedConfiguration?.let { + if (!viewState.isConfigurationEdited) { + IconButton(onClick = { onEvent(OnEditConfiguration) }) { + Icon( + Icons.Default.Edit, + stringResource(id = R.string.uart_configuration_edit) + ) + } + } else { + IconButton(onClick = { onEvent(OnEditConfiguration) }) { + Icon( + painterResource(id = R.drawable.ic_pencil_off), + stringResource(id = R.string.uart_configuration_edit) + ) + } + } + IconButton(onClick = { showDeleteDialog.value = true }) { + Icon( + Icons.Default.Delete, + stringResource(id = R.string.uart_configuration_delete) + ) + } + } + } ) Spacer(modifier = Modifier.height(16.dp)) @@ -55,37 +81,10 @@ internal fun MacroSection(viewState: UARTViewState, onEvent: (UARTViewEvent) -> UARTConfigurationPicker(viewState, onEvent) } - IconButton(onClick = { showAddDialog.value = true }) { - Icon( - Icons.Default.Add, - stringResource(id = R.string.uart_configuration_add) - ) - } + Spacer(modifier = Modifier.size(16.dp)) - viewState.selectedConfiguration?.let { - - if (!viewState.isConfigurationEdited) { - IconButton(onClick = { onEvent(OnEditConfiguration) }) { - Icon( - Icons.Default.Edit, - stringResource(id = R.string.uart_configuration_edit) - ) - } - } else { - IconButton(onClick = { onEvent(OnEditConfiguration) }) { - Icon( - painterResource(id = R.drawable.ic_pencil_off), - stringResource(id = R.string.uart_configuration_edit) - ) - } - } - - IconButton(onClick = { showDeleteDialog.value = true }) { - Icon( - Icons.Default.Delete, - stringResource(id = R.string.uart_configuration_delete) - ) - } + Button(onClick = { showAddDialog.value = true }) { + Text(stringResource(id = R.string.uart_configuration_add)) } } diff --git a/profile_uart/src/main/java/no/nordicsemi/android/uart/view/UARTAddConfigurationDialog.kt b/profile_uart/src/main/java/no/nordicsemi/android/uart/view/UARTAddConfigurationDialog.kt index 5e922bd1..dc999960 100644 --- a/profile_uart/src/main/java/no/nordicsemi/android/uart/view/UARTAddConfigurationDialog.kt +++ b/profile_uart/src/main/java/no/nordicsemi/android/uart/view/UARTAddConfigurationDialog.kt @@ -1,20 +1,15 @@ package no.nordicsemi.android.uart.view -import androidx.compose.foundation.layout.* -import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.layout.Column +import androidx.compose.material3.AlertDialog import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable -import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp -import androidx.compose.ui.window.Dialog import no.nordicsemi.android.material.you.TextField import no.nordicsemi.android.uart.R import no.nordicsemi.android.utils.EMPTY @@ -24,47 +19,28 @@ internal fun UARTAddConfigurationDialog(onEvent: (UARTViewEvent) -> Unit, onDism val name = rememberSaveable { mutableStateOf(String.EMPTY) } val isError = rememberSaveable { mutableStateOf(false) } - Dialog(onDismissRequest = { onDismiss() }) { - Surface( - color = MaterialTheme.colorScheme.background, - shape = RoundedCornerShape(10.dp), - shadowElevation = 2.dp, - ) { - Column(verticalArrangement = Arrangement.SpaceBetween) { - Text( - text = stringResource(id = R.string.uart_configuration_dialog_title), - style = MaterialTheme.typography.headlineSmall, - modifier = Modifier - .fillMaxWidth() - .padding(16.dp) - ) - - NameInput(name, isError) - - Row( - modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), - horizontalArrangement = Arrangement.End - ) { - TextButton(onClick = { onDismiss() }) { - Text(stringResource(id = R.string.uart_macro_dialog_dismiss)) - } - - Spacer(modifier = Modifier.size(16.dp)) - - TextButton(onClick = { - if (isNameValid(name.value)) { - onDismiss() - onEvent(OnAddConfiguration(name.value)) - } else { - isError.value = true - } - }) { - Text(stringResource(id = R.string.uart_macro_dialog_confirm)) - } + AlertDialog( + onDismissRequest = { onDismiss() }, + title = { Text(stringResource(id = R.string.uart_configuration_dialog_title)) }, + text = { NameInput(name, isError) }, + confirmButton = { + TextButton(onClick = { + if (isNameValid(name.value)) { + onDismiss() + onEvent(OnAddConfiguration(name.value)) + } else { + isError.value = true } + }) { + Text(stringResource(id = R.string.uart_macro_dialog_confirm)) + } + }, + dismissButton = { + TextButton(onClick = { onDismiss() }) { + Text(stringResource(id = R.string.uart_macro_dialog_dismiss)) } } - } + ) } @Composable @@ -72,7 +48,7 @@ private fun NameInput( name: MutableState, isError: MutableState ) { - Column(modifier = Modifier.padding(16.dp)) { + Column { TextField( text = name.value, hint = stringResource(id = R.string.uart_configuration_hint) diff --git a/profile_uart/src/main/java/no/nordicsemi/android/uart/view/UARTMacroView.kt b/profile_uart/src/main/java/no/nordicsemi/android/uart/view/UARTMacroView.kt index 2757d59b..e9c3496e 100644 --- a/profile_uart/src/main/java/no/nordicsemi/android/uart/view/UARTMacroView.kt +++ b/profile_uart/src/main/java/no/nordicsemi/android/uart/view/UARTMacroView.kt @@ -13,13 +13,13 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import no.nordicsemi.android.uart.R import no.nordicsemi.android.uart.data.UARTConfiguration import no.nordicsemi.android.uart.data.UARTMacro private val divider = 4.dp -private val buttonSize = 80.dp //Minimum touch area @Composable internal fun UARTMacroView( @@ -27,34 +27,42 @@ internal fun UARTMacroView( isEdited: Boolean, onEvent: (UARTViewEvent) -> Unit ) { - Column(modifier = Modifier.padding(horizontal = 16.dp)) { - - Row { - Item(configuration, isEdited, 0, onEvent) - Spacer(modifier = Modifier.size(divider)) - Item(configuration, isEdited, 1, onEvent) - Spacer(modifier = Modifier.size(divider)) - Item(configuration, isEdited, 2, onEvent) + BoxWithConstraints { + val buttonSize = if (maxWidth < 260.dp) { + 48.dp //Minimum touch area + } else { + 80.dp } - Spacer(modifier = Modifier.size(divider)) + Column(modifier = Modifier.padding(horizontal = 16.dp)) { - Row { - Item(configuration, isEdited, 3, onEvent) - Spacer(modifier = Modifier.size(divider)) - Item(configuration, isEdited, 4, onEvent) - Spacer(modifier = Modifier.size(divider)) - Item(configuration, isEdited, 5, onEvent) - } + Row { + Item(configuration, isEdited, 0, buttonSize, onEvent) + Spacer(modifier = Modifier.size(divider)) + Item(configuration, isEdited, 1, buttonSize, onEvent) + Spacer(modifier = Modifier.size(divider)) + Item(configuration, isEdited, 2, buttonSize, onEvent) + } - Spacer(modifier = Modifier.size(divider)) + Spacer(modifier = Modifier.size(divider)) + + Row { + Item(configuration, isEdited, 3, buttonSize, onEvent) + Spacer(modifier = Modifier.size(divider)) + Item(configuration, isEdited, 4, buttonSize, onEvent) + Spacer(modifier = Modifier.size(divider)) + Item(configuration, isEdited, 5, buttonSize, onEvent) + } - Row { - Item(configuration, isEdited, 6, onEvent) Spacer(modifier = Modifier.size(divider)) - Item(configuration, isEdited, 7, onEvent) - Spacer(modifier = Modifier.size(divider)) - Item(configuration, isEdited, 8, onEvent) + + Row { + Item(configuration, isEdited, 6, buttonSize, onEvent) + Spacer(modifier = Modifier.size(divider)) + Item(configuration, isEdited, 7, buttonSize, onEvent) + Spacer(modifier = Modifier.size(divider)) + Item(configuration, isEdited, 8, buttonSize, onEvent) + } } } } @@ -64,14 +72,15 @@ private fun Item( configuration: UARTConfiguration, isEdited: Boolean, position: Int, + buttonSize: Dp, onEvent: (UARTViewEvent) -> Unit ) { val macro = configuration.macros.getOrNull(position) if (macro == null) { - EmptyButton(isEdited, position, onEvent) + EmptyButton(isEdited, position, buttonSize, onEvent) } else { - MacroButton(macro, position, isEdited, onEvent) + MacroButton(macro, position, isEdited, buttonSize, onEvent) } } @@ -80,6 +89,7 @@ private fun MacroButton( macro: UARTMacro, position: Int, isEdited: Boolean, + buttonSize: Dp, onEvent: (UARTViewEvent) -> Unit ) { Image( @@ -104,6 +114,7 @@ private fun MacroButton( private fun EmptyButton( isEdited: Boolean, position: Int, + buttonSize: Dp, onEvent: (UARTViewEvent) -> Unit ) { Box( diff --git a/profile_uart/src/main/res/values/strings.xml b/profile_uart/src/main/res/values/strings.xml index c20c1fdf..227945d9 100644 --- a/profile_uart/src/main/res/values/strings.xml +++ b/profile_uart/src/main/res/values/strings.xml @@ -4,7 +4,7 @@ Please define a macro to send command to the device. - Add selected configuration. + Add Delete selected configuration. Edit selected configuration.