From f4da8d5b1ae4e09c446ab013ea8106485cb9c796 Mon Sep 17 00:00:00 2001 From: Noah Bond Date: Tue, 23 May 2023 14:58:28 -0700 Subject: [PATCH] Bug 1828698 - Refactor `DropdownMenu` into a use case Composable --- .../compose/{DropdownMenu.kt => Menu.kt} | 71 +++++++++++++++---- .../fenix/home/collections/Collection.kt | 4 +- .../recentbookmarks/view/RecentBookmarks.kt | 4 +- .../recentsyncedtabs/view/RecentSyncedTab.kt | 4 +- .../fenix/home/recenttabs/view/RecentTabs.kt | 4 +- .../home/recentvisits/view/RecentlyVisited.kt | 6 +- .../mozilla/fenix/tabstray/TabsTrayBanner.kt | 6 +- 7 files changed, 71 insertions(+), 28 deletions(-) rename app/src/main/java/org/mozilla/fenix/compose/{DropdownMenu.kt => Menu.kt} (61%) diff --git a/app/src/main/java/org/mozilla/fenix/compose/DropdownMenu.kt b/app/src/main/java/org/mozilla/fenix/compose/Menu.kt similarity index 61% rename from app/src/main/java/org/mozilla/fenix/compose/DropdownMenu.kt rename to app/src/main/java/org/mozilla/fenix/compose/Menu.kt index b0f28f6897..68acd450be 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/DropdownMenu.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/Menu.kt @@ -5,7 +5,9 @@ package org.mozilla.fenix.compose import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.DropdownMenu import androidx.compose.material.DropdownMenuItem @@ -13,6 +15,10 @@ import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.DisposableEffect +import androidx.compose.runtime.getValue +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 @@ -21,21 +27,24 @@ import androidx.compose.ui.platform.testTag import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp import org.mozilla.fenix.compose.annotation.LightDarkPreview +import org.mozilla.fenix.compose.button.PrimaryButton import org.mozilla.fenix.theme.FirefoxTheme /** - * Popup action dropdown menu. + * Root popup action dropdown menu. * * @param menuItems List of items to be displayed in the menu. * @param showMenu Whether or not the menu is currently displayed to the user. + * @param cornerShape Shape to apply to the corners of the dropdown. * @param onDismissRequest Invoked when user dismisses the menu or on orientation changes. * @param modifier Modifier to be applied to the menu. * @param offset Offset to be added to the position of the menu. */ @Composable -fun DropdownMenu( +private fun Menu( menuItems: List, showMenu: Boolean, + cornerShape: RoundedCornerShape, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, offset: DpOffset = DpOffset.Zero, @@ -44,10 +53,10 @@ fun DropdownMenu( onDispose { onDismissRequest() } } - MaterialTheme(shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(2.dp))) { + MaterialTheme(shapes = MaterialTheme.shapes.copy(medium = cornerShape)) { DropdownMenu( expanded = showMenu && menuItems.isNotEmpty(), - onDismissRequest = { onDismissRequest() }, + onDismissRequest = onDismissRequest, offset = offset, modifier = Modifier .background(color = FirefoxTheme.colors.layer2) @@ -76,6 +85,33 @@ fun DropdownMenu( } } +/** + * Dropdown menu for presenting context-specific actions. + * + * @param menuItems List of items to be displayed in the menu. + * @param showMenu Whether or not the menu is currently displayed to the user. + * @param onDismissRequest Invoked when user dismisses the menu or on orientation changes. + * @param modifier Modifier to be applied to the menu. + * @param offset Offset to be added to the position of the menu. + */ +@Composable +fun ContextualMenu( + menuItems: List, + showMenu: Boolean, + onDismissRequest: () -> Unit, + modifier: Modifier = Modifier, + offset: DpOffset = DpOffset.Zero, +) { + Menu( + menuItems = menuItems, + showMenu = showMenu, + cornerShape = RoundedCornerShape(size = 5.dp), + onDismissRequest = onDismissRequest, + modifier = modifier, + offset = offset, + ) +} + /** * Represents a text item from the dropdown menu. * @@ -93,16 +129,23 @@ data class MenuItem( @LightDarkPreview @Composable -private fun DropdownMenuPreview() { +private fun ContextualMenuPreview() { + var showMenu by remember { mutableStateOf(false) } FirefoxTheme { - DropdownMenu( - listOf( - MenuItem("Rename") {}, - MenuItem("Share") {}, - MenuItem("Remove", FirefoxTheme.colors.textWarning) {}, - ), - true, - {}, - ) + Box(modifier = Modifier.size(400.dp)) { + PrimaryButton(text = "Show menu") { + showMenu = true + } + + ContextualMenu( + menuItems = listOf( + MenuItem("Rename") {}, + MenuItem("Share") {}, + MenuItem("Remove") {}, + ), + showMenu = showMenu, + onDismissRequest = { showMenu = false }, + ) + } } } diff --git a/app/src/main/java/org/mozilla/fenix/home/collections/Collection.kt b/app/src/main/java/org/mozilla/fenix/home/collections/Collection.kt index 955fe76e8f..7fbfca0574 100644 --- a/app/src/main/java/org/mozilla/fenix/home/collections/Collection.kt +++ b/app/src/main/java/org/mozilla/fenix/home/collections/Collection.kt @@ -38,7 +38,7 @@ import mozilla.components.feature.tab.collections.TabCollection import org.mozilla.fenix.R import org.mozilla.fenix.R.drawable import org.mozilla.fenix.R.string -import org.mozilla.fenix.compose.DropdownMenu +import org.mozilla.fenix.compose.ContextualMenu import org.mozilla.fenix.compose.MenuItem import org.mozilla.fenix.compose.list.ExpandableListHeader import org.mozilla.fenix.ext.getIconColor @@ -141,7 +141,7 @@ fun Collection( tint = FirefoxTheme.colors.iconPrimary, ) - DropdownMenu( + ContextualMenu( showMenu = isMenuExpanded, menuItems = menuItems, onDismissRequest = { isMenuExpanded = false }, diff --git a/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt b/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt index 3fd6789463..797ea0977f 100644 --- a/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt +++ b/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt @@ -45,7 +45,7 @@ import mozilla.components.browser.icons.compose.Placeholder import mozilla.components.browser.icons.compose.WithIcon import mozilla.components.ui.colors.PhotonColors import org.mozilla.fenix.components.components -import org.mozilla.fenix.compose.DropdownMenu +import org.mozilla.fenix.compose.ContextualMenu import org.mozilla.fenix.compose.Image import org.mozilla.fenix.compose.MenuItem import org.mozilla.fenix.compose.annotation.LightDarkPreview @@ -150,7 +150,7 @@ private fun RecentBookmarkItem( style = FirefoxTheme.typography.caption, ) - DropdownMenu( + ContextualMenu( showMenu = isMenuExpanded, onDismissRequest = { isMenuExpanded = false }, menuItems = menuItems.map { item -> MenuItem(item.title) { item.onClick(bookmark) } }, diff --git a/app/src/main/java/org/mozilla/fenix/home/recentsyncedtabs/view/RecentSyncedTab.kt b/app/src/main/java/org/mozilla/fenix/home/recentsyncedtabs/view/RecentSyncedTab.kt index ad5b8bba6e..605f5a4572 100644 --- a/app/src/main/java/org/mozilla/fenix/home/recentsyncedtabs/view/RecentSyncedTab.kt +++ b/app/src/main/java/org/mozilla/fenix/home/recentsyncedtabs/view/RecentSyncedTab.kt @@ -42,7 +42,7 @@ import androidx.compose.ui.unit.sp import mozilla.components.concept.sync.DeviceType import mozilla.components.support.ktx.kotlin.trimmed import org.mozilla.fenix.R -import org.mozilla.fenix.compose.DropdownMenu +import org.mozilla.fenix.compose.ContextualMenu import org.mozilla.fenix.compose.Image import org.mozilla.fenix.compose.MenuItem import org.mozilla.fenix.compose.ThumbnailCard @@ -182,7 +182,7 @@ fun RecentSyncedTab( } } - DropdownMenu( + ContextualMenu( showMenu = isDropdownExpanded && tab != null, onDismissRequest = { isDropdownExpanded = false }, menuItems = listOf( diff --git a/app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt b/app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt index 90914217e7..29de1ad323 100644 --- a/app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt +++ b/app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt @@ -53,7 +53,7 @@ import mozilla.components.browser.state.state.TabSessionState import mozilla.components.support.ktx.kotlin.trimmed import mozilla.components.ui.colors.PhotonColors import org.mozilla.fenix.components.components -import org.mozilla.fenix.compose.DropdownMenu +import org.mozilla.fenix.compose.ContextualMenu import org.mozilla.fenix.compose.Image import org.mozilla.fenix.compose.MenuItem import org.mozilla.fenix.compose.ThumbnailCard @@ -191,7 +191,7 @@ private fun RecentTabItem( } } - DropdownMenu( + ContextualMenu( showMenu = isMenuExpanded, onDismissRequest = { isMenuExpanded = false }, menuItems = menuItems.map { item -> MenuItem(item.title) { item.onClick(tab) } }, diff --git a/app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt b/app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt index c358cfcf0d..1da20152a1 100644 --- a/app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt +++ b/app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt @@ -46,8 +46,8 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import mozilla.components.support.ktx.kotlin.trimmed import org.mozilla.fenix.R +import org.mozilla.fenix.compose.ContextualMenu import org.mozilla.fenix.compose.Divider -import org.mozilla.fenix.compose.DropdownMenu import org.mozilla.fenix.compose.EagerFlingBehavior import org.mozilla.fenix.compose.Favicon import org.mozilla.fenix.compose.MenuItem @@ -202,7 +202,7 @@ private fun RecentlyVisitedHistoryGroup( } } - DropdownMenu( + ContextualMenu( showMenu = isMenuExpanded, onDismissRequest = { isMenuExpanded = false }, menuItems = menuItems.map { MenuItem(it.title) { it.onClick(recentVisit) } }, @@ -271,7 +271,7 @@ private fun RecentlyVisitedHistoryHighlight( } } - DropdownMenu( + ContextualMenu( showMenu = isMenuExpanded, onDismissRequest = { isMenuExpanded = false }, menuItems = menuItems.map { item -> MenuItem(item.title) { item.onClick(recentVisit) } }, diff --git a/app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt b/app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt index a3a5c1d3e7..58c7f9d92a 100644 --- a/app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt +++ b/app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt @@ -48,7 +48,7 @@ import mozilla.components.browser.state.state.TabSessionState import mozilla.components.lib.state.ext.observeAsComposableState import mozilla.components.ui.tabcounter.TabCounter import org.mozilla.fenix.R -import org.mozilla.fenix.compose.DropdownMenu +import org.mozilla.fenix.compose.ContextualMenu import org.mozilla.fenix.compose.MenuItem import org.mozilla.fenix.compose.annotation.LightDarkPreview import org.mozilla.fenix.theme.FirefoxTheme @@ -226,7 +226,7 @@ private fun SingleSelectBanner( .align(Alignment.CenterVertically) .testTag(TabsTrayTestTag.threeDotButton), ) { - DropdownMenu( + ContextualMenu( menuItems = generateSingleSelectBannerMenuItems( selectedPage, normalTabCount, @@ -457,7 +457,7 @@ private fun MultiSelectBanner( tint = FirefoxTheme.colors.iconOnColor, ) - DropdownMenu( + ContextualMenu( menuItems = menuItems, showMenu = showMenu, offset = DpOffset(x = 0.dp, y = -ICON_SIZE),