Adjust dropdown menu positioning based on the anchor button height (#832

) * Change dropdown background color * Adjust dropdown menu positioning based on the anchor button height
msasikanth · Feb 25, 2025 · bc8a311 · bc8a311
1 parent dca3227
commit bc8a311
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 7 deletions.
diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/components/DropdownMenu.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/components/DropdownMenu.kt
@@ -43,7 +43,8 @@ internal fun DropdownMenu(
   content: @Composable ColumnScope.() -> Unit
 ) {
   MaterialTheme(
-    colorScheme = MaterialTheme.colorScheme.copy(surface = AppTheme.colorScheme.surfaceContainer),
+    colorScheme =
+      MaterialTheme.colorScheme.copy(surface = AppTheme.colorScheme.surfaceContainerLowest),
     shapes = MaterialTheme.shapes.copy(extraSmall = MaterialTheme.shapes.large)
   ) {
     androidx.compose.material3.DropdownMenu(
@@ -53,7 +54,7 @@ internal fun DropdownMenu(
       modifier =
         modifier
           .background(
-            color = AppTheme.colorScheme.surfaceContainer,
+            color = AppTheme.colorScheme.surfaceContainerLowest,
             shape = MaterialTheme.shapes.large
           )
           .border(

diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/feeds/ui/expanded/SourcesAll.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/feeds/ui/expanded/SourcesAll.kt
@@ -40,6 +40,10 @@ 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.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import app.cash.paging.compose.LazyPagingItems
 import app.cash.paging.compose.itemKey
@@ -216,7 +220,17 @@ internal fun AllFeedsHeader(
     Spacer(Modifier.requiredWidth(12.dp))
 
     Box {
-      TextButton(onClick = { showSortDropdown = true }, shape = MaterialTheme.shapes.large) {
+      val density = LocalDensity.current
+      var buttonHeight by remember { mutableStateOf(Dp.Unspecified) }
+
+      TextButton(
+        modifier =
+          Modifier.onGloballyPositioned { coordinates ->
+            buttonHeight = with(density) { coordinates.size.height.toDp() }
+          },
+        onClick = { showSortDropdown = true },
+        shape = MaterialTheme.shapes.large
+      ) {
         val orderText =
           when (feedsSortOrder) {
             FeedsOrderBy.Latest -> LocalStrings.current.feedsSortLatest
@@ -247,6 +261,7 @@ internal fun AllFeedsHeader(
       DropdownMenu(
         modifier = Modifier.requiredWidth(132.dp),
         expanded = showSortDropdown,
+        offset = DpOffset(0.dp, buttonHeight.unaryMinus()),
         onDismissRequest = { showSortDropdown = false }
       ) {
         FeedsOrderBy.entries

diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostMetadata.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostMetadata.kt
@@ -48,10 +48,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.capitalize
 import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import dev.sasikanth.rss.reader.components.DropdownMenu
@@ -213,8 +216,14 @@ private fun PostOptionsButtonRow(
     var showDropdown by remember { mutableStateOf(false) }
     Box {
       val coroutineScope = rememberCoroutineScope()
+      val density = LocalDensity.current
+      var buttonHeight by remember { mutableStateOf(Dp.Unspecified) }
 
       PostOptionIconButton(
+        modifier =
+          Modifier.onGloballyPositioned { coordinates ->
+            buttonHeight = with(density) { coordinates.size.height.toDp() }
+          },
         icon = Icons.Filled.MoreVert,
         contentDescription = LocalStrings.current.moreMenuOptions,
         onClick = { showDropdown = true }
@@ -224,7 +233,7 @@ private fun PostOptionsButtonRow(
         modifier = Modifier.width(IntrinsicSize.Min),
         expanded = showDropdown,
         onDismissRequest = { showDropdown = false },
-        offset = DpOffset(x = 0.dp, y = (-48).dp),
+        offset = DpOffset(x = 0.dp, y = buttonHeight.unaryMinus()),
       ) {
         if (config.showToggleReadUnreadOption) {
           DropdownMenuItem(

diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/search/ui/SearchScreen.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/search/ui/SearchScreen.kt
@@ -60,10 +60,14 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import app.cash.paging.compose.collectAsLazyPagingItems
 import dev.sasikanth.rss.reader.components.CompactFloatingActionButton
@@ -289,10 +293,16 @@ private fun SearchSortButton(
   onSortOrderChanged: (SearchSortOrder) -> Unit
 ) {
   Box {
+    val density = LocalDensity.current
+    var buttonHeight by remember { mutableStateOf(Dp.Unspecified) }
     var isDropdownExpanded by remember { mutableStateOf(false) }
 
     TextButton(
-      modifier = Modifier.requiredHeight(48.dp),
+      modifier =
+        Modifier.onGloballyPositioned { coordinates ->
+            buttonHeight = with(density) { coordinates.size.height.toDp() }
+          }
+          .requiredHeight(48.dp),
       onClick = { isDropdownExpanded = true },
       shape = RoundedCornerShape(12.dp),
     ) {
@@ -318,6 +328,7 @@ private fun SearchSortButton(
     if (isDropdownExpanded) {
       SortDropdownMenu(
         isDropdownExpanded = isDropdownExpanded,
+        offset = DpOffset(0.dp, buttonHeight.unaryMinus()),
         onDismiss = { isDropdownExpanded = false },
         onSortOrderChanged = {
           onSortOrderChanged(it)
@@ -332,10 +343,12 @@ private fun SearchSortButton(
 private fun SortDropdownMenu(
   isDropdownExpanded: Boolean,
   onDismiss: () -> Unit,
-  onSortOrderChanged: (SearchSortOrder) -> Unit
+  onSortOrderChanged: (SearchSortOrder) -> Unit,
+  offset: DpOffset = DpOffset.Zero,
 ) {
   DropdownMenu(
     expanded = isDropdownExpanded,
+    offset = offset,
     onDismissRequest = onDismiss,
   ) {
     DropdownMenuItem(onClick = { onSortOrderChanged(Newest) }) {

diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/settings/ui/SettingsScreen.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/settings/ui/SettingsScreen.kt
@@ -59,8 +59,11 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import dev.sasikanth.rss.reader.app.AppInfo
 import dev.sasikanth.rss.reader.components.DropdownMenu
@@ -346,7 +349,17 @@ private fun PostsDeletionPeriodSettingItem(
     )
 
     Box {
-      TextButton(onClick = { showDropdown = true }, shape = MaterialTheme.shapes.medium) {
+      val density = LocalDensity.current
+      var buttonHeight by remember { mutableStateOf(Dp.Unspecified) }
+
+      TextButton(
+        modifier =
+          Modifier.onGloballyPositioned { coordinates ->
+            buttonHeight = with(density) { coordinates.size.height.toDp() }
+          },
+        onClick = { showDropdown = true },
+        shape = MaterialTheme.shapes.medium
+      ) {
         val period =
           when (postsDeletionPeriod) {
             ONE_WEEK -> LocalStrings.current.settingsPostsDeletionPeriodOneWeek
@@ -373,6 +386,7 @@ private fun PostsDeletionPeriodSettingItem(
       }
 
       DropdownMenu(
+        offset = DpOffset(0.dp, buttonHeight.unaryMinus()),
         expanded = showDropdown,
         onDismissRequest = { showDropdown = false },
       ) {