Refactor to Components

app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailActivity.kt

@@ -65,8 +65,9 @@ import org.thoughtcrime.securesms.ui.Cell
 import org.thoughtcrime.securesms.ui.CellNoMargin
 import org.thoughtcrime.securesms.ui.CellWithPaddingAndMargin
 import org.thoughtcrime.securesms.ui.Divider
+import org.thoughtcrime.securesms.ui.HorizontalPagerIndicator
 import org.thoughtcrime.securesms.ui.ItemButton
-import org.thoughtcrime.securesms.ui.SessionHorizontalPagerIndicator
+import org.thoughtcrime.securesms.ui.blackAlpha40
 import org.thoughtcrime.securesms.ui.colorDestructive
 import org.thoughtcrime.securesms.ui.destructiveButtonColors
 import java.util.*
@@ -350,10 +351,7 @@ class MessageDetailActivity : PassphraseRequiredActionBarActivity() {
         }
     }
 
-    @OptIn(
+    @OptIn(ExperimentalFoundationApi::class,)
-        ExperimentalFoundationApi::class,
-        ExperimentalGlideComposeApi::class,
-    )
     @Composable
     fun ImageAttachments(attachments: List<Attachment>, onClick: (Slide) -> Unit) {
         val imageAttachments = attachments.filter { it.slide.hasImage() }
@@ -363,38 +361,9 @@ class MessageDetailActivity : PassphraseRequiredActionBarActivity() {
             Row {
                 CarouselPrevButton(pagerState)
                 Box(modifier = Modifier.weight(1f)) {
-                    CellNoMargin {
+                    CellPager(pagerState, imageAttachments) { onClick(it) }
-                        HorizontalPager(state = pagerState) { i ->
+                    HorizontalPagerIndicator(pagerState)
-                            val slide = imageAttachments[i].slide
+                    ExpandButton(modifier = Modifier.align(Alignment.BottomEnd).padding(8.dp))
-                            slide.apply {
-                                GlideImage(
-                                    contentScale = ContentScale.Crop,
-                                    modifier = Modifier
-                                        .aspectRatio(1f)
-                                        .clickable { onClick(slide) },
-                                    model = uri,
-                                    contentDescription = fileName.orNull() ?: "image"
-                                )
-                            }
-                        }
-                    }
-                    if (imageAttachments.size >= 2) {
-                        SessionHorizontalPagerIndicator(
-                            modifier = Modifier.align(Alignment.BottomCenter),
-                            pagerState = pagerState,
-                            pageCount = imageAttachments.size,
-                        )
-                    }
-                    Surface(
-                        shape = CircleShape,
-                        color = Color.Black.copy(alpha = 0.4f),
-                        modifier = Modifier.align(Alignment.BottomEnd).padding(8.dp)
-                    ) {
-                        Icon(
-                            painter = painterResource(id = R.drawable.ic_expand),
-                            contentDescription = ""
-                        )
-                    }
                 }
                 CarouselNextButton(pagerState)
             }
@@ -402,7 +371,40 @@ class MessageDetailActivity : PassphraseRequiredActionBarActivity() {
         }
     }
 
+    @OptIn(
+        ExperimentalFoundationApi::class,
+        ExperimentalGlideComposeApi::class
+    )
+    @Composable
+    private fun CellPager(pagerState: PagerState, imageAttachments: List<Attachment>, onClick: (Slide) -> Unit) {
+        CellNoMargin {
+            HorizontalPager(state = pagerState) { i ->
+                val slide = imageAttachments[i].slide
+                GlideImage(
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier
+                        .aspectRatio(1f)
+                        .clickable { onClick(slide) },
+                    model = slide.uri,
+                    contentDescription = slide.fileName.orNull() ?: "image"
+                )
+            }
+        }
+    }
 
+    @Composable
+    fun ExpandButton(modifier: Modifier) {
+        Surface(
+            shape = CircleShape,
+            color = blackAlpha40,
+            modifier = modifier
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_expand),
+                contentDescription = ""
+            )
+        }
+    }
 
     @OptIn(ExperimentalFoundationApi::class, ExperimentalLayoutApi::class)
     @Composable

app/src/main/java/org/thoughtcrime/securesms/ui/Colors.kt

@@ -23,6 +23,8 @@ val classicLight4 = Color(0xffF0F0F0)
 val classicLight5 = Color(0xffF9F9F9)
 val classicLight6 = Color(0xffFFFFFF)
 
+val blackAlpha40 = Color.Black.copy(alpha = 0.4f)
+
 @Composable
 fun transparentButtonColors() = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)
 

app/src/main/java/org/thoughtcrime/securesms/ui/Components.kt

@@ -3,6 +3,7 @@ package org.thoughtcrime.securesms.ui
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -91,16 +92,16 @@ fun CellWithPaddingAndMargin(
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
-fun SessionHorizontalPagerIndicator(modifier: Modifier, pagerState: PagerState, pageCount: Int) {
+fun BoxScope.HorizontalPagerIndicator(pagerState: PagerState) {
     Card(shape = RoundedCornerShape(50.dp),
         backgroundColor = Color.Black.copy(alpha = 0.4f),
         modifier = Modifier
-            .padding(8.dp)
+            .align(Alignment.BottomCenter)
-            .then(modifier)) {
+            .padding(8.dp)) {
         Box(modifier = Modifier.padding(8.dp)) {
             HorizontalPagerIndicator(
                 pagerState = pagerState,
-                pageCount = pageCount,
+                pageCount = pagerState.pageCount,
                 activeColor = Color.White,
                 inactiveColor = classicDark5)
         }