bug-34 :: Fix coin name overflow in coin detail header

RyanKoech · Jul 13, 2023 · 22d824b · 22d824b
1 parent 7949a80
commit 22d824b
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 39 deletions.
diff --git a/...yankoech/krypto/feature_coin_details/presentation/components/success/CoinDetailsHeader.kt b/...yankoech/krypto/feature_coin_details/presentation/components/success/CoinDetailsHeader.kt
@@ -1,7 +1,16 @@
 package com.ryankoech.krypto.feature_coin_details.presentation.components.success
 
-import androidx.compose.foundation.background   
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
@@ -15,29 +24,34 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.ryankoech.krypto.common.presentation.components.CoinImage
 import com.ryankoech.krypto.common.presentation.theme.KryptoTheme
-import com.ryankoech.krypto.common.presentation.util.*
+import com.ryankoech.krypto.common.presentation.util.DisplayCurrency
+import com.ryankoech.krypto.common.presentation.util.getChangeColor
+import com.ryankoech.krypto.common.presentation.util.getFormattedBalance
+import com.ryankoech.krypto.common.presentation.util.getFormattedChange
 import com.ryankoech.krypto.feature_coin_list.data.dto.toCoinEntity
 import com.ryankoech.krypto.feature_coin_list.data.repository.FAKE_COIN_LIST
 import com.ryankoech.krypto.feature_coin_list.domain.entity.Coin
-import java.util.*
+import java.util.Locale
 
 @Composable
 fun CoinDetailsHeader(
-    coin : Coin,
+    coin: Coin,
     modifier: Modifier = Modifier
 ) {
-
     val context = LocalContext.current
 
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .height(IntrinsicSize.Min)
             .background(
                 color = Color.White,
                 shape = RoundedCornerShape(10.dp)
@@ -54,31 +68,28 @@ fun CoinDetailsHeader(
         Column(
             modifier = Modifier
                 .padding(4.dp)
-                .fillMaxHeight()
                 .weight(1.0f),
             verticalArrangement = Arrangement.SpaceBetween
         ) {
-
-            Row(
+            NameBalanceLayout(
                 modifier = Modifier.fillMaxWidth(),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.SpaceBetween
-            ) {
-                Text(
-                    modifier = Modifier
-                        .padding(end = 2.dp),
-                    text = coin.name,
-                    style = MaterialTheme.typography.h3,
-                )
-                Text(
-                    text = getFormattedBalance(
-                        context = context,
-                        balance = coin.price,
-                        displayCurrency = DisplayCurrency.USD
-                    ),
-                    style = MaterialTheme.typography.h4
-                )
-            }
+                nameView = {
+                    Text(
+                        text = coin.name,
+                        style = MaterialTheme.typography.h3,
+                    )
+                },
+                balanceView = {
+                    Text(
+                        text = getFormattedBalance(
+                            context = context,
+                            balance = coin.price,
+                            displayCurrency = DisplayCurrency.USD
+                        ),
+                        textAlign = TextAlign.End,
+                        style = MaterialTheme.typography.h4
+                    )
+                })
 
             Row(
                 modifier = Modifier
@@ -95,17 +106,17 @@ fun CoinDetailsHeader(
                             shape = RoundedCornerShape(3.dp)
                         ),
 
-                ){
-                   Text(
-                       modifier = Modifier
-                           .padding(
-                               vertical = 0.dp,
-                               horizontal = 3.dp
-                           ),
-                       text = coin.marketCapRank.toString(),
-                       style = MaterialTheme.typography.h4,
-                       color = Color.White
-                   )
+                    ) {
+                    Text(
+                        modifier = Modifier
+                            .padding(
+                                vertical = 0.dp,
+                                horizontal = 3.dp
+                            ),
+                        text = coin.marketCapRank.toString(),
+                        style = MaterialTheme.typography.h4,
+                        color = Color.White
+                    )
                 }
                 Text(
                     modifier = Modifier
@@ -134,6 +145,36 @@ fun CoinDetailsHeader(
 
 }
 
+@Composable
+private fun NameBalanceLayout(
+    modifier: Modifier = Modifier,
+    minNameWidth: Dp = 100.dp,
+    nameView: @Composable () -> Unit,
+    balanceView: @Composable () -> Unit,
+) {
+    Layout(
+        modifier = modifier,
+        content = {
+            nameView()
+            balanceView()
+        }
+    ) { measurables, constraints ->
+        val balance = measurables[1].measure(
+            Constraints(
+                0,
+                constraints.maxWidth - minNameWidth.roundToPx()
+            )
+        )
+        val nameWidth = maxOf(minNameWidth.roundToPx(), constraints.maxWidth - balance.width)
+        val name = measurables[0].measure(Constraints.fixedWidth(nameWidth))
+
+        layout(constraints.maxWidth, maxOf(balance.height, name.height)) {
+            name.place(0, 0)
+            balance.place(nameWidth, 0)
+        }
+    }
+}
+
 @Preview(showBackground = true)
 @Composable
 fun CoinDetailsHeaderPreview() {
@@ -143,6 +184,9 @@ fun CoinDetailsHeaderPreview() {
                 .fillMaxSize()
         ) {
             Column {
+                CoinDetailsHeader(
+                    FAKE_COIN_LIST.toCoinEntity().last()
+                )
                 CoinDetailsHeader(
                     FAKE_COIN_LIST.toCoinEntity().first()
                 )

diff --git a/...ain/java/com/ryankoech/krypto/feature_coin_list/data/repository/FakeCoinRepositoryImpl.kt b/...ain/java/com/ryankoech/krypto/feature_coin_list/data/repository/FakeCoinRepositoryImpl.kt
@@ -211,6 +211,34 @@ val FAKE_COIN_LIST = listOf(
         atl_date = "2021-05-19T13:04:37.445Z",
         roi = null,
         last_updated = "2023-01-07T10:57:59.111Z",
+    ),
+    CoinDto(
+        id = "bitcoin-avalanche-bridged-btc-b",
+        symbol = "btc.b",
+        name = "Bitcoin Avalanche Bridged (BTC.b)",
+        image = "https://assets.coingecko.com/coins/images/26115/large/btcb.png?1655921693",
+        current_price = 30602.00,
+        market_cap = 180011907,
+        market_cap_rank = 176,
+        fully_diluted_valuation = 180011907,
+        total_volume = 1726197.0,
+        high_24h = 31085.0,
+        low_24h = 30423.0,
+        price_change_24h = 37.82,
+        price_change_percentage_24h = 0.12374,
+        market_cap_change_24h = -275479.6007090211,
+        market_cap_change_percentage_24h = -0.1528,
+        circulating_supply =  5883.16945376,
+        total_supply = 5883.16945376,
+        max_supply = null,
+        ath = 42442.0,
+        ath_change_percentage = -28.06027,
+        ath_date = "2023-01-16T22:36:24.558Z",
+        atl = 7806.11,
+        atl_change_percentage = 291.13378,
+        atl_date = "2023-03-03T05:01:42.603Z",
+        roi = null,
+        last_updated = "2023-07-12T16:51:07.716Z",
     )
 )