refactor: appearance improvement of DropDownMenu

LeanderBB · Dec 17, 2024 · ac7cbca · ac7cbca
1 parent 7b32ee8
commit ac7cbca
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 54 deletions.
diff --git a/you-have-mail-android/app/src/main/java/dev/lbeernaert/youhavemail/screens/Settings.kt b/you-have-mail-android/app/src/main/java/dev/lbeernaert/youhavemail/screens/Settings.kt
@@ -1,39 +1,36 @@
 package dev.lbeernaert.youhavemail.screens
 
-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.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.Divider
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.ExposedDropdownMenuBox
 import androidx.compose.material.ExposedDropdownMenuDefaults
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
-import androidx.compose.material.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 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.graphics.Color
-import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.toSize
 import dev.lbeernaert.youhavemail.R
 import dev.lbeernaert.youhavemail.app.State
 import dev.lbeernaert.youhavemail.components.ActionButton
@@ -65,6 +62,8 @@ fun Settings(
                 listOf(30UL, 60UL, 120UL, 180UL, 300UL, 600UL, 900UL, 1200UL, 1800UL, 3600UL)
             var expanded by remember { mutableStateOf(false) }
             var selectedIndex by remember { mutableIntStateOf(0) }
+            // textFieldWidth is used to assign to DropDownMenu the same width as TextField
+            var textFieldWidth by remember { mutableStateOf(Size.Zero)}
 
             val onPollIntervalModified: () -> Unit = {
                 runTask(updatingPollIntervalLabel) {
@@ -83,24 +82,59 @@ fun Settings(
                 text = stringResource(id = R.string.poll_interval_desc),
                 style = MaterialTheme.typography.subtitle1
             )
+
             Spacer(modifier = Modifier.padding(5.dp))
-            TextField(
+
+            ExposedDropdownMenuBox(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .clickable { expanded = !expanded },
-                value = secondsToText(pollIntervalValue),
-                textStyle = TextStyle(color = Color.Black),
-                readOnly = true,
-                enabled = false,
-                singleLine = true,
-                onValueChange = {},
-                trailingIcon = {
-                    ExposedDropdownMenuDefaults.TrailingIcon(
-                        expanded = expanded,
-                        onIconClick = { expanded = !expanded })
-                },
-                colors = TextFieldDefaults.textFieldColors(backgroundColor = colorResource(id = R.color.gray_dropdownmenu)),
-            )
+                    .fillMaxWidth(),
+                expanded = expanded,
+                onExpandedChange = {
+                    expanded = !expanded
+                }
+            ) {
+                TextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .clickable { expanded = !expanded }
+                        .onGloballyPositioned { coordinates ->
+                            textFieldWidth = coordinates.size.toSize()
+                        },
+                    readOnly = true,
+                    enabled = true,
+                    value = secondsToText(pollIntervalValue),
+                    onValueChange = { },
+                    trailingIcon = {
+                        ExposedDropdownMenuDefaults.TrailingIcon(
+                            expanded = expanded,
+                            onIconClick = { expanded = true }
+                        )
+                    },
+                    colors = ExposedDropdownMenuDefaults.textFieldColors()
+                )
+                DropdownMenu(
+                    modifier = Modifier
+                        .width(with(LocalDensity.current) { textFieldWidth.width.toDp() }),
+                    expanded = expanded,
+                    onDismissRequest = {
+                        expanded = false
+                    },
+                ) {
+                    timeIntervals.forEachIndexed { index, seconds ->
+                        DropdownMenuItem(
+                            modifier = Modifier
+                                .fillMaxWidth(),
+                            onClick = {
+                                expanded = false
+                                selectedIndex = index
+                                onPollIntervalModified()
+                            },
+                            ) {
+                            Text(text = secondsToText(seconds))
+                        }
+                    }
+                }
+            }
 
             Spacer(modifier = Modifier.padding(5.dp))
 
@@ -114,34 +148,6 @@ fun Settings(
             )
 
             Spacer(modifier = Modifier.padding(5.dp))
-
-            Box(
-                modifier = Modifier
-                    .padding(20.dp)
-                    .fillMaxSize()
-                    .wrapContentSize(Alignment.TopStart)
-            ) {
-                DropdownMenu(
-                    expanded = expanded,
-                    onDismissRequest = { expanded = false },
-                    modifier = Modifier
-                        .background(colorResource(id = R.color.gray_dropdownmenu))
-                        .wrapContentWidth()
-                ) {
-                    timeIntervals.forEachIndexed { index, seconds ->
-                        DropdownMenuItem(onClick = {
-                            expanded = false
-                            selectedIndex = index
-                            onPollIntervalModified()
-                        }) {
-                            Text(
-                                text = secondsToText(seconds),
-                                color = Color.Black
-                            )
-                        }
-                    }
-                }
-            }
         }
     }
 }

diff --git a/you-have-mail-android/app/src/main/res/values/colors.xml b/you-have-mail-android/app/src/main/res/values/colors.xml
@@ -7,5 +7,4 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
-    <color name="gray_dropdownmenu">#FFDDDDDD</color>
 </resources>