Clearer node filter options (#3250)

Author: poliver

app/src/main/java/com/geeksville/mesh/ui/node/components/NodeFilterTextField.kt

@@ -17,30 +17,34 @@
 
 package com.geeksville.mesh.ui.node.components
 
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.Sort
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material.icons.filled.Done
 import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.Checkbox
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MenuDefaults
 import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.RadioButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -54,6 +58,7 @@ import androidx.compose.ui.platform.LocalFocusManager
 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.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import com.geeksville.mesh.ui.common.preview.LargeFontPreview
@@ -184,104 +189,94 @@ private fun NodeSortButton(
         onDismissRequest = { expanded = false },
         modifier = Modifier.background(MaterialTheme.colorScheme.background.copy(alpha = 1f)),
     ) {
+        DropdownMenuTitle(text = stringResource(R.string.node_sort_title))
+
         NodeSortOption.entries.forEach { sort ->
-            DropdownMenuItem(
-                onClick = {
-                    onSortSelect(sort)
-                    expanded = false
-                },
-                text = {
-                    Text(
-                        text = stringResource(id = sort.stringRes),
-                        fontWeight = if (sort == currentSortOption) FontWeight.ExtraBold else null,
-                    )
-                },
+            DropdownMenuRadio(
+                text = stringResource(id = sort.stringRes),
+                selected = sort == currentSortOption,
+                onClick = { onSortSelect(sort) },
             )
         }
-        HorizontalDivider()
-        DropdownMenuItem(
-            onClick = {
-                toggles.onToggleIncludeUnknown()
-                expanded = false
-            },
-            text = {
-                Row {
-                    AnimatedVisibility(visible = toggles.includeUnknown) {
-                        Icon(
-                            imageVector = Icons.Default.Done,
-                            contentDescription = null,
-                            modifier = Modifier.padding(end = 4.dp),
-                        )
-                    }
-                    Text(text = stringResource(id = R.string.node_filter_include_unknown))
-                }
-            },
+
+        HorizontalDivider(modifier = Modifier.padding(MenuDefaults.DropdownMenuItemContentPadding))
+
+        DropdownMenuTitle(text = stringResource(R.string.node_filter_title))
+
+        DropdownMenuCheck(
+            text = stringResource(R.string.node_filter_include_unknown),
+            checked = toggles.includeUnknown,
+            onClick = toggles.onToggleIncludeUnknown,
         )
-        DropdownMenuItem(
-            onClick = {
-                toggles.onToggleOnlyOnline()
-                expanded = false
-            },
-            text = {
-                Row {
-                    AnimatedVisibility(visible = toggles.onlyOnline) {
-                        Icon(
-                            imageVector = Icons.Default.Done,
-                            contentDescription = null,
-                            modifier = Modifier.padding(end = 4.dp),
-                        )
-                    }
-                    Text(text = stringResource(id = R.string.node_filter_only_online))
-                }
-            },
+
+        DropdownMenuCheck(
+            text = stringResource(R.string.node_filter_only_online),
+            checked = toggles.onlyOnline,
+            onClick = toggles.onToggleOnlyOnline,
         )
-        DropdownMenuItem(
-            onClick = {
-                toggles.onToggleOnlyDirect()
-                expanded = false
-            },
-            text = {
-                Row {
-                    AnimatedVisibility(visible = toggles.onlyDirect) {
-                        Icon(
-                            imageVector = Icons.Default.Done,
-                            contentDescription = null,
-                            modifier = Modifier.padding(end = 4.dp),
-                        )
-                    }
-                    Text(text = stringResource(id = R.string.node_filter_only_direct))
-                }
-            },
+
+        DropdownMenuCheck(
+            text = stringResource(R.string.node_filter_only_direct),
+            checked = toggles.onlyDirect,
+            onClick = toggles.onToggleOnlyDirect,
         )
-        HorizontalDivider()
-        DropdownMenuItem(
-            onClick = {
-                toggles.onToggleShowIgnored()
-                expanded = false
-            },
-            text = {
-                Row {
-                    AnimatedVisibility(visible = toggles.showIgnored) {
-                        Icon(
-                            imageVector = Icons.Default.Done,
-                            contentDescription = null,
-                            modifier = Modifier.padding(end = 4.dp),
-                        )
-                    }
-                    Text(text = stringResource(id = R.string.node_filter_show_ignored))
-                    if (toggles.ignoredNodeCount > 0) {
-                        Text(
-                            text = " (${toggles.ignoredNodeCount})",
-                            color = MaterialTheme.colorScheme.primary,
-                            modifier = Modifier.padding(start = 4.dp),
-                        )
-                    }
+
+        DropdownMenuCheck(
+            text = stringResource(R.string.node_filter_show_ignored),
+            checked = toggles.showIgnored,
+            onClick = toggles.onToggleShowIgnored,
+            trailing =
+            if (toggles.ignoredNodeCount > 0) {
+                {
+                    Text(
+                        text = " (${toggles.ignoredNodeCount})",
+                        color = MaterialTheme.colorScheme.primary,
+                        modifier = Modifier.padding(start = 4.dp),
+                    )
                 }
+            } else {
+                null
             },
         )
     }
 }
 
+@Composable
+private fun DropdownMenuTitle(text: String) {
+    Text(
+        text = text,
+        modifier =
+        Modifier.height(48.dp)
+            .padding(MenuDefaults.DropdownMenuItemContentPadding)
+            .wrapContentHeight(align = Alignment.CenterVertically),
+        fontWeight = FontWeight.ExtraBold,
+    )
+}
+
+@Composable
+private fun DropdownMenuRadio(text: String, selected: Boolean, onClick: () -> Unit) {
+    DropdownMenuItem(
+        onClick = onClick,
+        leadingIcon = { RadioButton(selected = selected, onClick = null) },
+        text = { Text(text = text) },
+    )
+}
+
+@Composable
+private fun DropdownMenuCheck(
+    text: String,
+    checked: Boolean,
+    onClick: () -> Unit,
+    trailing: @Composable (() -> Unit)? = null,
+) {
+    DropdownMenuItem(
+        onClick = onClick,
+        leadingIcon = { Checkbox(checked = checked, onCheckedChange = null) },
+        trailingIcon = trailing,
+        text = { Text(text = text) },
+    )
+}
+
 @PreviewLightDark
 @LargeFontPreview
 @Composable

core/strings/src/main/res/values/strings.xml

@@ -31,11 +31,13 @@
     <string name="fallback_node_name">Meshtastic %s</string>
     <string name="node_filter_placeholder">Filter</string>
     <string name="desc_node_filter_clear">clear node filter</string>
+    <string name="node_filter_title">Filter by</string>
     <string name="node_filter_include_unknown">Include unknown</string>
     <string name="node_filter_only_online">Hide offline nodes</string>
     <string name="node_filter_only_direct">Only show direct nodes</string>
     <string name="node_filter_ignored">You are viewing ignored nodes,\nPress to return to the node list.</string>
     <string name="node_filter_show_details">Show details</string>
+    <string name="node_sort_title">Sort by</string>
     <string name="node_sort_button">Node sorting options</string>
     <string name="node_sort_alpha">A-Z</string>
     <string name="node_sort_channel">Channel</string>