Align syle of admin settings (#2969)

2025-09-04 22:53:44 -04:00 · 2025-09-04 22:53:44 -04:00 · 161c38f8ee
commit 161c38f8ee
--- a/app/src/main/java/com/geeksville/mesh/navigation/NavGraph.kt
+++ b/app/src/main/java/com/geeksville/mesh/navigation/NavGraph.kt
@ -18,8 +18,14 @@
 package com.geeksville.mesh.navigation

 import androidx.annotation.StringRes
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.PowerSettingsNew
+import androidx.compose.material.icons.rounded.RestartAlt
+import androidx.compose.material.icons.rounded.Restore
+import androidx.compose.material.icons.rounded.Storage
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavDestination
 import androidx.navigation.NavDestination.Companion.hasRoute
@ -33,11 +39,11 @@ import com.geeksville.mesh.ui.TopLevelDestination.Companion.isTopLevel
 import com.geeksville.mesh.ui.map.MapViewModel
 import kotlinx.serialization.Serializable

-enum class AdminRoute(@StringRes val title: Int) {
-    REBOOT(R.string.reboot),
-    SHUTDOWN(R.string.shutdown),
-    FACTORY_RESET(R.string.factory_reset),
-    NODEDB_RESET(R.string.nodedb_reset),
+enum class AdminRoute(val icon: ImageVector, @StringRes val title: Int) {
+    REBOOT(Icons.Rounded.RestartAlt, R.string.reboot),
+    SHUTDOWN(Icons.Rounded.PowerSettingsNew, R.string.shutdown),
+    FACTORY_RESET(Icons.Rounded.Restore, R.string.factory_reset),
+    NODEDB_RESET(Icons.Rounded.Storage, R.string.nodedb_reset),
 }

 const val DEEP_LINK_BASE_URI = "meshtastic://meshtastic"
--- a/app/src/main/java/com/geeksville/mesh/ui/settings/components/SettingsItem.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/settings/components/SettingsItem.kt
@ -44,6 +44,7 @@ import com.geeksville.mesh.ui.common.theme.AppTheme
@Composable
 fun SettingsItem(
    text: String,
+    textColor: Color = LocalContentColor.current,
    enabled: Boolean = true,
    leadingIcon: ImageVector? = null,
    leadingIconTint: Color = LocalContentColor.current,
@ -53,6 +54,7 @@ fun SettingsItem(
 ) {
    SettingsItem(
        text = text,
+        textColor = textColor,
        enabled = enabled,
        leadingIcon = leadingIcon,
        leadingIconTint = leadingIconTint,
@ -65,6 +67,7 @@ fun SettingsItem(
@Composable
 fun SettingsItem(
    text: String,
+    textColor: Color = LocalContentColor.current,
    enabled: Boolean = true,
    leadingIcon: ImageVector? = null,
    leadingIconTint: Color = LocalContentColor.current,
@ -72,7 +75,12 @@ fun SettingsItem(
    onClick: () -> Unit,
 ) {
    ClickableWrapper(enabled = enabled, onClick = onClick) {
-        Content(leading = { leadingIcon.Icon(leadingIconTint) }, text = text, trailing = trailingContent)
+        Content(
+            leading = { leadingIcon.Icon(leadingIconTint) },
+            text = text,
+            textColor = textColor,
+            trailing = trailingContent,
+        )
    }
 }

@ -81,6 +89,7 @@ fun SettingsItem(
 fun SettingsItemSwitch(
    checked: Boolean,
    text: String,
+    textColor: Color = LocalContentColor.current,
    enabled: Boolean = true,
    leadingIcon: ImageVector? = null,
    leadingIconTint: Color = LocalContentColor.current,
@ -90,6 +99,7 @@ fun SettingsItemSwitch(
        Content(
            leading = { leadingIcon.Icon(leadingIconTint) },
            text = text,
+            textColor = textColor,
            trailing = { Switch(checked = checked, enabled = enabled, onCheckedChange = null) },
        )
    }
@ -99,6 +109,7 @@ fun SettingsItemSwitch(
@Composable
 fun SettingsItemDetail(
    text: String,
+    textColor: Color = LocalContentColor.current,
    icon: ImageVector? = null,
    iconTint: Color = LocalContentColor.current,
    trailingText: String? = null,
@ -106,7 +117,12 @@ fun SettingsItemDetail(
    onClick: (() -> Unit)? = null,
 ) {
    val content: @Composable ColumnScope.() -> Unit = {
-        Content(leading = { icon.Icon(iconTint) }, text = text, trailing = { trailingText?.let { Text(text = it) } })
+        Content(
+            leading = { icon.Icon(iconTint) },
+            text = text,
+            textColor = textColor,
+            trailing = { trailingText?.let { Text(text = it) } },
+        )
    }

    if (onClick != null) {
@ -130,11 +146,11 @@ private fun ClickableWrapper(enabled: Boolean, onClick: () -> Unit, content: @Co

 /** The row content to display for a settings item. */
@Composable
-private fun Content(leading: @Composable () -> Unit, text: String, trailing: @Composable () -> Unit) {
+private fun Content(leading: @Composable () -> Unit, text: String, textColor: Color, trailing: @Composable () -> Unit) {
    ListItem(
        modifier = Modifier.padding(horizontal = 8.dp),
        colors = ListItemDefaults.colors(containerColor = Color.Transparent),
-        headlineContent = { Text(text) },
+        headlineContent = { Text(text = text, color = textColor) },
        leadingContent = { leading() },
        trailingContent = { trailing() },
    )
--- a/app/src/main/java/com/geeksville/mesh/ui/settings/radio/RadioConfig.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/settings/radio/RadioConfig.kt
@ -18,27 +18,16 @@
 package com.geeksville.mesh.ui.settings.radio

 import android.widget.Toast
-import androidx.annotation.StringRes
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Download
 import androidx.compose.material.icons.filled.Upload
 import androidx.compose.material.icons.rounded.BugReport
-import androidx.compose.material.icons.twotone.Warning
-import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
-import androidx.compose.material3.Icon
+import androidx.compose.material.icons.rounded.CleaningServices
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@ -46,7 +35,6 @@ import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
@ -64,64 +52,11 @@ import com.geeksville.mesh.ui.common.components.TitledCard
 import com.geeksville.mesh.ui.common.theme.AppTheme
 import com.geeksville.mesh.ui.common.theme.StatusColors.StatusRed
 import com.geeksville.mesh.ui.settings.components.SettingsItem
+import com.geeksville.mesh.ui.settings.radio.components.WarningDialog
 import kotlinx.coroutines.delay
 import kotlin.time.Duration.Companion.seconds

-@Suppress("LongMethod")
-@Composable
-private fun NavButton(@StringRes title: Int, enabled: Boolean, onClick: () -> Unit) {
-    var showDialog by remember { mutableStateOf(false) }
-    if (showDialog) {
-        AlertDialog(
-            onDismissRequest = {},
-            shape = RoundedCornerShape(16.dp),
-            title = {
-                Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
-                    Icon(
-                        imageVector = Icons.TwoTone.Warning,
-                        contentDescription = stringResource(id = R.string.warning),
-                        modifier = Modifier.padding(end = 8.dp),
-                    )
-                    Text(text = "${stringResource(title)}?\n")
-                    Icon(
-                        imageVector = Icons.TwoTone.Warning,
-                        contentDescription = stringResource(id = R.string.warning),
-                        modifier = Modifier.padding(start = 8.dp),
-                    )
-                }
-            },
-            confirmButton = {
-                Row(
-                    modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
-                    horizontalArrangement = Arrangement.spacedBy(8.dp),
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    TextButton(modifier = Modifier.weight(1f), onClick = { showDialog = false }) {
-                        Text(stringResource(R.string.cancel))
-                    }
-                    Button(
-                        modifier = Modifier.weight(1f),
-                        onClick = {
-                            showDialog = false
-                            onClick()
-                        },
-                    ) {
-                        Text(stringResource(R.string.send))
-                    }
-                }
-            },
-        )
-    }
-
-    Column {
-        Spacer(modifier = Modifier.height(4.dp))
-        Button(modifier = Modifier.fillMaxWidth().height(48.dp), enabled = enabled, onClick = { showDialog = true }) {
-            Text(text = stringResource(title))
-        }
-    }
-}
-
-@Suppress("LongMethod")
+@Suppress("LongMethod", "CyclomaticComplexMethod")
@Composable
 fun RadioConfigItemList(
    state: RadioConfigState,
@ -190,8 +125,26 @@ fun RadioConfigItemList(
        }
    }

-    Column(modifier = Modifier.padding(top = 16.dp)) {
-        AdminRoute.entries.forEach { NavButton(it.title, enabled) { onRouteClick(it) } }
+    TitledCard(title = stringResource(R.string.administration), modifier = Modifier.padding(top = 16.dp)) {
+        AdminRoute.entries.forEach { route ->
+            var showDialog by remember { mutableStateOf(false) }
+            if (showDialog) {
+                WarningDialog(
+                    title = "${stringResource(route.title)}?",
+                    onDismiss = { showDialog = false },
+                    onConfirm = { onRouteClick(route) },
+                )
+            }
+
+            SettingsItem(
+                enabled = enabled,
+                text = stringResource(route.title),
+                leadingIcon = route.icon,
+                trailingIcon = null,
+            ) {
+                showDialog = true
+            }
+        }
    }

    TitledCard(title = stringResource(R.string.advanced_title), modifier = Modifier.padding(top = 16.dp)) {
@ -201,6 +154,7 @@ fun RadioConfigItemList(

        SettingsItem(
            text = stringResource(R.string.clean_node_database_title),
+            leadingIcon = Icons.Rounded.CleaningServices,
            enabled = enabled,
            onClick = { onNavigate(SettingsRoutes.CleanNodeDb) },
        )
--- a/app/src/main/java/com/geeksville/mesh/ui/settings/radio/components/WarningDialog.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/settings/radio/components/WarningDialog.kt
@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2025 Meshtastic LLC
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.geeksville.mesh.ui.settings.radio.components
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Warning
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.geeksville.mesh.R
+import com.geeksville.mesh.ui.common.theme.AppTheme
+
+@Composable
+fun WarningDialog(
+    icon: ImageVector? = Icons.Rounded.Warning,
+    title: String,
+    onDismiss: () -> Unit,
+    onConfirm: () -> Unit,
+) {
+    AlertDialog(
+        onDismissRequest = {},
+        icon = { icon?.let { Icon(imageVector = it, contentDescription = null) } },
+        title = { Text(text = title) },
+        dismissButton = { TextButton(onClick = { onDismiss() }) { Text(stringResource(R.string.cancel)) } },
+        confirmButton = {
+            Button(
+                onClick = {
+                    onDismiss()
+                    onConfirm()
+                },
+            ) {
+                Text(stringResource(R.string.send))
+            }
+        },
+    )
+}
+
+@Preview
+@Composable
+private fun WarningDialogPreview() {
+    AppTheme { WarningDialog(title = "Factory Reset?", onDismiss = {}, onConfirm = {}) }
+}