From eb400a524381c4e50f5db7ff0168fd1a6a8c0dcd Mon Sep 17 00:00:00 2001 From: Harrison Oglesby Date: Mon, 31 Oct 2022 12:36:41 -0700 Subject: [PATCH] [fenix] For https://github.com/mozilla-mobile/fenix/issues/27459 - Add divider composable (https://github.com/mozilla-mobile/fenix/pull/27544) --- .../java/org/mozilla/fenix/compose/Divider.kt | 108 ++++++++++++++++++ .../fenix/compose/tabstray/TabGridItem.kt | 7 +- .../home/recentvisits/view/RecentlyVisited.kt | 22 +--- .../fenix/tabstray/syncedtabs/SyncedTabs.kt | 4 +- 4 files changed, 115 insertions(+), 26 deletions(-) create mode 100644 app/src/main/java/org/mozilla/fenix/compose/Divider.kt diff --git a/app/src/main/java/org/mozilla/fenix/compose/Divider.kt b/app/src/main/java/org/mozilla/fenix/compose/Divider.kt new file mode 100644 index 0000000000..67e71db874 --- /dev/null +++ b/app/src/main/java/org/mozilla/fenix/compose/Divider.kt @@ -0,0 +1,108 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +package org.mozilla.fenix.compose + +import android.content.res.Configuration +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import org.mozilla.fenix.theme.FirefoxTheme + +/** + * Generic divider. + * + * @param modifier [Modifier] used to be applied to the layout of the divider. + */ +@Composable +fun Divider( + modifier: Modifier = Modifier, +) { + androidx.compose.material.Divider( + modifier = modifier, + color = FirefoxTheme.colors.borderPrimary, + ) +} + +/** + * An example of a vertical divider. + */ +@Composable +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO) +private fun VerticalDividerPreview() { + FirefoxTheme { + Box( + Modifier + .background(FirefoxTheme.colors.layer1) + .height(75.dp), + ) { + Row { + Text( + text = "Before the line", + modifier = Modifier.padding(end = 10.dp), + ) + + Divider( + modifier = Modifier + .fillMaxHeight() + .width(0.5.dp) + .padding(vertical = 10.dp), + ) + + Text( + text = "After the line", + modifier = Modifier.padding(start = 10.dp), + ) + } + } + } +} + +/** + * An example of divider usage in a list menu. + */ +@Composable +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO) +private fun HorizontalDividerPreview() { + FirefoxTheme { + Box( + Modifier + .background(FirefoxTheme.colors.layer1) + .width(100.dp) + .height(175.dp), + ) { + Column(Modifier.padding(start = 4.dp)) { + Text(text = "New") + + Text(text = "Open") + + Text(text = "Open Recent") + + Divider(modifier = Modifier.padding(vertical = 10.dp, horizontal = 24.dp)) + + Text(text = "Close") + + Text(text = "Save") + + Text(text = "Save as") + + Text(text = "Rename") + + Divider(modifier = Modifier.padding(vertical = 10.dp, horizontal = 24.dp)) + } + } + } +} diff --git a/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt b/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt index 0137dbba4a..c5981a9859 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt @@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Card -import androidx.compose.material.Divider import androidx.compose.material.Icon import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -46,6 +45,7 @@ import androidx.core.text.BidiFormatter import mozilla.components.browser.state.state.TabSessionState import mozilla.components.browser.state.state.createTab import org.mozilla.fenix.R +import org.mozilla.fenix.compose.Divider import org.mozilla.fenix.compose.Favicon import org.mozilla.fenix.compose.HorizontalFadingEdgeBox import org.mozilla.fenix.compose.ThumbnailCard @@ -159,10 +159,7 @@ fun TabGridItem( ) } - Divider( - color = FirefoxTheme.colors.borderPrimary, - thickness = 1.dp, - ) + Divider() Thumbnail( tab = 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 954c2cb1b2..c20f30649a 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 @@ -27,7 +27,6 @@ import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Card -import androidx.compose.material.Divider import androidx.compose.material.DropdownMenu import androidx.compose.material.DropdownMenuItem import androidx.compose.material.Text @@ -49,6 +48,7 @@ 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.Divider import org.mozilla.fenix.compose.EagerFlingBehavior import org.mozilla.fenix.compose.Favicon import org.mozilla.fenix.home.recentvisits.RecentlyVisitedItem @@ -188,7 +188,7 @@ private fun RecentlyVisitedHistoryGroup( ) if (showDividerLine) { - RecentlyVisitedDivider() + Divider() } } @@ -248,7 +248,7 @@ private fun RecentlyVisitedHistoryHighlight( ) if (showDividerLine) { - RecentlyVisitedDivider(modifier = Modifier.align(Alignment.BottomCenter)) + Divider(modifier = Modifier.align(Alignment.BottomCenter)) } } @@ -359,22 +359,6 @@ private fun RecentlyVisitedMenu( } } -/** - * A recent item divider. - * - * @param modifier [Modifier] allowing to perfectly place this. - */ -@Composable -private fun RecentlyVisitedDivider( - modifier: Modifier = Modifier, -) { - Divider( - modifier = modifier, - color = FirefoxTheme.colors.borderPrimary, - thickness = 0.5.dp, - ) -} - /** * Get the indexes in list of all items which have more than half showing. */ diff --git a/app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabs.kt b/app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabs.kt index 49ed93fffc..8ad5ee0c42 100644 --- a/app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabs.kt +++ b/app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabs.kt @@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState -import androidx.compose.material.Divider import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember @@ -35,6 +34,7 @@ import androidx.compose.ui.unit.sp import mozilla.components.browser.storage.sync.TabEntry import mozilla.components.feature.syncedtabs.view.SyncedTabsView import org.mozilla.fenix.R +import org.mozilla.fenix.compose.Divider import org.mozilla.fenix.compose.button.PrimaryButton import org.mozilla.fenix.compose.ext.dashedBorder import org.mozilla.fenix.compose.list.ExpandableListHeader @@ -170,7 +170,7 @@ fun SyncedTabsSectionHeader( onClick = onClick, ) - Divider(color = FirefoxTheme.colors.borderPrimary) + Divider() } }