Fix text overflow (#129)

* Fix text overflow * LargeTextField: Use weight(1f, fill = false) instead of suffix and prefix * remove suffix and prefix from ArkBasicTextField * Add end padding to ArkBasicTextField * AddPairAlertScreen: add horizontal scroll to text
ARK-Builders · Oct 31, 2024 · 6baaf95 · 6baaf95
1 parent ab2057a
commit 6baaf95
Show file tree

Hide file tree

Showing 12 changed files with 344 additions and 93 deletions.
diff --git a/app/src/main/java/dev/arkbuilders/rate/presentation/pairalert/AddPairAlertScreen.kt b/app/src/main/java/dev/arkbuilders/rate/presentation/pairalert/AddPairAlertScreen.kt
@@ -5,28 +5,23 @@ package dev.arkbuilders.rate.presentation.pairalert
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.text.BasicTextField
-import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
-import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -44,7 +39,6 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -62,6 +56,7 @@ import dev.arkbuilders.rate.presentation.shared.AppSharedFlowKey
 import dev.arkbuilders.rate.presentation.theme.ArkColor
 import dev.arkbuilders.rate.presentation.ui.AppButton
 import dev.arkbuilders.rate.presentation.ui.AppTopBarBack
+import dev.arkbuilders.rate.presentation.ui.ArkLargeTextField
 import dev.arkbuilders.rate.presentation.ui.GroupCreateDialog
 import dev.arkbuilders.rate.presentation.ui.GroupSelectPopup
 import dev.arkbuilders.rate.presentation.ui.NotifyAddedSnackbarVisuals
@@ -392,11 +387,11 @@ private fun EditCondition(
 ) {
     val ctx = LocalContext.current
     Column(
-        modifier = Modifier.padding(top = 48.dp),
+        modifier = Modifier.padding(top = 48.dp, start = 16.dp, end = 16.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Row(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier.fillMaxWidth().horizontalScroll(rememberScrollState()),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.Center,
         ) {
@@ -478,27 +473,17 @@ private fun EditCondition(
                     color = ArkColor.TextPrimary,
                 )
             }
-            BasicTextField(
+            ArkLargeTextField(
                 modifier =
                     Modifier
-                        .width(IntrinsicSize.Min)
-                        .defaultMinSize(minWidth = 20.dp)
+                        .weight(1f, fill = false)
                         .align(Alignment.CenterVertically),
                 value =
                     state.priceOrPercent.fold(
                         ifLeft = { it },
                         ifRight = { it },
                     ),
                 onValueChange = { viewModel.onPriceOrPercentInputChanged(it) },
-                textStyle =
-                    LocalTextStyle.current.copy(
-                        fontSize = 36.sp,
-                        color = ArkColor.TextPrimary,
-                        fontWeight = FontWeight.SemiBold,
-                    ),
-                keyboardOptions =
-                    KeyboardOptions.Default
-                        .copy(keyboardType = KeyboardType.Number),
             )
             if (state.priceOrPercent.isLeft()) {
                 Text(
@@ -520,7 +505,7 @@ private fun EditCondition(
             }
         }
         Row(
-            modifier = Modifier.padding(top = 24.dp),
+            modifier = Modifier.padding(top = 24.dp).horizontalScroll(rememberScrollState()),
             verticalAlignment = Alignment.CenterVertically,
         ) {
             Text(

diff --git a/app/src/main/java/dev/arkbuilders/rate/presentation/pairalert/PairAlertConditionScreen.kt b/app/src/main/java/dev/arkbuilders/rate/presentation/pairalert/PairAlertConditionScreen.kt
@@ -13,10 +13,12 @@ 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.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
@@ -347,6 +349,7 @@ private fun PairAlertItem(
                 }
             }
         }
+        Spacer(Modifier.width(8.dp))
         Switch(
             checked = pairAlert.enabled,
             onCheckedChange = { onEnableToggle(pairAlert, it) },

diff --git a/app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/AddAssetScreen.kt b/app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/AddAssetScreen.kt
@@ -36,6 +36,7 @@ import androidx.compose.ui.layout.onPlaced
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
@@ -59,7 +60,7 @@ import dev.arkbuilders.rate.presentation.shared.AppSharedFlowKey
 import dev.arkbuilders.rate.presentation.theme.ArkColor
 import dev.arkbuilders.rate.presentation.ui.AppButton
 import dev.arkbuilders.rate.presentation.ui.AppTopBarBack
-import dev.arkbuilders.rate.presentation.ui.BasicTextFieldPlaceholder
+import dev.arkbuilders.rate.presentation.ui.ArkBasicTextField
 import dev.arkbuilders.rate.presentation.ui.GroupCreateDialog
 import dev.arkbuilders.rate.presentation.ui.GroupSelectPopup
 import dev.arkbuilders.rate.presentation.ui.NotifyAddedSnackbarVisuals
@@ -309,14 +310,25 @@ fun InputCurrency(
                     tint = ArkColor.FGQuinary,
                 )
             }
-            BasicTextFieldPlaceholder(
-                modifier = Modifier.padding(start = 12.dp),
+            ArkBasicTextField(
+                modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp),
                 value = amount.value,
                 onValueChange = { onAssetValueChanged(pos, it) },
-                placeholder = stringResource(R.string.input_value),
+                textStyle =
+                    TextStyle.Default.copy(
+                        color = ArkColor.TextPrimary,
+                        fontSize = 16.sp,
+                    ),
                 keyboardOptions =
                     KeyboardOptions.Default
                         .copy(keyboardType = KeyboardType.Number),
+                placeholder = {
+                    Text(
+                        text = stringResource(R.string.input_value),
+                        color = ArkColor.TextPlaceHolder,
+                        fontSize = 16.sp,
+                    )
+                },
             )
         }
 

diff --git a/app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/EditAssetScreen.kt b/app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/EditAssetScreen.kt
@@ -1,22 +1,20 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package dev.arkbuilders.rate.presentation.portfolio
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 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.rememberScrollState
-import androidx.compose.foundation.text.BasicTextField
-import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -30,7 +28,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -47,6 +44,7 @@ import dev.arkbuilders.rate.presentation.shared.AppSharedFlowKey
 import dev.arkbuilders.rate.presentation.theme.ArkColor
 import dev.arkbuilders.rate.presentation.ui.AppHorDiv
 import dev.arkbuilders.rate.presentation.ui.AppTopBarBack
+import dev.arkbuilders.rate.presentation.ui.ArkLargeTextField
 import dev.arkbuilders.rate.presentation.ui.InfoMarketCapitalizationDialog
 import dev.arkbuilders.rate.presentation.ui.InfoValueOfCirculatingDialog
 import dev.arkbuilders.rate.presentation.ui.LoadingScreen
@@ -112,9 +110,15 @@ private fun Content(
                 .padding(horizontal = 16.dp)
                 .verticalScroll(rememberScrollState()),
     ) {
+        val title =
+            if (name.name.isNotEmpty()) {
+                "${name.name} (${name.code})"
+            } else {
+                name.code
+            }
         Text(
             modifier = Modifier.padding(top = 32.dp),
-            text = "${name.name} (${name.code})",
+            text = title,
             color = ArkColor.TextPrimary,
             fontWeight = FontWeight.SemiBold,
             fontSize = 24.sp,
@@ -124,22 +128,13 @@ private fun Content(
             Modifier.padding(top = 32.dp),
             verticalAlignment = Alignment.Top,
         ) {
-            BasicTextField(
+            ArkLargeTextField(
                 modifier =
                     Modifier
-                        .width(IntrinsicSize.Min)
+                        .weight(1f, fill = false)
                         .align(Alignment.CenterVertically),
                 value = value,
                 onValueChange = { onValueChange(it) },
-                textStyle =
-                    LocalTextStyle.current.copy(
-                        fontSize = 36.sp,
-                        color = ArkColor.TextPrimary,
-                        fontWeight = FontWeight.SemiBold,
-                    ),
-                keyboardOptions =
-                    KeyboardOptions.Default
-                        .copy(keyboardType = KeyboardType.Number),
             )
             Text(
                 modifier =

diff --git a/app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/PortfolioScreen.kt b/app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/PortfolioScreen.kt
@@ -1,4 +1,4 @@
-@file:OptIn(ExperimentalFoundationApi::class)
+@file:OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
 
 package dev.arkbuilders.rate.presentation.portfolio
 
@@ -18,6 +18,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Scaffold
@@ -54,6 +55,8 @@ import dev.arkbuilders.rate.presentation.ui.AppHorDiv16
 import dev.arkbuilders.rate.presentation.ui.AppSwipeToDismiss
 import dev.arkbuilders.rate.presentation.ui.CurrIcon
 import dev.arkbuilders.rate.presentation.ui.GroupViewPager
+import dev.arkbuilders.rate.presentation.ui.LargeNumberText
+import dev.arkbuilders.rate.presentation.ui.LargeNumberTooltipBox
 import dev.arkbuilders.rate.presentation.ui.LoadingScreen
 import dev.arkbuilders.rate.presentation.ui.NoInternetScreen
 import dev.arkbuilders.rate.presentation.ui.NoResult
@@ -239,16 +242,27 @@ private fun GroupPage(
                         color = ArkColor.TextTertiary,
                         fontWeight = FontWeight.Medium,
                     )
-                    Row(modifier = Modifier.padding(top = 8.dp)) {
+                    Row(
+                        modifier =
+                            Modifier
+                                .padding(top = 8.dp, start = 24.dp, end = 24.dp),
+                    ) {
+                        LargeNumberTooltipBox(number = total, code = baseCode) {
+                            LargeNumberText(
+                                number = total,
+                                color = ArkColor.TextPrimary,
+                                fontWeight = FontWeight.SemiBold,
+                                fontSize = 36.sp,
+                            )
+                        }
                         Text(
-                            modifier = Modifier,
-                            text = CurrUtils.prepareToDisplay(total),
-                            color = ArkColor.TextPrimary,
-                            fontWeight = FontWeight.SemiBold,
-                            fontSize = 36.sp,
-                        )
-                        Text(
-                            modifier = Modifier.padding(start = 2.dp, top = 2.dp),
+                            modifier =
+                                Modifier
+                                    .padding(
+                                        start = 2.dp,
+                                        top = 2.dp,
+                                    )
+                                    .weight(1f, fill = false),
                             text = CurrUtils.getSymbolOrCode(baseCode),
                             color = ArkColor.TextPrimary,
                             fontWeight = FontWeight.SemiBold,
@@ -298,30 +312,48 @@ private fun CurrencyItem(
                 horizontalArrangement = Arrangement.SpaceBetween,
             ) {
                 Text(
+                    modifier = Modifier.padding(end = 8.dp),
                     text = amount.asset.code,
                     fontWeight = FontWeight.Medium,
                     color = ArkColor.TextPrimary,
                 )
-                Text(
-                    text = "${CurrUtils.prepareToDisplay(
-                        amount.baseAmount.value,
-                    )} ${amount.baseAmount.code}",
-                    fontWeight = FontWeight.Medium,
-                    color = ArkColor.TextPrimary,
-                )
+                LargeNumberTooltipBox(
+                    modifier = Modifier.weight(1f),
+                    number = amount.baseAmount.value,
+                    code = amount.baseAmount.code,
+                ) {
+                    LargeNumberText(
+                        number = amount.baseAmount.value,
+                        code = amount.baseAmount.code,
+                        fontWeight = FontWeight.Medium,
+                        color = ArkColor.TextPrimary,
+                        fontSize = 14.sp,
+                        textAlign = TextAlign.End,
+                    )
+                }
             }
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.SpaceBetween,
             ) {
                 Text(
+                    modifier = Modifier.padding(end = 8.dp),
                     text = CurrUtils.prepareToDisplay(amount.ratioToBase),
                     color = ArkColor.TextTertiary,
                 )
-                Text(
-                    text = "${CurrUtils.prepareToDisplay(amount.asset.value)} ${amount.asset.code}",
-                    color = ArkColor.TextTertiary,
-                )
+                LargeNumberTooltipBox(
+                    modifier = Modifier.weight(1f),
+                    number = amount.asset.value,
+                    code = amount.asset.code,
+                ) {
+                    LargeNumberText(
+                        number = amount.asset.value,
+                        code = amount.asset.code,
+                        color = ArkColor.TextTertiary,
+                        fontSize = 14.sp,
+                        textAlign = TextAlign.End,
+                    )
+                }
             }
         }
     }