Browse Source

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>
pull/2809/head
Joe Groocock 5 months ago
parent
commit
eb97bce6c6
No known key found for this signature in database
GPG Key ID: A5571FCDC53ADDE6
  1. 1
      changelog.d/2809.bugfix
  2. 21
      features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/filters/RoomListFiltersView.kt

1
changelog.d/2809.bugfix

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

21
features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/filters/RoomListFiltersView.kt

@ -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)
},
) )
} }
} }

Loading…
Cancel
Save