Updated hardcoded dimensions, other compose changes

jbsession · jbsession · commit 76fd508cf5fb · 2026-01-07T11:26:44.000+08:00
diff --git a/app/src/main/java/org/thoughtcrime/securesms/mediasend/compose/Components.kt b/app/src/main/java/org/thoughtcrime/securesms/mediasend/compose/Components.kt
@@ -45,6 +45,7 @@ import org.thoughtcrime.securesms.util.MediaUtil
 import kotlin.collections.filterNot
 import kotlin.collections.indexOfFirst
 import androidx.core.net.toUri
+import org.thoughtcrime.securesms.ui.theme.LocalDimensions
 
 @OptIn(ExperimentalGlideComposeApi::class)
 @Composable
@@ -56,7 +57,6 @@ fun MediaFolderCell(
 ) {
     Box(
         modifier = Modifier
-            .padding(end = 2.dp, bottom = 2.dp)
             .fillMaxWidth()
             .clickable(onClick = onClick)
     ) {
@@ -72,50 +72,49 @@ fun MediaFolderCell(
                 modifier = Modifier
                     .align(Alignment.BottomCenter)
                     .fillMaxWidth()
-                    .height(50.dp)
                     .background(
                         Brush.verticalGradient(
                             colorStops = arrayOf(
                                 0.0f to Color.Transparent,
-                                0.5f to Color.Black.copy(alpha = 0.5333f),
-                                1.0f to Color.Black.copy(alpha = 0.6667f)
+                                0.5f to Color.Black.copy(alpha = 0.5f),
+                                1.0f to Color.Black.copy(alpha = 0.7f)
                             )
                         )
                     )
-            )
-            // Bottom row
-            Row(
-                modifier = Modifier
-                    .align(Alignment.BottomStart)
-                    .fillMaxWidth()
-                    .padding(6.dp),
-                verticalAlignment = Alignment.CenterVertically
+                    .padding(LocalDimensions.current.smallSpacing)
             ) {
-                Image(
-                    painter = painterResource(R.drawable.ic_baseline_folder_24),
-                    contentDescription = null,
-                    modifier = Modifier.size(20.dp),
-                    colorFilter = ColorFilter.tint(Color.White)
-                )
+                // Bottom row
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Image(
+                        painter = painterResource(R.drawable.ic_baseline_folder_24),
+                        contentDescription = null,
+                        modifier = Modifier.size(LocalDimensions.current.iconSmall),
+                        colorFilter = ColorFilter.tint(Color.White)
+                    )
 
-                Spacer(Modifier.width(6.dp))
+                    Spacer(Modifier.width(LocalDimensions.current.xxsSpacing))
 
-                Text(
-                    text = title,
-                    modifier = Modifier.weight(1f),
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis,
-                    color = Color.White,
-                    style = MaterialTheme.typography.bodyMedium
-                )
+                    Text(
+                        text = title,
+                        modifier = Modifier.weight(1f),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        color = Color.White,
+                        style = MaterialTheme.typography.bodyMedium
+                    )
 
-                Spacer(Modifier.width(6.dp))
+                    Spacer(Modifier.width(LocalDimensions.current.xxsSpacing))
 
-                Text(
-                    text = count.toString(),
-                    color = Color.White,
-                    style = MaterialTheme.typography.bodyMedium
-                )
+                    Text(
+                        text = count.toString(),
+                        color = Color.White,
+                        style = MaterialTheme.typography.bodyMedium
+                    )
+                }
             }
         }
     }
@@ -156,8 +155,11 @@ fun MediaPickerItemCell(
 
     Box(
         modifier = modifier
-            .padding(end = 2.dp, bottom = 2.dp)
             .aspectRatio(1f)
+            .border(
+                width = LocalDimensions.current.borderStroke,
+                color = Color.White.copy(alpha = 0.20f)
+            )
             .combinedClickable(
                 onClick = {
                     if (selected.isEmpty() && !forcedMultiSelect) {
@@ -192,29 +194,20 @@ fun MediaPickerItemCell(
             contentScale = ContentScale.Crop
         )
 
-        // Border overlay (replaces @drawable/mediapicker_item_border_dark View)
-        Box(
-            Modifier
-                .matchParentSize()
-                .border(width = 1.dp, color = Color.White.copy(alpha = 0.20f))
-        )
-
         // Play overlay (center) for video
         if (MediaUtil.isVideoType(media.mimeType)) {
             Box(
                 modifier = Modifier
                     .align(Alignment.Center)
-                    .size(36.dp)
+                    .size(LocalDimensions.current.mediaPlayOverlay)
                     .clip(CircleShape)
                     .background(Color.White),
                 contentAlignment = Alignment.Center
             ) {
                 Image(
                     painter = painterResource(R.drawable.triangle_right),
                     contentDescription = null,
-                    modifier = Modifier
-                        .size(width = 15.dp, height = 18.dp)
-                        .padding(start = 2.dp),
+                    modifier = Modifier.size(LocalDimensions.current.iconMedium),
                     colorFilter = ColorFilter.tint(LocalColors.current.accent) // match @color/core_blue-ish
                 )
             }
@@ -234,9 +227,9 @@ fun MediaPickerItemCell(
             Box(
                 modifier = Modifier
                     .align(Alignment.TopEnd)
-                    .padding(6.dp)
+                    .padding(LocalDimensions.current.xxsSpacing)
             ) {
-                IndicatorOff(size = dimensionResource(R.dimen.small_radial_size))
+                IndicatorOff(size = LocalDimensions.current.smallRadius)
             }
         }
 
@@ -245,10 +238,10 @@ fun MediaPickerItemCell(
             Box(
                 modifier = Modifier
                     .align(Alignment.TopEnd)
-                    .padding(6.dp),
+                    .padding(LocalDimensions.current.xxsSpacing),
                 contentAlignment = Alignment.Center
             ) {
-                IndicatorOn(size = dimensionResource(R.dimen.small_radial_size))
+                IndicatorOn(size = LocalDimensions.current.smallRadius)
 
                 Text(
                     text = (selectedIndex + 1).toString(),
@@ -268,7 +261,7 @@ private fun IndicatorOff(size: Dp, modifier: Modifier = Modifier) {
             .size(size)
             .clip(CircleShape)
             .border(
-                width = 1.dp,
+                width = LocalDimensions.current.borderStroke,
                 color = LocalColors.current.text,
                 shape = CircleShape
             )
diff --git a/app/src/main/java/org/thoughtcrime/securesms/mediasend/compose/MediaPickerFolderScreen.kt b/app/src/main/java/org/thoughtcrime/securesms/mediasend/compose/MediaPickerFolderScreen.kt
@@ -2,6 +2,7 @@ package org.thoughtcrime.securesms.mediasend.compose
 
 import android.annotation.SuppressLint
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
@@ -29,13 +30,13 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.fragment.app.FragmentActivity
-import androidx.lifecycle.viewmodel.compose.viewModel
 import network.loki.messenger.R
 import org.thoughtcrime.securesms.conversation.v2.utilities.AttachmentManager
 import org.thoughtcrime.securesms.mediasend.MediaFolder
 import org.thoughtcrime.securesms.mediasend.MediaSendViewModel
 import org.thoughtcrime.securesms.ui.components.BackAppBar
 import org.thoughtcrime.securesms.ui.theme.LocalColors
+import org.thoughtcrime.securesms.ui.theme.LocalDimensions
 
 @Composable
 fun MediaPickerFolderScreen(
@@ -111,14 +112,19 @@ private fun MediaPickerFolder(
                 columns = GridCells.Fixed(columns),
                 modifier = Modifier
                     .fillMaxSize()
-                    .background(LocalColors.current.background)
+                    .background(LocalColors.current.background),
+                horizontalArrangement = Arrangement.spacedBy(LocalDimensions.current.mediaItemGridSpacing),
+                verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.mediaItemGridSpacing)
             ) {
-                items(folders) { folder ->
+                items(
+                    items = folders,
+                    key = { folder -> folder.bucketId }
+                ) { folder ->
                     MediaFolderCell(
                         title = folder.title,
                         count = folder.itemCount,
                         thumbnailUri = folder.thumbnailUri,
-                        onClick = { onFolderClick(folder) }
+                        onClick = { onFolderClick(folder) },
                     )
                 }
             }
diff --git a/app/src/main/java/org/thoughtcrime/securesms/mediasend/compose/MediaPickerItemScreen.kt b/app/src/main/java/org/thoughtcrime/securesms/mediasend/compose/MediaPickerItemScreen.kt
@@ -2,6 +2,7 @@ package org.thoughtcrime.securesms.mediasend.compose
 
 import android.widget.Toast
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
@@ -30,6 +31,7 @@ import org.thoughtcrime.securesms.mediasend.Media.Companion.ALL_MEDIA_BUCKET_ID
 import org.thoughtcrime.securesms.mediasend.MediaSendViewModel
 import org.thoughtcrime.securesms.ui.components.BackAppBar
 import org.thoughtcrime.securesms.ui.theme.LocalColors
+import org.thoughtcrime.securesms.ui.theme.LocalDimensions
 
 @Composable
 fun MediaPickerItemScreen(
@@ -85,8 +87,7 @@ private fun MediaPickerItem(
 ) {
 
     val context = LocalContext.current.applicationContext
-    // spanCount = screenWidth / itemWidth (same as fragment)
-    val itemWidth = dimensionResource(R.dimen.media_picker_item_width)
+    val itemWidth = LocalDimensions.current.mediaPickerItemWidth
     val screenWidth = LocalConfiguration.current.screenWidthDp.dp
     val columns = maxOf(1, (screenWidth / itemWidth).toInt())
 
@@ -118,7 +119,9 @@ private fun MediaPickerItem(
             modifier = Modifier
                 .padding(padding)
                 .fillMaxSize()
-                .background(LocalColors.current.background)
+                .background(LocalColors.current.background),
+            horizontalArrangement = Arrangement.spacedBy(LocalDimensions.current.mediaItemGridSpacing),
+            verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.mediaItemGridSpacing)
         ) {
             items(media, key = { it.uri }) { item ->
                 MediaPickerItemCell(
diff --git a/app/src/main/java/org/thoughtcrime/securesms/ui/theme/Dimensions.kt b/app/src/main/java/org/thoughtcrime/securesms/ui/theme/Dimensions.kt
@@ -52,5 +52,11 @@ data class Dimensions(
     val minContentSize: Dp = 80.dp,
     val maxContentSize: Dp = 520.dp,
     val minContentSizeMedium: Dp = 160.dp,
-    val maxContentSizeMedium: Dp = 620.dp
+    val maxContentSizeMedium: Dp = 620.dp,
+
+    val mediaPickerItemWidth : Dp = 85.dp,
+    val mediaItemGridSpacing : Dp = 2.dp,
+    val mediaPlayOverlay : Dp = 36.dp,
+
+    val smallRadius : Dp = 26.dp
 )
