feat(staking): AND-6802 summary sheet extra info (#4181)

blockchain · Dec 2, 2022 · 558ba61 · 558ba61
1 parent 529cb16
commit 558ba61
Show file tree

Hide file tree

Showing 5 changed files with 359 additions and 178 deletions.
diff --git a/componentlib/src/main/java/com/blockchain/componentlib/alert/SnackbarAlert.kt b/componentlib/src/main/java/com/blockchain/componentlib/alert/SnackbarAlert.kt
@@ -4,19 +4,17 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.intl.Locale
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.toUpperCase
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -61,44 +59,42 @@ fun SnackbarAlert(
         modifier = Modifier
             .fillMaxWidth()
             .background(backgroundColour)
-            .padding(horizontal = dimensionResource(R.dimen.medium_spacing), vertical = 14.dp),
-        horizontalArrangement = if (icon != null) {
-            Arrangement.Start
-        } else {
-            Arrangement.SpaceBetween
-        }
+            .padding(horizontal = AppTheme.dimensions.smallSpacing, vertical = 14.dp),
     ) {
 
         icon?.let {
             Image(
                 modifier = Modifier
                     .align(alignment = Alignment.CenterVertically)
-                    .padding(end = dimensionResource(R.dimen.medium_spacing)),
+                    .padding(
+                        end = AppTheme.dimensions.verySmallSpacing
+                    ),
                 painter = painterResource(id = icon),
                 contentDescription = null
             )
         }
 
         Text(
             text = message,
-            modifier = Modifier.align(alignment = Alignment.CenterVertically),
+            modifier = Modifier
+                .align(alignment = Alignment.CenterVertically)
+                .weight(1f),
             style = AppTheme.typography.paragraph1,
+            textAlign = TextAlign.Start,
             color = textColour
         )
 
         if (actionLabel.isNotEmpty()) {
-            Spacer(
-                modifier = Modifier.weight(1f)
-            )
             Text(
                 text = actionLabel.toUpperCase(Locale.current),
                 modifier = Modifier
                     .align(alignment = Alignment.CenterVertically)
-                    .padding(start = dimensionResource(R.dimen.standard_spacing))
+                    .weight(0.3f)
                     .clickable {
                         onActionClicked()
                     },
                 style = AppTheme.typography.paragraph2,
+                textAlign = TextAlign.End,
                 color = Blue400,
             )
         }
@@ -128,6 +124,21 @@ fun Snackbar_withAction() {
     }
 }
 
+@Preview
+@Composable
+fun Snackbar_withAction_LongMessage() {
+    AppTheme {
+        AppSurface {
+            SnackbarAlert(
+                message = "Snackbar messageSnackbar messageSnackbar message" +
+                    "Snackbar messageSnackbar messageSnackbar messageSnackbar messageSnackbar" +
+                    " message",
+                actionLabel = "action"
+            )
+        }
+    }
+}
+
 @Preview
 @Composable
 fun Snackbar_error_withAction() {

diff --git a/componentlib/src/main/java/com/blockchain/componentlib/sheets/SheetHeader.kt b/componentlib/src/main/java/com/blockchain/componentlib/sheets/SheetHeader.kt
@@ -46,7 +46,7 @@ fun SheetHeader(
         )
         Column {
             Row(modifier = Modifier.fillMaxWidth()) {
-                Spacer(Modifier.width(dimensionResource(R.dimen.standard_spacing)))
+                Spacer(Modifier.width(AppTheme.dimensions.smallSpacing))
 
                 if (startImageResource != ImageResource.None) {
                     Image(
@@ -55,7 +55,7 @@ fun SheetHeader(
                             .padding(top = dimensionResource(R.dimen.standard_spacing))
                             .size(28.dp)
                     )
-                    Spacer(Modifier.width(8.dp))
+                    Spacer(Modifier.width(AppTheme.dimensions.tinySpacing))
                 }
 
                 SheetHeaderTitle(
@@ -74,7 +74,7 @@ fun SheetHeader(
                     backPressContentDescription = closePressContentDescription,
                     modifier = Modifier.padding(
                         top = dimensionResource(R.dimen.medium_spacing),
-                        end = dimensionResource(R.dimen.medium_spacing)
+                        end = AppTheme.dimensions.smallSpacing
                     )
                 )
             }

diff --git a/componentlib/src/main/java/com/blockchain/componentlib/tablerow/BalanceTableRow.kt b/componentlib/src/main/java/com/blockchain/componentlib/tablerow/BalanceTableRow.kt
@@ -1,5 +1,6 @@
 package com.blockchain.componentlib.tablerow
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -8,6 +9,7 @@ import androidx.compose.foundation.layout.requiredSizeIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -16,6 +18,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.blockchain.componentlib.R
@@ -35,6 +39,8 @@ fun BalanceTableRow(
     bodyEnd: AnnotatedString? = null,
     startImageResource: ImageResource = ImageResource.None,
     endImageResource: ImageResource = ImageResource.None,
+    postStartTitleImageResource: ImageResource = ImageResource.None,
+    postStartTitleImageResourceOnClick: () -> Unit = {},
     isInlineTags: Boolean = false,
     tags: List<TagViewState> = emptyList(),
     onClick: () -> Unit = {}
@@ -52,13 +58,13 @@ fun BalanceTableRow(
         },
         content = {
             val startPadding = if (startImageResource != ImageResource.None) {
-                dimensionResource(R.dimen.medium_spacing)
+                dimensionResource(R.dimen.small_spacing)
             } else {
                 dimensionResource(R.dimen.zero_spacing)
             }
 
             val endPadding = if (endImageResource != ImageResource.None) {
-                dimensionResource(R.dimen.medium_spacing)
+                dimensionResource(R.dimen.small_spacing)
             } else {
                 dimensionResource(R.dimen.zero_spacing)
             }
@@ -68,12 +74,50 @@ fun BalanceTableRow(
                     .fillMaxWidth()
                     .wrapContentHeight()
             ) {
-                TableRowText(
-                    startText = titleStart,
-                    endText = titleEnd,
-                    textStyle = AppTheme.typography.body2,
-                    textColor = AppTheme.colors.title
-                )
+
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .wrapContentHeight()
+                ) {
+                    Text(
+                        text = titleStart,
+                        style = AppTheme.typography.body2,
+                        modifier = if (postStartTitleImageResource == ImageResource.None) {
+                            Modifier.weight(1f)
+                        } else {
+                            Modifier.wrapContentWidth()
+                        },
+                        textAlign = TextAlign.Start,
+                        color = AppTheme.colors.title,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+
+                    if (postStartTitleImageResource != ImageResource.None) {
+                        Image(
+                            imageResource = postStartTitleImageResource,
+                            modifier = Modifier
+                                .padding(AppTheme.dimensions.smallestSpacing)
+                                .clickable(onClick = postStartTitleImageResourceOnClick)
+                                .size(AppTheme.dimensions.smallSpacing)
+                        )
+                    }
+
+                    if (titleEnd != null) {
+                        Text(
+                            text = titleEnd,
+                            style = AppTheme.typography.body2,
+                            modifier = if (postStartTitleImageResource == ImageResource.None) {
+                                Modifier.wrapContentSize()
+                            } else {
+                                Modifier.weight(1f)
+                            },
+                            textAlign = TextAlign.End,
+                            color = AppTheme.colors.title
+                        )
+                    }
+                }
 
                 Row(
                     modifier = Modifier
@@ -118,15 +162,22 @@ fun BalanceTableRow(
                     modifier = Modifier.requiredSizeIn(
                         maxWidth = dimensionResource(R.dimen.standard_spacing),
                         maxHeight = dimensionResource(R.dimen.standard_spacing),
-                    ),
+                    )
                 )
             }
         },
         contentBottom = {
-            if (!isInlineTags && !tags.isNullOrEmpty()) {
+            if (!isInlineTags && tags.isNotEmpty()) {
                 TagsRow(
                     tags = tags,
-                    modifier = Modifier.padding(top = 8.dp, start = 40.dp)
+                    modifier = Modifier.padding(
+                        top = if (bodyStart != null) {
+                            AppTheme.dimensions.tinySpacing
+                        } else {
+                            0.dp
+                        },
+                        start = AppTheme.dimensions.hugeSpacing
+                    )
                 )
             }
         },
@@ -152,6 +203,24 @@ fun BalanceTableRow_Local_ImageStart() {
     }
 }
 
+@Preview
+@Composable
+fun BalanceTableRow_Local_ImageEnd() {
+    AppTheme {
+        AppSurface {
+            BalanceTableRow(
+                titleStart = buildAnnotatedString { append("Some title here") },
+                bodyStart = buildAnnotatedString { append("Some body here") },
+                onClick = {},
+                endImageResource = ImageResource.Local(
+                    id = R.drawable.ic_blockchain,
+                ),
+                tags = emptyList()
+            )
+        }
+    }
+}
+
 @Preview
 @Composable
 fun BalanceTableRow_Texts() {
@@ -227,3 +296,44 @@ fun BalanceTableRow_TitleStart_Tags_Inline() {
         }
     }
 }
+
+@Preview
+@Composable
+fun BalanceTableRow_TitleStart_Tags_NoBodyStart() {
+    AppTheme {
+        AppSurface {
+            BalanceTableRow(
+                titleStart = buildAnnotatedString { append("Some title here") },
+                titleEnd = buildAnnotatedString { append("100 BTC") },
+                bodyEnd = buildAnnotatedString { append("$100") },
+                onClick = {},
+                tags = listOf(TagViewState("One", TagType.Default()), TagViewState("Two", TagType.Success())),
+                startImageResource = ImageResource.Local(
+                    id = R.drawable.ic_blockchain,
+                ),
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun BalanceTableRow_PostTitleImageResource() {
+    AppTheme {
+        AppSurface {
+            BalanceTableRow(
+                titleStart = buildAnnotatedString { append("Some title here") },
+                titleEnd = buildAnnotatedString { append("100 BTC") },
+                bodyEnd = buildAnnotatedString { append("$100") },
+                onClick = {},
+                tags = listOf(TagViewState("One", TagType.Default()), TagViewState("Two", TagType.Success())),
+                startImageResource = ImageResource.Local(
+                    id = R.drawable.ic_blockchain,
+                ),
+                postStartTitleImageResource = ImageResource.Local(
+                    id = R.drawable.ic_blockchain,
+                ),
+            )
+        }
+    }
+}