Ensure selected/deselected filters stay on top

This looks a little more "sane", and more closely matches what iOS does
with it's filter chips. This has to manually track which filters were
"just-deselected" and move those even higher up the z stack to ensure
they appear above even when sliding right. This is because the order is
determined by the position left-to-right of the _final_ destination of
the chip. In this case we want anything that's either currently
selected, or was selected and is still fading out to appear on top.

Signed-off-by: Joe Groocock <me@frebib.net>
This commit is contained in:
Joe Groocock 2024-05-07 01:10:03 +01:00
parent 167e52f34a
commit 102025f1a6
2 changed files with 18 additions and 4 deletions

1
changelog.d/2809.bugfix Normal file
View file

@ -0,0 +1 @@
Render selected/deselected room list filters on top

View file

@ -32,12 +32,15 @@ import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults import androidx.compose.material3.FilterChipDefaults
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import io.element.android.compound.theme.ElementTheme import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.ElementPreview
@ -62,6 +65,7 @@ fun RoomListFiltersView(
} }
val lazyListState = rememberLazyListState() val lazyListState = rememberLazyListState()
val previousFilters = remember { mutableStateOf(listOf<RoomListFilter>()) }
LazyRow( LazyRow(
contentPadding = PaddingValues(start = 8.dp, end = 16.dp), contentPadding = PaddingValues(start = 8.dp, end = 16.dp),
modifier = modifier.fillMaxWidth(), modifier = modifier.fillMaxWidth(),
@ -75,17 +79,26 @@ fun RoomListFiltersView(
modifier = Modifier modifier = Modifier
.padding(start = 8.dp) .padding(start = 8.dp)
.testTag(TestTags.homeScreenClearFilters), .testTag(TestTags.homeScreenClearFilters),
onClick = ::onClearFiltersClicked onClick = {
previousFilters.value = state.selectedFilters()
onClearFiltersClicked()
}
) )
} }
} }
for (filterWithSelection in state.filterSelectionStates) { state.filterSelectionStates.forEachIndexed { i, filterWithSelection ->
item(filterWithSelection.filter) { item(filterWithSelection.filter) {
val zIndex = (if (previousFilters.value.contains(filterWithSelection.filter)) state.filterSelectionStates.size else 0) - i.toFloat()
RoomListFilterView( RoomListFilterView(
modifier = Modifier.animateItemPlacement(), modifier = Modifier
.animateItemPlacement()
.zIndex(zIndex),
roomListFilter = filterWithSelection.filter, roomListFilter = filterWithSelection.filter,
selected = filterWithSelection.isSelected, selected = filterWithSelection.isSelected,
onClick = ::onToggleFilter, onClick = {
previousFilters.value = state.selectedFilters()
onToggleFilter(it)
},
) )
} }
} }