Text field consistency updates (#3693)

* Replace OutlinedTextField with TextField * Text field consistency updates - Replace `OutlinedTextField` with the filled `TextField` - Replace server dropdown button with server dropdown menu
2024-07-23 03:14:14 +00:00 · 2023-07-22 01:28:58 +02:00 · 2023-07-22 01:28:58 +02:00 · 42ede5344c
parent e4f697fc3b
commit 42ede5344c
9 changed files with 41 additions and 72 deletions
--- a/app/src/main/java/io/homeassistant/companion/android/nfc/views/NfcWriteView.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/nfc/views/NfcWriteView.kt
@ -9,9 +9,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
+import androidx.compose.material.TextField
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@ -97,7 +97,7 @@ fun NfcWriteIdentifierDialog(
        onDismissRequest = onCancel,
        title = { Text(stringResource(commonR.string.nfc_write_tag_enter_identifier)) },
        content = {
-            OutlinedTextField(
+            TextField(
                value = inputValue.value,
                keyboardOptions = KeyboardOptions(
                    imeAction = ImeAction.Done
--- a/app/src/main/java/io/homeassistant/companion/android/settings/qs/views/ManageTilesView.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/settings/qs/views/ManageTilesView.kt
@ -37,7 +37,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.homeassistant.companion.android.common.R
 import io.homeassistant.companion.android.settings.qs.ManageTilesViewModel
-import io.homeassistant.companion.android.util.compose.ServerDropdownButton
+import io.homeassistant.companion.android.util.compose.ServerExposedDropdownMenu
 import io.homeassistant.companion.android.util.compose.SingleEntityPicker
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
@ -50,7 +50,6 @@ fun ManageTilesView(
    val context = LocalContext.current
    val scrollState = rememberScrollState()
    var expandedTile by remember { mutableStateOf(false) }
-    var expandedEntity by remember { mutableStateOf(false) }

    val scaffoldState = rememberScaffoldState()
    LaunchedEffect("snackbar") {
@ -100,7 +99,7 @@ fun ManageTilesView(
                        Text(text = stringResource(id = R.string.tile_label))
                    },
                    modifier = Modifier
-                        .padding(10.dp)
+                        .padding(top = 16.dp)
                        .fillMaxWidth()
                )

@ -112,20 +111,18 @@ fun ManageTilesView(
                            Text(text = stringResource(id = R.string.tile_subtitle))
                        },
                        modifier = Modifier
-                            .padding(10.dp)
+                            .padding(top = 16.dp)
                            .fillMaxWidth()
                    )
                }

                if (viewModel.servers.size > 1 || viewModel.servers.none { it.id == viewModel.selectedServerId }) {
-                    Text(
-                        text = stringResource(id = R.string.tile_server),
-                        fontSize = 15.sp
-                    )
-                    ServerDropdownButton(
+                    ServerExposedDropdownMenu(
                        servers = viewModel.servers,
                        current = viewModel.selectedServerId,
-                        onSelected = viewModel::selectServerId
+                        onSelected = viewModel::selectServerId,
+                        title = R.string.tile_server,
+                        modifier = Modifier.padding(top = 16.dp)
                    )
                }

@ -138,7 +135,7 @@ fun ManageTilesView(
                        return@SingleEntityPicker true
                    },
                    modifier = Modifier
-                        .padding(10.dp)
+                        .padding(vertical = 16.dp)
                        .fillMaxWidth(),
                    label = { Text(stringResource(R.string.tile_entity)) }
                )
--- a/app/src/main/java/io/homeassistant/companion/android/settings/sensor/views/SensorDetailView.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/settings/sensor/views/SensorDetailView.kt
@ -31,7 +31,6 @@ import androidx.compose.material.ContentAlpha
 import androidx.compose.material.Divider
 import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.RadioButton
 import androidx.compose.material.Scaffold
 import androidx.compose.material.SnackbarResult
@ -39,6 +38,7 @@ import androidx.compose.material.Surface
 import androidx.compose.material.Switch
 import androidx.compose.material.SwitchDefaults
 import androidx.compose.material.Text
+import androidx.compose.material.TextField
 import androidx.compose.material.contentColorFor
 import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
@ -511,7 +511,7 @@ fun SensorDetailSettingDialog(
                    }
                }
            } else {
-                OutlinedTextField(
+                TextField(
                    value = inputValue.value,
                    keyboardOptions = KeyboardOptions(
                        imeAction = ImeAction.Done,
--- a/app/src/main/java/io/homeassistant/companion/android/settings/shortcuts/views/ManageShortcutsView.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/settings/shortcuts/views/ManageShortcutsView.kt
@ -37,7 +37,7 @@ import com.mikepenz.iconics.compose.IconicsPainter
 import io.homeassistant.companion.android.common.R
 import io.homeassistant.companion.android.settings.shortcuts.ManageShortcutsSettingsFragment
 import io.homeassistant.companion.android.settings.shortcuts.ManageShortcutsViewModel
-import io.homeassistant.companion.android.util.compose.ServerDropdownButton
+import io.homeassistant.companion.android.util.compose.ServerExposedDropdownMenu
 import io.homeassistant.companion.android.util.compose.SingleEntityPicker

@RequiresApi(Build.VERSION_CODES.N_MR1)
@ -207,12 +207,7 @@ private fun CreateShortcutView(

    if (viewModel.servers.size > 1 || viewModel.servers.none { it.id == shortcut.serverId.value }) {
        Row(verticalAlignment = Alignment.CenterVertically) {
-            Text(
-                text = stringResource(id = R.string.server_select),
-                fontSize = 15.sp,
-                modifier = Modifier.padding(end = 10.dp)
-            )
-            ServerDropdownButton(
+            ServerExposedDropdownMenu(
                servers = viewModel.servers,
                current = shortcut.serverId.value,
                onSelected = { viewModel.shortcuts[i].serverId.value = it }
@ -220,7 +215,10 @@ private fun CreateShortcutView(
        }
    }

-    Text(stringResource(id = R.string.shortcut_type))
+    Text(
+        text = stringResource(id = R.string.shortcut_type),
+        modifier = Modifier.padding(top = 16.dp)
+    )

    Row {
        ShortcutRadioButtonRow(viewModel = viewModel, type = "lovelace", index = i)
@ -232,7 +230,7 @@ private fun CreateShortcutView(
            value = viewModel.shortcuts[i].path.value,
            onValueChange = { viewModel.shortcuts[i].path.value = it },
            label = { Text(stringResource(id = R.string.lovelace_view_dashboard)) },
-            modifier = Modifier.padding(top = 16.dp, bottom = 16.dp)
+            modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp)
        )
    } else {
        SingleEntityPicker(
@ -244,7 +242,8 @@ private fun CreateShortcutView(
            onEntitySelected = {
                viewModel.shortcuts[i].path.value = "entityId:$it"
                return@SingleEntityPicker true
-            }
+            },
+            modifier = Modifier.padding(bottom = 16.dp)
        )
    }
    for (item in viewModel.dynamicShortcuts) {
--- a/app/src/main/java/io/homeassistant/companion/android/settings/ssid/views/SsidView.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/settings/ssid/views/SsidView.kt
@ -29,8 +29,8 @@ import androidx.compose.material.Icon
 import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.LocalContentColor
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
+import androidx.compose.material.TextField
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material.icons.filled.Error
@ -85,7 +85,7 @@ fun SsidView(
                    var ssidInput by remember { mutableStateOf("") }
                    var ssidError by remember { mutableStateOf(false) }

-                    OutlinedTextField(
+                    TextField(
                        value = ssidInput,
                        singleLine = true,
                        onValueChange = {
@ -116,8 +116,8 @@ fun SsidView(
                    )
                    Button(
                        modifier = Modifier
-                            .height(64.dp) // align with OutlinedTextField: 56 + 8
-                            .padding(start = 8.dp, top = 8.dp),
+                            .height(56.dp) // align with TextField: 56
+                            .padding(start = 8.dp, top = 0.dp),
                        onClick = {
                            keyboardController?.hide()
                            ssidError = !onAddWifiSsid(ssidInput)
--- a/app/src/main/java/io/homeassistant/companion/android/settings/url/views/ExternalUrlInputView.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/settings/url/views/ExternalUrlInputView.kt
@ -7,9 +7,9 @@ import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
+import androidx.compose.material.TextField
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Error
 import androidx.compose.runtime.Composable
@ -47,7 +47,7 @@ fun ExternalUrlInputView(
    Column(
        modifier = Modifier.padding(horizontal = 16.dp)
    ) {
-        OutlinedTextField(
+        TextField(
            value = urlInput ?: "",
            singleLine = true,
            onValueChange = {
--- a/app/src/main/java/io/homeassistant/companion/android/util/compose/ExposedDropdownMenu.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/util/compose/ExposedDropdownMenu.kt
@ -1,12 +1,13 @@
 package io.homeassistant.companion.android.util.compose

+import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.DropdownMenuItem
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.ExposedDropdownMenuBox
 import androidx.compose.material.ExposedDropdownMenuDefaults
-import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
+import androidx.compose.material.TextField
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@ -28,13 +29,13 @@ fun ExposedDropdownMenu(label: String, keys: List<String>, currentIndex: Int?, o
        onExpandedChange = { expanded = !expanded },
        modifier = modifier
    ) {
-        OutlinedTextField(
+        TextField(
            readOnly = true,
            value = currentIndex?.let { keys[it] } ?: "",
            onValueChange = { },
            label = { Text(label) },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
-            colors = ExposedDropdownMenuDefaults.outlinedTextFieldColors(),
+            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            modifier = Modifier.fillMaxWidth()
        )
        ExposedDropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
@ -52,12 +53,18 @@ fun ExposedDropdownMenu(label: String, keys: List<String>, currentIndex: Int?, o
 }

@Composable
-fun ServerExposedDropdownMenu(servers: List<Server>, current: Int?, onSelected: (Int) -> Unit, modifier: Modifier = Modifier) {
+fun ServerExposedDropdownMenu(
+    servers: List<Server>,
+    current: Int?,
+    onSelected: (Int) -> Unit,
+    modifier: Modifier = Modifier,
+    @StringRes title: Int = commonR.string.server_select
+) {
    val keys = servers.map { it.friendlyName }
    val ids = servers.map { it.id }
    val currentIndex = servers.indexOfFirst { it.id == current }.takeUnless { it == -1 }
    ExposedDropdownMenu(
-        label = stringResource(commonR.string.server_select),
+        label = stringResource(title),
        keys = keys,
        currentIndex = currentIndex,
        onSelected = { onSelected(ids[it]) },
--- a/app/src/main/java/io/homeassistant/companion/android/util/compose/ServerDropdownButton.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/util/compose/ServerDropdownButton.kt
@ -1,34 +0,0 @@
-package io.homeassistant.companion.android.util.compose
-
-import androidx.compose.foundation.layout.Box
-import androidx.compose.material.DropdownMenu
-import androidx.compose.material.DropdownMenuItem
-import androidx.compose.material.OutlinedButton
-import androidx.compose.material.Text
-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.unit.sp
-import io.homeassistant.companion.android.database.server.Server
-
-@Composable
-fun ServerDropdownButton(servers: List<Server>, current: Int?, onSelected: (Int) -> Unit) {
-    var expanded by remember { mutableStateOf(false) }
-    Box {
-        OutlinedButton(onClick = { expanded = true }) {
-            Text(servers.firstOrNull { it.id == current }?.friendlyName.orEmpty())
-        }
-        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
-            servers.forEach { server ->
-                DropdownMenuItem(onClick = {
-                    onSelected(server.id)
-                    expanded = false
-                }) {
-                    Text(text = server.friendlyName, fontSize = 15.sp)
-                }
-            }
-        }
-    }
-}
--- a/app/src/main/java/io/homeassistant/companion/android/widgets/assist/AssistShortcutView.kt
+++ b/app/src/main/java/io/homeassistant/companion/android/widgets/assist/AssistShortcutView.kt
@ -11,11 +11,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Button
-import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Switch
 import androidx.compose.material.SwitchDefaults
 import androidx.compose.material.Text
+import androidx.compose.material.TextField
 import androidx.compose.material.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@ -58,7 +58,7 @@ fun AssistShortcutView(
                var startListening by rememberSaveable { mutableStateOf(true) }
                var pipelineId by rememberSaveable(selectedServerId) { mutableStateOf<String?>(null) }

-                OutlinedTextField(
+                TextField(
                    value = name,
                    onValueChange = { name = it },
                    label = { Text(stringResource(commonR.string.widget_text_hint_label)) },