Change macro screen button size and layout

2026-01-03 23:04:20 +01:00 · 2022-05-09 13:18:30 +02:00
parent ef5b741a99
commit a2f8b70bba
5 changed files with 102 additions and 143 deletions
--- 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))
                    }
                }

--- 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<String>,
    isError: MutableState<Boolean>
 ) {
-    Column(modifier = Modifier.padding(16.dp)) {
+    Column {
        TextField(
            text = name.value,
            hint = stringResource(id = R.string.uart_configuration_hint)
--- 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(
--- a/profile_uart/src/main/res/values/strings.xml
+++ b/profile_uart/src/main/res/values/strings.xml
@@ -4,7 +4,7 @@

    <string name="uart_no_macros_info">Please define a macro to send command to the device.</string>

-    <string name="uart_configuration_add">Add selected configuration.</string>
+    <string name="uart_configuration_add">Add</string>
    <string name="uart_configuration_delete">Delete selected configuration.</string>
    <string name="uart_configuration_edit">Edit selected configuration.</string>