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

Pinned messages banner : adjust indicator to match design.

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

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

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

@@ -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
+    }
+    val shownIndicators = remember(pinsCount, pinIndex) {
+        if (pinsCount <= 3) {
+            pinsCount
+        } else {
+            val isLastPage = pinIndex >= pinsCount - pinsCount % 3
+            if (isLastPage) {
+                pinsCount % 3
+            } else {
+                3
+            }
+        }
     }
-    LazyColumn(
+    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
                         }
-                    )
+                    ),
             )
         }
     }

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_10_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b7427a78c5cc50e8476cb37458031c39e710ada1f1e9ef453ebb9151089f5927
+size 13052

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:720d657356e7fff0d0994a11fb95152b896b9e1de04dd50023b85c4d72cde6af
-size 11414
+oid sha256:c76cceea0430806081a2822aff225a80c10dc6bb2fdac8529f47d3f4e2335466
+size 11466

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_6_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:14ca5901134299e801e204e280d731e7de4072f1d522b076eb41c5f806897ed2
-size 12905
+oid sha256:868c72733bceb02631f6463e72e86bc13a6638c13f49938dc4d091ec09ba3584
+size 12917

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_7_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb206284c642dd665290d5d553491e622b8e15a64df7bb2dbd91ea5d3a13e19a
-size 13041
+oid sha256:d4b9fcd13e378958e64d4e36732b00b659a96ed63395eb5fbeb1648010e1e0c2
+size 13063

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_8_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a1940c4ee1e07c6a0198682460af1a6558fcaf14cb69ff061831cb591eb7aec3
-size 13066
+oid sha256:af3fbce88f905d35c78544c3c6b6b9a685e16c37680585d16ac36a6d6bff937b
+size 13081

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_9_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fee5c1dbcdf7929f4762b2915584fe45b7f39916a949663f03e8d7e85e991b4b
-size 12988
+oid sha256:f3b8208ec881ca2138d31faf2f10c15baba0f42c5d74761e67fb83770b18666a
+size 12984

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_10_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e160680201df22c3cefc0ff40a724ec500f2dd69a14f6ac7818cbef909adcc66
+size 12460

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:86caf295341ae9f5ae5cf99b39539a31afb0286c213e20b528078fc3fb3532e0
-size 10874
+oid sha256:a78466e52f1ff339e944d2aa18e4bb4ee5e3821fea7a034a1c4eaa68cfc6d846
+size 10946

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_6_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cca8ebb1ec12497de7e2efc1725a2e4427eecd1d340ae8176d10f914def0af25
-size 12297
+oid sha256:9beb00ee8cac55cd598739a89ef30d18631f7624bfc44602e4b3471073530525
+size 12322

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_7_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:37bf00fbf548b7ba3d601af1ca489e07e25059c2f5a68abf9b85f4c656cf482c
-size 12425
+oid sha256:66dd067df10843e6efad2ad031c761f5f2845a0bc0f7f21766e006047ea23cec
+size 12462

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_8_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ed813a7003eb01a06667b10191990ed5bb3f75ee6a447cc4d52510b7e13b3724
-size 12448
+oid sha256:1bb43709935a5f40d1eeb0537713fd481ab50155c0df881ff78a32b6e2c535a7
+size 12469

tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_9_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6fa556ff7f6757c69c24e47520e08ccfd1b009d8e49a704c36d7fc4ca4186cbf
-size 12378
+oid sha256:fe13cff71a35eb54701d923d581242279c29311966cf99fae3649d7416a51c23
+size 12393

tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Day_13_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:35761e520dcd7ad01d3913a98479314a1df645bdf141214e3a180fe150d2e8fd
-size 59959
+oid sha256:abf4fc357ac29927e3db582cec16268272d1571701922101c918530e8ab81e4a
+size 59927

tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Night_13_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:acd2cf24e0a894936d6ed0896fb4ebcdba3529437e595ca54aa13a6f8ee79a5f
-size 59327
+oid sha256:bb013275a90211acbae813885402908161de75cac8129000c896ebfdfb020efc
+size 59301