Merge pull request #4014 from element-hq/feature/bma/knockAvatars

UI: knock avatars

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerStateProvider.kt

@@ -49,6 +49,13 @@ class KnockRequestsBannerStateProvider : PreviewParameterProvider<KnockRequestsB
             aKnockRequestsBannerState(
                 acceptAction = AsyncAction.Failure(Throwable("Failed to accept knock"))
             ),
+            aKnockRequestsBannerState(
+                knockRequests = listOf(
+                    aKnockRequest(
+                        displayName = "A_very_long_display_name_so_that_the_text_can_be_displayed_on_multiple_lines"
+                    )
+                )
+            ),
         )
 }
 

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerView.kt

@@ -10,7 +10,6 @@ package io.element.android.features.knockrequests.impl.banner
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.expandVertically
 import androidx.compose.animation.shrinkVertically
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -22,18 +21,20 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.CompositingStrategy
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.knockrequests.impl.KnockRequest
@@ -100,7 +101,10 @@ private fun KnockRequestsBannerContent(
             .padding(all = 16.dp)
     ) {
         Row {
-            KnockRequestAvatarView(state.knockRequests)
+            KnockRequestAvatarView(
+                state.knockRequests,
+                modifier = Modifier.padding(top = 2.dp),
+            )
             Spacer(modifier = Modifier.width(10.dp))
             Column(modifier = Modifier.weight(1f)) {
                 Text(
@@ -183,23 +187,38 @@ private fun KnockRequestAvatarListView(
     modifier: Modifier = Modifier,
 ) {
     val avatarSize = AvatarSize.KnockRequestBanner.dp
-    Row(
+    Box(
         modifier = modifier,
-        horizontalArrangement = Arrangement.spacedBy(-avatarSize / 2),
     ) {
         knockRequests
             .take(MAX_AVATAR_COUNT)
-            .forEachIndexed { index, knockRequest ->
-                Box(
-                    contentAlignment = Alignment.Center,
-                    modifier = Modifier
-                        .size(size = avatarSize)
-                        .clip(CircleShape)
-                        .background(color = ElementTheme.colors.bgCanvasDefaultLevel1)
-                        .zIndex(-index.toFloat()),
-                ) {
+            .reversed()
+            .let { smallReversedList ->
+                val lastItemIndex = smallReversedList.size - 1
+                smallReversedList.forEachIndexed { index, knockRequest ->
                     Avatar(
-                        modifier = Modifier.padding(2.dp),
+                        modifier = Modifier
+                            .padding(start = avatarSize / 2 * (lastItemIndex - index))
+                            .graphicsLayer {
+                                compositingStrategy = CompositingStrategy.Offscreen
+                            }
+                            .drawWithContent {
+                                // Draw content and clear the pixels for the avatar on the left.
+                                drawContent()
+                                if (index < lastItemIndex) {
+                                    drawCircle(
+                                        color = Color.Black,
+                                        center = Offset(
+                                            x = 0f,
+                                            y = size.height / 2,
+                                        ),
+                                        radius = avatarSize.toPx() / 2,
+                                        blendMode = BlendMode.Clear,
+                                    )
+                                }
+                            }
+                            .size(size = avatarSize)
+                            .padding(2.dp),
                         avatarData = knockRequest.getAvatarData(AvatarSize.KnockRequestBanner),
                     )
                 }