diff --git a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/filters/RoomListFiltersView.kt b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/filters/RoomListFiltersView.kt index 2c9a451665..57f4fa0a9c 100644 --- a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/filters/RoomListFiltersView.kt +++ b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/filters/RoomListFiltersView.kt @@ -16,23 +16,20 @@ package io.element.android.features.roomlist.impl.filters -import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.core.tween import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyRow -import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.FilterChip import androidx.compose.material3.FilterChipDefaults -import androidx.compose.material3.minimumInteractiveComponentSize import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.ui.Alignment @@ -43,12 +40,9 @@ import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import io.element.android.compound.theme.ElementTheme import io.element.android.compound.tokens.generated.CompoundIcons -import io.element.android.libraries.designsystem.modifiers.fadingEdge -import io.element.android.libraries.designsystem.modifiers.horizontalFadingEdgesBrush import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.theme.components.Icon -import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.testtags.TestTags import io.element.android.libraries.testtags.testTag @@ -68,49 +62,40 @@ fun RoomListFiltersView( state.eventSink(RoomListFiltersEvents.ToggleFilter(filter)) } - val startPadding = if (state.hasAnyFilterSelected) 4.dp else 16.dp - Row( - modifier = modifier.padding(start = startPadding, end = 16.dp), + val lazyListState = rememberLazyListState() + LazyRow( + contentPadding = PaddingValues(start = 8.dp, end = 16.dp), + modifier = modifier.fillMaxWidth(), + state = lazyListState, + horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically, ) { - - AnimatedVisibility(visible = state.hasAnyFilterSelected) { - RoomListClearFiltersButton( - modifier = Modifier.testTag(TestTags.homeScreenClearFilters), - onClick = ::onClearFiltersClicked - ) + item("clear_filters") { + if (state.hasAnyFilterSelected) { + RoomListClearFiltersButton( + modifier = Modifier + .padding(start = 8.dp) + .testTag(TestTags.homeScreenClearFilters), + onClick = ::onClearFiltersClicked + ) + } } - - val lazyListState = rememberLazyListState() - val fadingEdgesBrush = horizontalFadingEdgesBrush( - showLeft = lazyListState.canScrollBackward, - showRight = lazyListState.canScrollForward - ) - LazyRow( - modifier = Modifier - .fillMaxWidth() - .fadingEdge(fadingEdgesBrush), - state = lazyListState, - horizontalArrangement = Arrangement.spacedBy(8.dp) - ) { - items( - items = state.filterSelectionStates, - key = { it.filter.ordinal } - ) { filterWithSelection -> + for (filterWithSelection in state.filterSelectionStates) { + item(filterWithSelection.filter) { RoomListFilterView( - modifier = Modifier.animateItemPlacement( - animationSpec = tween(200), - ), + modifier = Modifier.animateItemPlacement(), roomListFilter = filterWithSelection.filter, selected = filterWithSelection.isSelected, onClick = ::onToggleFilter, ) } } - LaunchedEffect(state.filterSelectionStates) { - if (lazyListState.canScrollBackward) { - lazyListState.animateScrollToItem(0) - } + } + LaunchedEffect(state.filterSelectionStates) { + // Checking for canScrollBackward is necessary for the itemPlacementAnimation to work correctly. + // We don't want the itemPlacementAnimation to be triggered when clearing the filters. + if (!state.hasAnyFilterSelected || lazyListState.canScrollBackward) { + lazyListState.animateScrollToItem(0) } } } @@ -120,22 +105,18 @@ private fun RoomListClearFiltersButton( onClick: () -> Unit, modifier: Modifier = Modifier ) { - IconButton( - modifier = modifier, - onClick = onClick, + Box( + modifier = modifier + .clip(CircleShape) + .background(ElementTheme.colors.bgActionPrimaryRest) + .clickable(onClick = onClick) ) { - Box( - modifier = Modifier - .clip(CircleShape) - .background(ElementTheme.colors.bgActionPrimaryRest) - ) { - Icon( - modifier = Modifier.align(Alignment.Center), - imageVector = CompoundIcons.Close(), - tint = ElementTheme.colors.iconOnSolidPrimary, - contentDescription = stringResource(id = io.element.android.libraries.ui.strings.R.string.action_clear), - ) - } + Icon( + modifier = Modifier.align(Alignment.Center), + imageVector = CompoundIcons.Close(), + tint = ElementTheme.colors.iconOnSolidPrimary, + contentDescription = stringResource(id = io.element.android.libraries.ui.strings.R.string.action_clear), + ) } } @@ -149,9 +130,7 @@ private fun RoomListFilterView( FilterChip( selected = selected, onClick = { onClick(roomListFilter) }, - modifier = modifier - .minimumInteractiveComponentSize() - .height(36.dp), + modifier = modifier.height(36.dp), shape = CircleShape, colors = FilterChipDefaults.filterChipColors( containerColor = ElementTheme.colors.bgCanvasDefault,