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

Merge pull request #3415 from element-hq/feature/fga/pinned_messages_banner_indicators

Browse source 
Pinned messages banner : adjust indicator to match design.
This commit is contained in:
ganfra 2024-09-06 16:57:08 +02:00 • committed by GitHub
commit 87dbed98ea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 60 additions and 48 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(
aHiddenPinnedMessagesBannerState(),
aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 1),
aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 4),
aLoadingPinnedMessagesBannerState(knownPinnedMessagesCount = 5),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 1, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 2, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 3, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 1),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 2),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 4, currentPinnedMessageIndex = 3),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 0),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 1),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 2),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 3),
aLoadedPinnedMessagesBannerState(knownPinnedMessagesCount = 5, currentPinnedMessageIndex = 4),
)
}

43
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.size
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.LaunchedEffect
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@ -111,7 +108,6 @@ private fun PinnedMessagesBannerRow(
PinIndicators(
pinIndex = state.currentPinnedMessageIndex(),
pinsCount = state.pinnedMessagesCount(),
modifier = Modifier.heightIn(max = 40.dp)
)
Icon(
imageVector = CompoundIcons.PinSolid(),
@ -183,32 +179,41 @@ private fun PinIndicators(
else -> 11
}
}
val lazyListState = rememberLazyListState()
LaunchedEffect(pinIndex) {
val viewportSize = lazyListState.layoutInfo.viewportSize
lazyListState.animateScrollToItem(
pinIndex,
indicatorHeight / 2 - viewportSize.height / 2
)
val activeIndex = remember(pinIndex) {
pinIndex % 3
}
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,
state = lazyListState,
verticalArrangement = spacedBy(2.dp),
userScrollEnabled = false,
verticalArrangement = spacedBy(2.dp)
) {
items(pinsCount) { index ->
for (index in 0 until indicatorsCount) {
Box(
modifier = Modifier
.width(2.dp)
.height(indicatorHeight.dp)
.background(
color = if (index == pinIndex) {
color = if (index == activeIndex) {
ElementTheme.colors.iconAccentPrimary
} else {
} else if (index < shownIndicators) {
ElementTheme.colors.pinnedMessageBannerIndicator
} else {
Color.Transparent
}
)
),
)
}
}