Add custom dropdown menu composable

msasikanth · Oct 5, 2023 · 3626cf5 · 3626cf5
1 parent f0ee6a6
commit 3626cf5
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 18 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
@@ -0,0 +1,94 @@
+/*
+ * Copyright 2023 Sasikanth Miriyampalli
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package dev.sasikanth.rss.reader.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.dp
+import dev.sasikanth.rss.reader.ui.AppTheme
+
+@Composable
+internal fun DropdownMenu(
+  expanded: Boolean,
+  onDismissRequest: () -> Unit,
+  modifier: Modifier = Modifier,
+  offset: DpOffset = DpOffset.Zero,
+  content: @Composable ColumnScope.() -> Unit
+) {
+  MaterialTheme(
+    colorScheme = MaterialTheme.colorScheme.copy(surface = AppTheme.colorScheme.surfaceContainer),
+    shapes = MaterialTheme.shapes.copy(extraSmall = MaterialTheme.shapes.large)
+  ) {
+    androidx.compose.material3.DropdownMenu(
+      expanded = expanded,
+      onDismissRequest = onDismissRequest,
+      offset = offset,
+      modifier =
+        modifier
+          .background(
+            color = AppTheme.colorScheme.surfaceContainer,
+            shape = MaterialTheme.shapes.large
+          )
+          .border(
+            width = 1.dp,
+            color = AppTheme.colorScheme.outlineVariant,
+            shape = MaterialTheme.shapes.large
+          ),
+      content = content
+    )
+  }
+}
+
+@Composable
+internal fun DropdownMenuItem(
+  onClick: () -> Unit,
+  modifier: Modifier = Modifier,
+  leadingIcon: (@Composable () -> Unit)? = null,
+  text: @Composable () -> Unit,
+) {
+  Row(
+    modifier =
+      modifier
+        .clickable(onClick = onClick)
+        .padding(vertical = 12.dp)
+        .padding(start = 16.dp, end = 20.dp)
+        .fillMaxWidth()
+  ) {
+    CompositionLocalProvider(LocalContentColor provides AppTheme.colorScheme.onSurface) {
+      if (leadingIcon != null) {
+        leadingIcon()
+        Spacer(Modifier.width(12.dp))
+      } else {
+        Spacer(Modifier.width(4.dp))
+      }
+      text()
+    }
+  }
+}
diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/HomeTopAppBar.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/HomeTopAppBar.kt
@@ -33,8 +33,6 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.MoreVert
 import androidx.compose.material.icons.rounded.Search
 import androidx.compose.material.icons.rounded.Settings
-import androidx.compose.material3.DropdownMenu
-import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -49,6 +47,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import dev.sasikanth.rss.reader.components.DropdownMenu
+import dev.sasikanth.rss.reader.components.DropdownMenuItem
 import dev.sasikanth.rss.reader.resources.icons.Bookmarks
 import dev.sasikanth.rss.reader.resources.icons.RSS
 import dev.sasikanth.rss.reader.resources.icons.TwineIcons
@@ -143,17 +143,11 @@ private fun OverflowMenu(onSettingsClicked: () -> Unit) {
     if (dropdownExpanded) {
       DropdownMenu(expanded = dropdownExpanded, onDismissRequest = { dropdownExpanded = false }) {
         DropdownMenuItem(
-          text = {
-            Text(
-              text = LocalStrings.current.settings,
-              color = AppTheme.colorScheme.textEmphasisHigh
-            )
-          },
+          text = { Text(text = LocalStrings.current.settings) },
           leadingIcon = {
             Icon(
               imageVector = Icons.Rounded.Settings,
-              contentDescription = LocalStrings.current.settings,
-              tint = AppTheme.colorScheme.textEmphasisHigh
+              contentDescription = LocalStrings.current.settings
             )
           },
           onClick = {

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
@@ -34,13 +34,11 @@ import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.DropdownMenuItem
 import androidx.compose.material.TextButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.ArrowBack
 import androidx.compose.material.icons.rounded.Close
 import androidx.compose.material3.Divider
-import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -70,6 +68,8 @@ import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import app.cash.paging.compose.collectAsLazyPagingItems
+import dev.sasikanth.rss.reader.components.DropdownMenu
+import dev.sasikanth.rss.reader.components.DropdownMenuItem
 import dev.sasikanth.rss.reader.components.ScrollToTopButton
 import dev.sasikanth.rss.reader.home.ui.PostListItem
 import dev.sasikanth.rss.reader.resources.icons.Sort
@@ -315,21 +315,18 @@ private fun SortDropdownMenu(
   DropdownMenu(
     expanded = isDropdownExpanded,
     onDismissRequest = onDismiss,
-    offset = DpOffset(0.dp, (-48).dp),
-    modifier = Modifier.background(color = AppTheme.colorScheme.surfaceContainerHigh)
+    offset = DpOffset(0.dp, (-48).dp)
   ) {
     DropdownMenuItem(onClick = { onSortOrderChanged(Newest) }) {
       Text(
         text = LocalStrings.current.searchSortNewestFirst,
-        style = MaterialTheme.typography.bodyLarge,
-        color = AppTheme.colorScheme.onSurface
+        style = MaterialTheme.typography.bodyLarge
       )
     }
     DropdownMenuItem(onClick = { onSortOrderChanged(Oldest) }) {
       Text(
         text = LocalStrings.current.searchSortOldestFirst,
-        style = MaterialTheme.typography.bodyLarge,
-        color = AppTheme.colorScheme.onSurface
+        style = MaterialTheme.typography.bodyLarge
       )
     }
   }