From 790f694dcc5fab7e481992564f262599f1b71772 Mon Sep 17 00:00:00 2001 From: ganfra Date: Fri, 6 Sep 2024 11:20:25 +0200 Subject: [PATCH 1/3] Pinned messages banner : adjust indicator to match design. --- .../PinnedMessagesBannerStateProvider.kt | 11 +- .../pinned/banner/PinnedMessagesBannerView.kt | 109 +++++++++--------- 2 files changed, 63 insertions(+), 57 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerStateProvider.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerStateProvider.kt index e9d0a27c16..358872ca7f 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerStateProvider.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerStateProvider.kt @@ -26,14 +26,15 @@ internal class PinnedMessagesBannerStateProvider : PreviewParameterProvider 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) { - ElementTheme.colors.iconAccentPrimary - } else { - ElementTheme.colors.pinnedMessageBannerIndicator - } - ) + .width(2.dp) + .height(indicatorHeight.dp) + .background( + color = if (index == activeIndex) { + ElementTheme.colors.iconAccentPrimary + } else if (index < shownIndicators) { + ElementTheme.colors.pinnedMessageBannerIndicator + } else { + Color.Transparent + } + ), ) } } From b35b31aa6f43867e2f65b56dd83f0591b8e89371 Mon Sep 17 00:00:00 2001 From: ElementBot Date: Fri, 6 Sep 2024 13:27:06 +0000 Subject: [PATCH 2/3] Update screenshots --- ....impl.pinned.banner_PinnedMessagesBannerView_Day_10_en.png | 3 +++ ...s.impl.pinned.banner_PinnedMessagesBannerView_Day_2_en.png | 4 ++-- ...s.impl.pinned.banner_PinnedMessagesBannerView_Day_6_en.png | 4 ++-- ...s.impl.pinned.banner_PinnedMessagesBannerView_Day_7_en.png | 4 ++-- ...s.impl.pinned.banner_PinnedMessagesBannerView_Day_8_en.png | 4 ++-- ...s.impl.pinned.banner_PinnedMessagesBannerView_Day_9_en.png | 4 ++-- ...mpl.pinned.banner_PinnedMessagesBannerView_Night_10_en.png | 3 +++ ...impl.pinned.banner_PinnedMessagesBannerView_Night_2_en.png | 4 ++-- ...impl.pinned.banner_PinnedMessagesBannerView_Night_6_en.png | 4 ++-- ...impl.pinned.banner_PinnedMessagesBannerView_Night_7_en.png | 4 ++-- ...impl.pinned.banner_PinnedMessagesBannerView_Night_8_en.png | 4 ++-- ...impl.pinned.banner_PinnedMessagesBannerView_Night_9_en.png | 4 ++-- ...eline.components.reactionsummary_SheetContent_Day_0_en.png | 4 ++-- ...ine.components.reactionsummary_SheetContent_Night_0_en.png | 4 ++-- .../images/features.messages.impl_MessagesView_Day_13_en.png | 4 ++-- .../features.messages.impl_MessagesView_Night_13_en.png | 4 ++-- 16 files changed, 34 insertions(+), 28 deletions(-) create mode 100644 tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_10_en.png create mode 100644 tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_10_en.png diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_10_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_10_en.png new file mode 100644 index 0000000000..9a4510b565 --- /dev/null +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_2_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_2_en.png index 336a9a5ad1..dd4bc488e5 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_2_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_6_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_6_en.png index cfd32bb09c..2edb587e53 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_6_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_7_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_7_en.png index 40ed099f5b..f8259e4e2e 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_7_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_8_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_8_en.png index 15a58d4763..791d13d59a 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_8_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_9_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_9_en.png index ac3fb40ad1..68bcc6a968 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Day_9_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_10_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_10_en.png new file mode 100644 index 0000000000..7aaa1edefe --- /dev/null +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_2_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_2_en.png index a45ab0dc23..7e78f29a2b 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_2_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_6_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_6_en.png index b320ff09e6..7971b5530e 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_6_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_7_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_7_en.png index 8299ed3a1c..0084beebeb 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_7_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_8_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_8_en.png index 533f421f11..cbb27dc86c 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_8_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_9_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_9_en.png index a3b1d03bce..b399860a23 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.pinned.banner_PinnedMessagesBannerView_Night_9_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Day_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Day_0_en.png index d49c11a6a2..3fdfe25ad2 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Day_0_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Day_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:65eb29b745fabe2587019c169a48a862b129a3ece30cf9bc82aff09c67878b35 -size 23180 +oid sha256:9490990c863318390d0f088ff82ad01a688c81cada63d749872b22b633fa12fe +size 23040 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Night_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Night_0_en.png index df75d7f909..1a24a720d8 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Night_0_en.png +++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Night_0_en.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c1cf0091d377d8018d14804433aaa67d1b0b510778b6f8a4e8a73faff2b4c782 -size 23280 +oid sha256:730c2c5ab52209366611546dbdbbed62214f6f5e13328be66cce5f08d8f4f0e5 +size 23125 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Day_13_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Day_13_en.png index c1200f26b4..58714ca3f3 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Day_13_en.png +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Night_13_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Night_13_en.png index 704ea5bb60..97ce973649 100644 --- a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesView_Night_13_en.png +++ b/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 From 1ab7841443ed77739b16203d36231ed407b064c9 Mon Sep 17 00:00:00 2001 From: ganfra Date: Fri, 6 Sep 2024 16:32:29 +0200 Subject: [PATCH 3/3] Pinned messages banner : reformat. --- .../pinned/banner/PinnedMessagesBannerView.kt | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerView.kt index 71f63c6fd6..242fd6aa60 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/banner/PinnedMessagesBannerView.kt @@ -91,16 +91,16 @@ private fun PinnedMessagesBannerRow( val borderColor = ElementTheme.colors.pinnedMessageBannerBorder Row( modifier = modifier - .background(color = ElementTheme.colors.bgCanvasDefault) - .fillMaxWidth() - .drawBorder(borderColor) - .heightIn(min = 64.dp) - .clickable { - if (state is PinnedMessagesBannerState.Loaded) { - onClick(state.currentPinnedMessage.eventId) - state.eventSink(PinnedMessagesBannerEvents.MoveToNextPinned) - } - }, + .background(color = ElementTheme.colors.bgCanvasDefault) + .fillMaxWidth() + .drawBorder(borderColor) + .heightIn(min = 64.dp) + .clickable { + if (state is PinnedMessagesBannerState.Loaded) { + onClick(state.currentPinnedMessage.eventId) + state.eventSink(PinnedMessagesBannerEvents.MoveToNextPinned) + } + }, verticalAlignment = Alignment.CenterVertically, horizontalArrangement = spacedBy(10.dp) ) { @@ -146,23 +146,23 @@ private fun ViewAllButton( private fun Modifier.drawBorder(borderColor: Color): Modifier { return this - .drawBehind { - val strokeWidth = 0.5.dp.toPx() - val y = size.height - strokeWidth / 2 - drawLine( - borderColor, - Offset(0f, y), - Offset(size.width, y), - strokeWidth - ) - drawLine( - borderColor, - Offset(0f, 0f), - Offset(size.width, 0f), - strokeWidth - ) - } - .shadow(elevation = 5.dp, spotColor = Color.Transparent) + .drawBehind { + val strokeWidth = 0.5.dp.toPx() + val y = size.height - strokeWidth / 2 + drawLine( + borderColor, + Offset(0f, y), + Offset(size.width, y), + strokeWidth + ) + drawLine( + borderColor, + Offset(0f, 0f), + Offset(size.width, 0f), + strokeWidth + ) + } + .shadow(elevation = 5.dp, spotColor = Color.Transparent) } @Composable @@ -203,17 +203,17 @@ private fun PinIndicators( for (index in 0 until indicatorsCount) { Box( modifier = Modifier - .width(2.dp) - .height(indicatorHeight.dp) - .background( - color = if (index == activeIndex) { - ElementTheme.colors.iconAccentPrimary - } else if (index < shownIndicators) { - ElementTheme.colors.pinnedMessageBannerIndicator - } else { - Color.Transparent - } - ), + .width(2.dp) + .height(indicatorHeight.dp) + .background( + color = if (index == activeIndex) { + ElementTheme.colors.iconAccentPrimary + } else if (index < shownIndicators) { + ElementTheme.colors.pinnedMessageBannerIndicator + } else { + Color.Transparent + } + ), ) } }