From 3c0fd035550cee49471041ffbb0f3f044c1c2411 Mon Sep 17 00:00:00 2001 From: andrekir Date: Fri, 27 Sep 2024 18:08:20 -0300 Subject: [PATCH] refactor: base preference with horizontal layout and summary --- .../mesh/ui/components/DropDownPreference.kt | 5 +- .../mesh/ui/components/RegularPreference.kt | 68 +++++++++++++------ .../mesh/ui/components/SwitchPreference.kt | 2 +- 3 files changed, 52 insertions(+), 23 deletions(-) diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/DropDownPreference.kt b/app/src/main/java/com/geeksville/mesh/ui/components/DropDownPreference.kt index 728927d14..76f7bef17 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/components/DropDownPreference.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/components/DropDownPreference.kt @@ -27,6 +27,7 @@ fun DropDownPreference( selectedItem: T, onItemSelected: (T) -> Unit, modifier: Modifier = Modifier, + summary: String? = null, ) { var dropDownExpanded by remember { mutableStateOf(value = false) } @@ -39,7 +40,8 @@ fun DropDownPreference( enabled = enabled, trailingIcon = if (dropDownExpanded) Icons.TwoTone.KeyboardArrowUp else Icons.TwoTone.KeyboardArrowDown, - ) + summary = summary, + ) Box { DropdownMenu( @@ -76,6 +78,7 @@ fun DropDownPreference( private fun DropDownPreferencePreview() { DropDownPreference( title = "Settings", + summary = "Lorem ipsum dolor sit amet", enabled = true, items = listOf("TEST1" to "text1", "TEST2" to "text2"), selectedItem = "TEST2", diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/RegularPreference.kt b/app/src/main/java/com/geeksville/mesh/ui/components/RegularPreference.kt index 78a600575..123691bc6 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/components/RegularPreference.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/components/RegularPreference.kt @@ -1,12 +1,14 @@ package com.geeksville.mesh.ui.components import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.material.ContentAlpha +import androidx.compose.material.Divider import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme import androidx.compose.material.Text @@ -26,6 +28,7 @@ fun RegularPreference( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, + summary: String? = null, trailingIcon: ImageVector? = null, ) { RegularPreference( @@ -34,6 +37,7 @@ fun RegularPreference( onClick = onClick, modifier = modifier, enabled = enabled, + summary = summary, trailingIcon = trailingIcon, ) } @@ -45,41 +49,63 @@ fun RegularPreference( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, + summary: String? = null, trailingIcon: ImageVector? = null, ) { - Row( + Column( modifier = modifier .fillMaxWidth() - .clickable( - enabled = enabled, - onClick = onClick, - ) + .clickable(enabled = enabled, onClick = onClick) .padding(all = 16.dp), - verticalAlignment = Alignment.CenterVertically ) { - Column { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { Text( text = title, - style = MaterialTheme.typography.body2, - color = if (!enabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) else MaterialTheme.colors.onSurface.copy( - alpha = ContentAlpha.medium - ), + modifier = Modifier.weight(1f), + style = MaterialTheme.typography.body1, + color = if (enabled) { + Color.Unspecified + } else { + MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) + }, ) Text( text = subtitle, style = MaterialTheme.typography.body1, - color = if (!enabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) else Color.Unspecified, + color = if (enabled) { + MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium) + } else { + MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) + }, + ) + if (trailingIcon != null) Icon( + trailingIcon, "trailingIcon", + modifier = modifier + .padding(start = 8.dp) + .wrapContentWidth(Alignment.End), + tint = if (enabled) { + MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium) + } else { + MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) + }, + ) + } + if (summary != null) { + Divider(modifier = Modifier.padding(vertical = 8.dp)) + Text( + text = summary, + style = MaterialTheme.typography.body2, + color = if (enabled) { + MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium) + } else { + MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) + }, ) } - if (trailingIcon != null) Icon( - trailingIcon, "trailingIcon", - modifier = modifier - .fillMaxWidth() - .wrapContentWidth(Alignment.End), - tint = if (!enabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) - else MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium), - ) } } @@ -88,7 +114,7 @@ fun RegularPreference( private fun RegularPreferencePreview() { RegularPreference( title = "Advanced settings", - subtitle = AnnotatedString(text = "Lorem ipsum dolor sit amet"), + subtitle = "Text2", onClick = { }, ) } \ No newline at end of file diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/SwitchPreference.kt b/app/src/main/java/com/geeksville/mesh/ui/components/SwitchPreference.kt index 33724d065..007c5987c 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/components/SwitchPreference.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/components/SwitchPreference.kt @@ -38,7 +38,7 @@ fun SwitchPreference( ) { Text( text = title, - style = MaterialTheme.typography.body2, + style = MaterialTheme.typography.body1, color = if (!enabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) else Color.Unspecified, ) Switch(