From 53cc9846d8a5af3add68634fb9484ff164112d44 Mon Sep 17 00:00:00 2001 From: Alexandru2909 Date: Thu, 22 Jun 2023 20:40:29 +0300 Subject: [PATCH] Bug 1838140 - Update composed tabs tray media button ripple effect to match the xml version --- .../fenix/compose/tabstray/MediaImage.kt | 8 +++++++- .../fenix/compose/tabstray/TabGridItem.kt | 16 ++++++++++++++++ .../fenix/compose/tabstray/TabListItem.kt | 18 ++++++++++++++++++ 3 files changed, 41 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/org/mozilla/fenix/compose/tabstray/MediaImage.kt b/app/src/main/java/org/mozilla/fenix/compose/tabstray/MediaImage.kt index 7ce0d3844..e6c37dcb1 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/tabstray/MediaImage.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/tabstray/MediaImage.kt @@ -7,6 +7,7 @@ package org.mozilla.fenix.compose.tabstray import androidx.appcompat.content.res.AppCompatResources import androidx.compose.foundation.Image import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable @@ -28,12 +29,14 @@ import org.mozilla.fenix.theme.FirefoxTheme * @param tab [TabSessionState] which the image should be shown. * @param onMediaIconClicked handles the click event when tab has media session like play/pause. * @param modifier [Modifier] to be applied to the layout. + * @param interactionSource [MutableInteractionSource] used to propagate the ripple effect on click. */ @Composable fun MediaImage( tab: TabSessionState, onMediaIconClicked: ((TabSessionState) -> Unit), modifier: Modifier, + interactionSource: MutableInteractionSource = MutableInteractionSource(), ) { val (icon, contentDescription) = when (tab.mediaSessionState?.playbackState) { PlaybackState.PAUSED -> { @@ -49,7 +52,10 @@ fun MediaImage( Image( painter = rememberDrawablePainter(drawable = drawable), contentDescription = stringResource(contentDescription), - modifier = modifier.clickable { onMediaIconClicked(tab) }, + modifier = modifier.clickable( + interactionSource = interactionSource, + indication = null, + ) { onMediaIconClicked(tab) }, ) } 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 8599606f6..0ede9ca9a 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 @@ -11,6 +11,8 @@ import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.combinedClickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -32,7 +34,9 @@ import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.Icon import androidx.compose.material.Text import androidx.compose.material.rememberDismissState +import androidx.compose.material.ripple.rememberRipple import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clipToBounds @@ -54,6 +58,7 @@ import androidx.core.text.BidiFormatter import mozilla.components.browser.state.state.TabSessionState import mozilla.components.browser.state.state.createTab import mozilla.components.support.ktx.kotlin.MAX_URI_LENGTH +import mozilla.components.ui.colors.PhotonColors import org.mozilla.fenix.R import org.mozilla.fenix.compose.Divider import org.mozilla.fenix.compose.HorizontalFadingEdgeBox @@ -113,6 +118,9 @@ fun TabGridItem( }, ) + // Used to propagate the ripple effect to the whole tab + val interactionSource = remember { MutableInteractionSource() } + SwipeToDismiss( state = dismissState, enabled = !multiSelectionEnabled, @@ -134,6 +142,13 @@ fun TabGridItem( .then(tabBorderModifier) .padding(4.dp) .combinedClickable( + interactionSource = interactionSource, + indication = rememberRipple( + color = when (isSystemInDarkTheme()) { + true -> PhotonColors.White + false -> PhotonColors.Black + }, + ), onLongClick = { onLongClick(tab) }, onClick = { onClick(tab) }, ), @@ -213,6 +228,7 @@ fun TabGridItem( onMediaIconClicked = { onMediaClick(tab) }, modifier = Modifier .align(Alignment.TopStart), + interactionSource = interactionSource, ) } } diff --git a/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabListItem.kt b/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabListItem.kt index 5770f2a55..7340e74fd 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabListItem.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabListItem.kt @@ -7,6 +7,8 @@ package org.mozilla.fenix.compose.tabstray import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background import androidx.compose.foundation.combinedClickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -23,7 +25,9 @@ import androidx.compose.material.Icon import androidx.compose.material.IconButton import androidx.compose.material.Text import androidx.compose.material.rememberDismissState +import androidx.compose.material.ripple.rememberRipple import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip @@ -39,6 +43,7 @@ import androidx.compose.ui.unit.sp import mozilla.components.browser.state.state.TabSessionState import mozilla.components.browser.state.state.createTab import mozilla.components.support.ktx.kotlin.MAX_URI_LENGTH +import mozilla.components.ui.colors.PhotonColors import org.mozilla.fenix.R import org.mozilla.fenix.compose.SwipeToDismiss import org.mozilla.fenix.compose.TabThumbnail @@ -93,6 +98,9 @@ fun TabListItem( }, ) + // Used to propagate the ripple effect to the whole tab + val interactionSource = remember { MutableInteractionSource() } + SwipeToDismiss( state = dismissState, enabled = !multiSelectionEnabled, @@ -106,6 +114,13 @@ fun TabListItem( .background(FirefoxTheme.colors.layer3) .background(contentBackgroundColor) .combinedClickable( + interactionSource = interactionSource, + indication = rememberRipple( + color = when (isSystemInDarkTheme()) { + true -> PhotonColors.White + false -> PhotonColors.Black + }, + ), onLongClick = { onLongClick(tab) }, onClick = { onClick(tab) }, ) @@ -117,6 +132,7 @@ fun TabListItem( multiSelectionEnabled = multiSelectionEnabled, isSelected = multiSelectionSelected, onMediaIconClicked = { onMediaClick(it) }, + interactionSource = interactionSource, ) Column( @@ -172,6 +188,7 @@ private fun Thumbnail( multiSelectionEnabled: Boolean, isSelected: Boolean, onMediaIconClicked: ((TabSessionState) -> Unit), + interactionSource: MutableInteractionSource, ) { Box { TabThumbnail( @@ -215,6 +232,7 @@ private fun Thumbnail( tab = tab, onMediaIconClicked = onMediaIconClicked, modifier = Modifier.align(Alignment.TopEnd), + interactionSource = interactionSource, ) } }