Fix text overflow

ARK-Builders · Oct 27, 2024 · 9ae6234 · 9ae6234
1 parent ab2057a
commit 9ae6234
Show file tree

Hide file tree

Showing 11 changed files with 338 additions and 91 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
@@ -18,7 +18,6 @@ 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
@@ -62,6 +61,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.ArkBasicTextField
 import dev.arkbuilders.rate.presentation.ui.GroupCreateDialog
 import dev.arkbuilders.rate.presentation.ui.GroupSelectPopup
 import dev.arkbuilders.rate.presentation.ui.NotifyAddedSnackbarVisuals
@@ -392,7 +392,7 @@ 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(
@@ -469,16 +469,7 @@ private fun EditCondition(
                     .padding(top = 24.dp),
             horizontalArrangement = Arrangement.Center,
         ) {
-            if (!state.oneTimeNotRecurrent) {
-                Text(
-                    modifier = Modifier.align(Alignment.CenterVertically),
-                    text = stringResource(R.string.every),
-                    fontSize = 20.sp,
-                    fontWeight = FontWeight.Medium,
-                    color = ArkColor.TextPrimary,
-                )
-            }
-            BasicTextField(
+            ArkBasicTextField(
                 modifier =
                     Modifier
                         .width(IntrinsicSize.Min)
@@ -499,25 +490,38 @@ private fun EditCondition(
                 keyboardOptions =
                     KeyboardOptions.Default
                         .copy(keyboardType = KeyboardType.Number),
+                prefix = {
+                    if (!state.oneTimeNotRecurrent) {
+                        Text(
+                            modifier = Modifier.align(Alignment.CenterVertically),
+                            text = stringResource(R.string.every),
+                            fontSize = 20.sp,
+                            fontWeight = FontWeight.Medium,
+                            color = ArkColor.TextPrimary,
+                        )
+                    }
+                },
+                suffix = {
+                    if (state.priceOrPercent.isLeft()) {
+                        Text(
+                            modifier = Modifier.align(Alignment.Top),
+                            text = CurrUtils.getSymbolOrCode(state.baseCode),
+                            fontSize = 20.sp,
+                            fontWeight = FontWeight.Medium,
+                            color = ArkColor.TextPrimary,
+                        )
+                    }
+                    if (state.priceOrPercent.isRight()) {
+                        Text(
+                            modifier = Modifier.align(Alignment.Top),
+                            text = "%",
+                            fontSize = 36.sp,
+                            fontWeight = FontWeight.SemiBold,
+                            color = ArkColor.TextPrimary,
+                        )
+                    }
+                },
             )
-            if (state.priceOrPercent.isLeft()) {
-                Text(
-                    modifier = Modifier.align(Alignment.Top),
-                    text = CurrUtils.getSymbolOrCode(state.baseCode),
-                    fontSize = 20.sp,
-                    fontWeight = FontWeight.Medium,
-                    color = ArkColor.TextPrimary,
-                )
-            }
-            if (state.priceOrPercent.isRight()) {
-                Text(
-                    modifier = Modifier.align(Alignment.Top),
-                    text = "%",
-                    fontSize = 36.sp,
-                    fontWeight = FontWeight.SemiBold,
-                    color = ArkColor.TextPrimary,
-                )
-            }
         }
         Row(
             modifier = Modifier.padding(top = 24.dp),

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(
+            ArkBasicTextField(
                 modifier = Modifier.padding(start = 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,3 +1,5 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package dev.arkbuilders.rate.presentation.portfolio
 
 import androidx.compose.foundation.layout.Box
@@ -10,10 +12,10 @@ 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
@@ -47,6 +49,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.ArkBasicTextField
 import dev.arkbuilders.rate.presentation.ui.InfoMarketCapitalizationDialog
 import dev.arkbuilders.rate.presentation.ui.InfoValueOfCirculatingDialog
 import dev.arkbuilders.rate.presentation.ui.LoadingScreen
@@ -112,9 +115,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,7 +133,7 @@ private fun Content(
             Modifier.padding(top = 32.dp),
             verticalAlignment = Alignment.Top,
         ) {
-            BasicTextField(
+            ArkBasicTextField(
                 modifier =
                     Modifier
                         .width(IntrinsicSize.Min)
@@ -140,16 +149,17 @@ private fun Content(
                 keyboardOptions =
                     KeyboardOptions.Default
                         .copy(keyboardType = KeyboardType.Number),
-            )
-            Text(
-                modifier =
-                    Modifier
-                        .padding(start = 2.dp, top = 2.dp)
-                        .align(Alignment.Top),
-                text = CurrUtils.getSymbolOrCode(name.code),
-                fontSize = 20.sp,
-                fontWeight = FontWeight.Medium,
-                color = ArkColor.TextPrimary,
+                suffix = {
+                    Text(
+                        modifier =
+                            Modifier
+                                .padding(start = 2.dp, top = 2.dp),
+                        text = CurrUtils.getSymbolOrCode(name.code),
+                        fontSize = 20.sp,
+                        fontWeight = FontWeight.Medium,
+                        color = ArkColor.TextPrimary,
+                    )
+                },
             )
         }
         TextButton(

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,
+                    )
+                }
             }
         }
     }