Sulkta-OSS/element-x-ada
3
0
Fork 0
Code Issues 1 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Pinned messages banner : adjust indicator to match design.

Browse source
This commit is contained in:
ganfra 2024-09-06 11:20:25 +02:00
parent 9bce1156f2
commit 790f694dcc
2 changed files with 63 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

11
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerStateProvider.kt
View file

@ -26,14 +26,15 @@ internal class PinnedMessagesBannerStateProvider : PreviewParameterProvider<Pinn
get() = sequenceOf( get() = sequenceOf(
aHiddenPinnedMessagesBannerState(), aHiddenPinnedMessagesBannerState(),
aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 1), aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 1),
aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 4), aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 5),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 1, currentPinnedMessageIndex = 0), aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 1, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 2, currentPinnedMessageIndex = 0), aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 2, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 3, currentPinnedMessageIndex = 0), aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 3, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 0), aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 1), aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 1),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 2), aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 2),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 3), aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 3),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 4),
) )
} }

109
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerView.kt
View file

@ -29,10 +29,7 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.Stable import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
@ -94,16 +91,16 @@ private fun PinnedMessagesBannerRow(
val borderColor = ElementTheme.colors.pinnedMessageBannerBorder val borderColor = ElementTheme.colors.pinnedMessageBannerBorder
Row( Row(
modifier = modifier modifier = modifier
.background(color = ElementTheme.colors.bgCanvasDefault) .background(color = ElementTheme.colors.bgCanvasDefault)
.fillMaxWidth() .fillMaxWidth()
.drawBorder(borderColor) .drawBorder(borderColor)
.heightIn(min = 64.dp) .heightIn(min = 64.dp)
.clickable { .clickable {
if (state is PinnedMessagesBannerState.Loaded) { if (state is PinnedMessagesBannerState.Loaded) {
onClick(state.currentPinnedMessage.eventId) onClick(state.currentPinnedMessage.eventId)
state.eventSink(PinnedMessagesBannerEvents.MoveToNextPinned) state.eventSink(PinnedMessagesBannerEvents.MoveToNextPinned)
} }
}, },
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = spacedBy(10.dp) horizontalArrangement = spacedBy(10.dp)
) { ) {
@ -111,7 +108,6 @@ private fun PinnedMessagesBannerRow(
PinIndicators( PinIndicators(
pinIndex = state.currentPinnedMessageIndex(), pinIndex = state.currentPinnedMessageIndex(),
pinsCount = state.pinnedMessagesCount(), pinsCount = state.pinnedMessagesCount(),
modifier = Modifier.heightIn(max = 40.dp)
) )
Icon( Icon(
imageVector = CompoundIcons.PinSolid(), imageVector = CompoundIcons.PinSolid(),
@ -150,23 +146,23 @@ private fun ViewAllButton(
private fun Modifier.drawBorder(borderColor: Color): Modifier { private fun Modifier.drawBorder(borderColor: Color): Modifier {
return this return this
.drawBehind { .drawBehind {
val strokeWidth = 0.5.dp.toPx() val strokeWidth = 0.5.dp.toPx()
val y = size.height - strokeWidth / 2 val y = size.height - strokeWidth / 2
drawLine( drawLine(
borderColor, borderColor,
Offset(0f, y), Offset(0f, y),
Offset(size.width, y), Offset(size.width, y),
strokeWidth strokeWidth
) )
drawLine( drawLine(
borderColor, borderColor,
Offset(0f, 0f), Offset(0f, 0f),
Offset(size.width, 0f), Offset(size.width, 0f),
strokeWidth strokeWidth
) )
} }
.shadow(elevation = 5.dp, spotColor = Color.Transparent) .shadow(elevation = 5.dp, spotColor = Color.Transparent)
} }
@Composable @Composable
@ -183,32 +179,41 @@ private fun PinIndicators(
else -> 11 else -> 11
} }
} }
val lazyListState = rememberLazyListState() val activeIndex = remember(pinIndex) {
LaunchedEffect(pinIndex) { pinIndex % 3
val viewportSize = lazyListState.layoutInfo.viewportSize
lazyListState.animateScrollToItem(
pinIndex,
indicatorHeight / 2 - viewportSize.height / 2
)
} }
LazyColumn( val shownIndicators = remember(pinsCount, pinIndex) {
if (pinsCount <= 3) {
pinsCount
} else {
val isLastPage = pinIndex >= pinsCount - pinsCount % 3
if (isLastPage) {
pinsCount % 3
} else {
3
}
}
}
val indicatorsCount = pinsCount.coerceAtMost(3)
Column(
modifier = modifier, modifier = modifier,
state = lazyListState, verticalArrangement = spacedBy(2.dp)
verticalArrangement = spacedBy(2.dp),
userScrollEnabled = false,
) { ) {
items(pinsCount) { index -> for (index in 0 until indicatorsCount) {
Box( Box(
modifier = Modifier modifier = Modifier
.width(2.dp) .width(2.dp)
.height(indicatorHeight.dp) .height(indicatorHeight.dp)
.background( .background(
color = if (index == pinIndex) { color = if (index == activeIndex) {
ElementTheme.colors.iconAccentPrimary ElementTheme.colors.iconAccentPrimary
} else { } else if (index < shownIndicators) {
ElementTheme.colors.pinnedMessageBannerIndicator ElementTheme.colors.pinnedMessageBannerIndicator
} } else {
) Color.Transparent
}
),
) )
} }
} }