RoomListFilters: try to improve ui with animation and fading edges
This commit is contained in:
ganfra
parent
31988e81fa
commit
7471e12bc5
8 changed files with 102 additions and 28 deletions
|
|
@ -36,7 +36,6 @@ import io.element.android.features.networkmonitor.api.NetworkStatus
|
|||
import io.element.android.features.preferences.api.store.SessionPreferencesStore
|
||||
import io.element.android.features.roomlist.impl.datasource.InviteStateDataSource
|
||||
import io.element.android.features.roomlist.impl.datasource.RoomListDataSource
|
||||
import io.element.android.features.roomlist.impl.filters.RoomListFiltersPresenter
|
||||
import io.element.android.features.roomlist.impl.filters.RoomListFiltersState
|
||||
import io.element.android.features.roomlist.impl.migration.MigrationScreenPresenter
|
||||
import io.element.android.features.roomlist.impl.search.RoomListSearchEvents
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import io.element.android.features.roomlist.impl.R
|
|||
* Enum class representing the different filters that can be applied to the room list.
|
||||
* Order is important.
|
||||
*/
|
||||
enum class RoomListFilter(val stringResource: Int){
|
||||
enum class RoomListFilter(val stringResource: Int) {
|
||||
Rooms(R.string.screen_roomlist_filter_rooms),
|
||||
People(R.string.screen_roomlist_filter_people),
|
||||
Unread(R.string.screen_roomlist_filter_unreads),
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ class RoomListFiltersPresenter @Inject constructor(
|
|||
private val roomListService: RoomListService,
|
||||
private val featureFlagService: FeatureFlagService,
|
||||
) : Presenter<RoomListFiltersState> {
|
||||
|
||||
@Composable
|
||||
override fun present(): RoomListFiltersState {
|
||||
val isFeatureEnabled by featureFlagService.isFeatureEnabledFlow(FeatureFlags.RoomListFilters).collectAsState(false)
|
||||
|
|
@ -91,4 +90,3 @@ class RoomListFiltersPresenter @Inject constructor(
|
|||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ import kotlinx.collections.immutable.persistentListOf
|
|||
import kotlinx.collections.immutable.toImmutableList
|
||||
|
||||
class RoomListFiltersStateProvider : PreviewParameterProvider<RoomListFiltersState> {
|
||||
|
||||
override val values: Sequence<RoomListFiltersState>
|
||||
get() = sequenceOf(
|
||||
aRoomListFiltersState(),
|
||||
|
|
|
|||
|
|
@ -17,13 +17,17 @@
|
|||
package io.element.android.features.roomlist.impl.filters
|
||||
|
||||
import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.foundation.ExperimentalFoundationApi
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.horizontalScroll
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.lazy.LazyListScope
|
||||
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
|
||||
|
|
@ -36,11 +40,14 @@ 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 kotlinx.collections.immutable.ImmutableList
|
||||
import timber.log.Timber
|
||||
|
||||
@Composable
|
||||
|
|
@ -61,34 +68,50 @@ fun RoomListFiltersView(
|
|||
state.eventSink(RoomListFiltersEvents.ToggleFilter(filter))
|
||||
}
|
||||
|
||||
val horizontalPadding = if (state.showClearFilterButton) 4.dp else 16.dp
|
||||
val scrollState = rememberScrollState()
|
||||
val startPadding = if (state.showClearFilterButton) 4.dp else 16.dp
|
||||
Row(
|
||||
modifier = modifier
|
||||
.padding(horizontal = horizontalPadding)
|
||||
.horizontalScroll(scrollState),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
modifier = modifier.padding(start = startPadding, end = 16.dp),
|
||||
) {
|
||||
AnimatedVisibility(visible = state.showClearFilterButton) {
|
||||
RoomListClearFiltersButton(onClick = ::onClearFiltersClicked)
|
||||
}
|
||||
for (filter in state.selectedFilters) {
|
||||
RoomListFilterView(
|
||||
roomListFilter = filter,
|
||||
selected = true,
|
||||
onClick = ::onFilterClicked,
|
||||
)
|
||||
}
|
||||
for (filter in state.unselectedFilters) {
|
||||
RoomListFilterView(
|
||||
roomListFilter = filter,
|
||||
selected = false,
|
||||
onClick = ::onFilterClicked,
|
||||
)
|
||||
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)
|
||||
) {
|
||||
roomListFilters(state.selectedFilters, selected = true, onClick = ::onFilterClicked)
|
||||
roomListFilters(state.unselectedFilters, selected = false, onClick = ::onFilterClicked)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalFoundationApi::class)
|
||||
private fun LazyListScope.roomListFilters(
|
||||
filters: ImmutableList<RoomListFilter>,
|
||||
selected: Boolean,
|
||||
onClick: (RoomListFilter) -> Unit,
|
||||
) {
|
||||
items(
|
||||
items = filters,
|
||||
key = { it.ordinal },
|
||||
) { filter ->
|
||||
RoomListFilterView(
|
||||
modifier = Modifier.animateItemPlacement(),
|
||||
roomListFilter = filter,
|
||||
selected = selected,
|
||||
onClick = onClick,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun RoomListClearFiltersButton(
|
||||
onClick: () -> Unit,
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ import io.element.android.features.roomlist.impl.datasource.FakeInviteDataSource
|
|||
import io.element.android.features.roomlist.impl.datasource.InviteStateDataSource
|
||||
import io.element.android.features.roomlist.impl.datasource.RoomListDataSource
|
||||
import io.element.android.features.roomlist.impl.datasource.RoomListRoomSummaryFactory
|
||||
import io.element.android.features.roomlist.impl.filters.RoomListFiltersPresenter
|
||||
import io.element.android.features.roomlist.impl.filters.RoomListFiltersState
|
||||
import io.element.android.features.roomlist.impl.filters.aRoomListFiltersState
|
||||
import io.element.android.features.roomlist.impl.migration.InMemoryMigrationScreenStore
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ import org.junit.Test
|
|||
import io.element.android.libraries.matrix.api.roomlist.RoomListFilter as MatrixRoomListFilter
|
||||
|
||||
class RoomListFiltersPresenterTests {
|
||||
|
||||
@Test
|
||||
fun `present - initial state`() = runTest {
|
||||
val presenter = createRoomListFiltersPresenter()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
* Copyright (c) 2024 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.modifiers
|
||||
|
||||
import androidx.compose.animation.animateColorAsState
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.drawWithContent
|
||||
import androidx.compose.ui.graphics.BlendMode
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.CompositingStrategy
|
||||
import androidx.compose.ui.graphics.graphicsLayer
|
||||
|
||||
@Composable
|
||||
fun horizontalFadingEdgesBrush(
|
||||
showLeft: Boolean,
|
||||
showRight: Boolean,
|
||||
percent: Float = 0.1f,
|
||||
): Brush {
|
||||
val leftColor by animateColorAsState(
|
||||
targetValue = if (showLeft) Color.Transparent else Color.White,
|
||||
label = "AnimateLeftColor",
|
||||
)
|
||||
val rightColor by animateColorAsState(
|
||||
targetValue = if (showRight) Color.Transparent else Color.White,
|
||||
label = "AnimateRightColor",
|
||||
)
|
||||
return Brush.horizontalGradient(
|
||||
0f to leftColor,
|
||||
percent to Color.White,
|
||||
1f - percent to Color.White,
|
||||
1f to rightColor
|
||||
)
|
||||
}
|
||||
|
||||
fun Modifier.fadingEdge(brush: Brush) = this
|
||||
.graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
|
||||
.drawWithContent {
|
||||
drawContent()
|
||||
drawRect(brush = brush, blendMode = BlendMode.DstIn)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue