Skip to content
This repository has been archived by the owner on Feb 20, 2023. It is now read-only.

Commit

Permalink
For #21896 - Add SwipeToDismiss gesture to Tabs Tray
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexandru2909 committed Jul 26, 2022
1 parent f9584bc commit 327e59d
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 356 deletions.
167 changes: 96 additions & 71 deletions app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,15 @@ 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.DismissDirection.EndToStart
import androidx.compose.material.DismissDirection.StartToEnd
import androidx.compose.material.Divider
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.Icon
import androidx.compose.material.SwipeToDismiss
import androidx.compose.material.Text
import androidx.compose.material.rememberDismissState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
Expand All @@ -42,6 +48,7 @@ import androidx.compose.ui.text.style.TextDirection
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex
import androidx.core.text.BidiFormatter
import mozilla.components.browser.state.state.TabSessionState
import mozilla.components.browser.state.state.createTab
Expand All @@ -65,7 +72,7 @@ import org.mozilla.fenix.theme.FirefoxTheme
* @param onClick Callback to handle when item is clicked.
* @param onLongClick Callback to handle when item is long clicked.
*/
@OptIn(ExperimentalFoundationApi::class)
@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterialApi::class)
@Composable
@Suppress("MagicNumber", "LongParameterList", "LongMethod")
fun TabGridItem(
Expand All @@ -88,96 +95,114 @@ fun TabGridItem(
Modifier
}

Box(
modifier = Modifier
.wrapContentHeight()
.wrapContentWidth()
val dismissState = rememberDismissState()

if (dismissState.isDismissed(EndToStart) || dismissState.isDismissed(StartToEnd)) {
onCloseClick(tab)
}

SwipeToDismiss(
state = dismissState,
dismissThresholds = { FractionalThreshold(1.0f) },
background = {},
modifier = Modifier.zIndex(
if (dismissState.dismissDirection == null) {
0f
} else {
1f
}
)
) {
Card(
Box(
modifier = Modifier
.fillMaxWidth()
.height(202.dp)
.padding(4.dp)
.then(tabBorderModifier)
.padding(4.dp)
.combinedClickable(
onLongClick = { onLongClick(tab) },
onClick = { onClick(tab) }
),
elevation = 0.dp,
shape = RoundedCornerShape(dimensionResource(id = R.dimen.tab_tray_grid_item_border_radius)),
border = BorderStroke(1.dp, FirefoxTheme.colors.borderPrimary)
.wrapContentHeight()
.wrapContentWidth()
) {
Column(
modifier = Modifier.background(FirefoxTheme.colors.layer2)
Card(
modifier = Modifier
.fillMaxWidth()
.height(202.dp)
.padding(4.dp)
.then(tabBorderModifier)
.padding(4.dp)
.combinedClickable(
onLongClick = { onLongClick(tab) },
onClick = { onClick(tab) }
),
elevation = 0.dp,
shape = RoundedCornerShape(dimensionResource(id = R.dimen.tab_tray_grid_item_border_radius)),
border = BorderStroke(1.dp, FirefoxTheme.colors.borderPrimary)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
Column(
modifier = Modifier.background(FirefoxTheme.colors.layer2)
) {
Favicon(
url = tab.content.url,
size = 16.dp,
modifier = Modifier
.align(Alignment.CenterVertically)
.padding(start = 8.dp)
)

HorizontalFadingEdgeBox(
Row(
modifier = Modifier
.weight(1f)
.fillMaxWidth()
.wrapContentHeight()
.requiredHeight(30.dp)
.padding(7.dp, 5.dp)
.clipToBounds(),
backgroundColor = FirefoxTheme.colors.layer2,
isContentRtl = BidiFormatter.getInstance().isRtl(tab.content.title)
) {
Text(
text = tab.content.title,
fontSize = 14.sp,
maxLines = 1,
softWrap = false,
style = TextStyle(
color = FirefoxTheme.colors.textPrimary,
textDirection = TextDirection.Content
Favicon(
url = tab.content.url,
size = 16.dp,
modifier = Modifier
.align(Alignment.CenterVertically)
.padding(start = 8.dp)
)

HorizontalFadingEdgeBox(
modifier = Modifier
.weight(1f)
.wrapContentHeight()
.requiredHeight(30.dp)
.padding(7.dp, 5.dp)
.clipToBounds(),
backgroundColor = FirefoxTheme.colors.layer2,
isContentRtl = BidiFormatter.getInstance().isRtl(tab.content.title)
) {
Text(
text = tab.content.title,
fontSize = 14.sp,
maxLines = 1,
softWrap = false,
style = TextStyle(
color = FirefoxTheme.colors.textPrimary,
textDirection = TextDirection.Content
)
)
}

Icon(
painter = painterResource(id = R.drawable.mozac_ic_close),
contentDescription = stringResource(id = R.string.close_tab),
tint = FirefoxTheme.colors.iconPrimary,
modifier = Modifier
.clickable { onCloseClick(tab) }
.size(24.dp)
.align(Alignment.CenterVertically)

)
}

Icon(
painter = painterResource(id = R.drawable.mozac_ic_close),
contentDescription = stringResource(id = R.string.close_tab),
tint = FirefoxTheme.colors.iconPrimary,
modifier = Modifier
.clickable { onCloseClick(tab) }
.size(24.dp)
.align(Alignment.CenterVertically)
Divider(
color = FirefoxTheme.colors.borderPrimary,
thickness = 1.dp
)

Thumbnail(
tab = tab,
multiSelectionSelected = multiSelectionSelected,
)
}
}

Divider(
color = FirefoxTheme.colors.borderPrimary,
thickness = 1.dp
)

Thumbnail(
if (!multiSelectionEnabled) {
MediaImage(
tab = tab,
multiSelectionSelected = multiSelectionSelected,
onMediaIconClicked = { onMediaClick(tab) },
modifier = Modifier.align(Alignment.TopStart)
)
}
}

if (!multiSelectionEnabled) {
MediaImage(
tab = tab,
onMediaIconClicked = { onMediaClick(tab) },
modifier = Modifier
.align(Alignment.TopStart)
)
}
}
}

Expand Down
111 changes: 67 additions & 44 deletions app/src/main/java/org/mozilla/fenix/compose/tabstray/TabListItem.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,15 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Card
import androidx.compose.material.DismissDirection.EndToStart
import androidx.compose.material.DismissDirection.StartToEnd
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.SwipeToDismiss
import androidx.compose.material.Text
import androidx.compose.material.rememberDismissState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
Expand All @@ -31,6 +37,7 @@ import androidx.compose.ui.unit.sp
import mozilla.components.browser.state.state.TabSessionState
import mozilla.components.browser.state.state.createTab
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.DismissedTabBackground
import org.mozilla.fenix.compose.ThumbnailCard
import org.mozilla.fenix.ext.toShortUrl
import org.mozilla.fenix.theme.FirefoxTheme
Expand All @@ -51,7 +58,7 @@ import org.mozilla.fenix.theme.Theme
* @param onClick Callback to handle when item is clicked.
* @param onLongClick Callback to handle when item is long clicked.
*/
@OptIn(ExperimentalFoundationApi::class)
@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterialApi::class)
@Composable
@Suppress("MagicNumber")
fun TabListItem(
Expand All @@ -65,62 +72,78 @@ fun TabListItem(
onLongClick: (tab: TabSessionState) -> Unit,
) {

val dismissState = rememberDismissState()

val contentBackgroundColor = if (isSelected) {
FirefoxTheme.colors.layerAccentNonOpaque
} else {
FirefoxTheme.colors.layer1
}
Row(
modifier = Modifier
.fillMaxWidth()
.background(contentBackgroundColor)
.combinedClickable(
onLongClick = { onLongClick(tab) },
onClick = { onClick(tab) }
)
.padding(horizontal = 16.dp, vertical = 8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Thumbnail(
tab = tab,
multiSelectionEnabled = multiSelectionEnabled,
isSelected = multiSelectionSelected,
onMediaIconClicked = { onMediaClick(it) }
)

Column(
if (dismissState.isDismissed(EndToStart) || dismissState.isDismissed(StartToEnd)) {
onCloseClick(tab)
}

SwipeToDismiss(
state = dismissState,
dismissThresholds = { FractionalThreshold(1.0f) },
background = {
DismissedTabBackground(dismissState.dismissDirection)
}
) {
Row(
modifier = Modifier
.padding(horizontal = 16.dp)
.weight(weight = 1f)
.fillMaxWidth()
.background(FirefoxTheme.colors.layer1)
.background(contentBackgroundColor)
.combinedClickable(
onLongClick = { onLongClick(tab) },
onClick = { onClick(tab) }
)
.padding(horizontal = 16.dp, vertical = 8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = tab.content.title,
fontSize = 16.sp,
maxLines = 2,
color = FirefoxTheme.colors.textPrimary,
)

Text(
text = tab.content.url.toShortUrl(),
fontSize = 12.sp,
color = FirefoxTheme.colors.textSecondary,
Thumbnail(
tab = tab,
multiSelectionEnabled = multiSelectionEnabled,
isSelected = multiSelectionSelected,
onMediaIconClicked = { onMediaClick(it) }
)
}

if (!multiSelectionEnabled) {
IconButton(
onClick = { onCloseClick(tab) },
modifier = Modifier.size(size = 24.dp),
Column(
modifier = Modifier
.padding(horizontal = 16.dp)
.weight(weight = 1f)
) {
Icon(
painter = painterResource(id = R.drawable.mozac_ic_close),
contentDescription = stringResource(
id = R.string.close_tab_title,
tab.content.title
),
tint = FirefoxTheme.colors.iconPrimary
Text(
text = tab.content.title,
fontSize = 16.sp,
maxLines = 2,
color = FirefoxTheme.colors.textPrimary,
)

Text(
text = tab.content.url.toShortUrl(),
fontSize = 12.sp,
color = FirefoxTheme.colors.textSecondary,
)
}

if (!multiSelectionEnabled) {
IconButton(
onClick = { onCloseClick(tab) },
modifier = Modifier.size(size = 24.dp),
) {
Icon(
painter = painterResource(id = R.drawable.mozac_ic_close),
contentDescription = stringResource(
id = R.string.close_tab_title,
tab.content.title
),
tint = FirefoxTheme.colors.iconPrimary
)
}
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/java/org/mozilla/fenix/home/collections/CollectionItem.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ fun CollectionItem(
background = {
DismissedTabBackground(
dismissDirection = dismissState.dismissDirection,
shape = if (isLastInCollection) BOTTOM_TAB_SHAPE else MIDDLE_TAB_SHAPE,
shape = if (isLastInCollection) BOTTOM_TAB_SHAPE else MIDDLE_TAB_SHAPE,
)
}
) {
Expand Down
Loading

0 comments on commit 327e59d

Please sign in to comment.