Skip to content

Commit 6baaf95

Browse files
mdrlzymdrlzy
authored
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
1 parent ab2057a commit 6baaf95

File tree

12 files changed

+344
-93
lines changed

12 files changed

+344
-93
lines changed

‎app/src/main/java/dev/arkbuilders/rate/presentation/pairalert/AddPairAlertScreen.kt‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,23 @@ package dev.arkbuilders.rate.presentation.pairalert
55
import androidx.compose.foundation.background
66
import androidx.compose.foundation.border
77
import androidx.compose.foundation.clickable
8+
import androidx.compose.foundation.horizontalScroll
89
import androidx.compose.foundation.layout.Arrangement
910
import androidx.compose.foundation.layout.Box
1011
import androidx.compose.foundation.layout.Column
11-
import androidx.compose.foundation.layout.IntrinsicSize
1212
import androidx.compose.foundation.layout.Row
1313
import androidx.compose.foundation.layout.RowScope
14-
import androidx.compose.foundation.layout.defaultMinSize
1514
import androidx.compose.foundation.layout.fillMaxWidth
1615
import androidx.compose.foundation.layout.height
1716
import androidx.compose.foundation.layout.padding
18-
import androidx.compose.foundation.layout.width
1917
import androidx.compose.foundation.rememberScrollState
2018
import androidx.compose.foundation.shape.RoundedCornerShape
21-
import androidx.compose.foundation.text.BasicTextField
22-
import androidx.compose.foundation.text.KeyboardOptions
2319
import androidx.compose.foundation.verticalScroll
2420
import androidx.compose.material3.Card
2521
import androidx.compose.material3.CardDefaults
2622
import androidx.compose.material3.ExperimentalMaterial3Api
2723
import androidx.compose.material3.HorizontalDivider
2824
import androidx.compose.material3.Icon
29-
import androidx.compose.material3.LocalTextStyle
3025
import androidx.compose.material3.Scaffold
3126
import androidx.compose.material3.Text
3227
import androidx.compose.runtime.Composable
@@ -44,7 +39,6 @@ import androidx.compose.ui.platform.LocalContext
4439
import androidx.compose.ui.res.painterResource
4540
import androidx.compose.ui.res.stringResource
4641
import androidx.compose.ui.text.font.FontWeight
47-
import androidx.compose.ui.text.input.KeyboardType
4842
import androidx.compose.ui.unit.IntOffset
4943
import androidx.compose.ui.unit.dp
5044
import androidx.compose.ui.unit.sp
@@ -62,6 +56,7 @@ import dev.arkbuilders.rate.presentation.shared.AppSharedFlowKey
6256
import dev.arkbuilders.rate.presentation.theme.ArkColor
6357
import dev.arkbuilders.rate.presentation.ui.AppButton
6458
import dev.arkbuilders.rate.presentation.ui.AppTopBarBack
59+
import dev.arkbuilders.rate.presentation.ui.ArkLargeTextField
6560
import dev.arkbuilders.rate.presentation.ui.GroupCreateDialog
6661
import dev.arkbuilders.rate.presentation.ui.GroupSelectPopup
6762
import dev.arkbuilders.rate.presentation.ui.NotifyAddedSnackbarVisuals
@@ -392,11 +387,11 @@ private fun EditCondition(
392387
) {
393388
val ctx = LocalContext.current
394389
Column(
395-
modifier = Modifier.padding(top = 48.dp),
390+
modifier = Modifier.padding(top = 48.dp, start = 16.dp, end = 16.dp),
396391
horizontalAlignment = Alignment.CenterHorizontally,
397392
) {
398393
Row(
399-
modifier = Modifier.fillMaxWidth(),
394+
modifier = Modifier.fillMaxWidth().horizontalScroll(rememberScrollState()),
400395
verticalAlignment = Alignment.CenterVertically,
401396
horizontalArrangement = Arrangement.Center,
402397
) {
@@ -478,27 +473,17 @@ private fun EditCondition(
478473
color = ArkColor.TextPrimary,
479474
)
480475
}
481-
BasicTextField(
476+
ArkLargeTextField(
482477
modifier =
483478
Modifier
484-
.width(IntrinsicSize.Min)
485-
.defaultMinSize(minWidth = 20.dp)
479+
.weight(1f, fill = false)
486480
.align(Alignment.CenterVertically),
487481
value =
488482
state.priceOrPercent.fold(
489483
ifLeft = { it },
490484
ifRight = { it },
491485
),
492486
onValueChange = { viewModel.onPriceOrPercentInputChanged(it) },
493-
textStyle =
494-
LocalTextStyle.current.copy(
495-
fontSize = 36.sp,
496-
color = ArkColor.TextPrimary,
497-
fontWeight = FontWeight.SemiBold,
498-
),
499-
keyboardOptions =
500-
KeyboardOptions.Default
501-
.copy(keyboardType = KeyboardType.Number),
502487
)
503488
if (state.priceOrPercent.isLeft()) {
504489
Text(
@@ -520,7 +505,7 @@ private fun EditCondition(
520505
}
521506
}
522507
Row(
523-
modifier = Modifier.padding(top = 24.dp),
508+
modifier = Modifier.padding(top = 24.dp).horizontalScroll(rememberScrollState()),
524509
verticalAlignment = Alignment.CenterVertically,
525510
) {
526511
Text(

‎app/src/main/java/dev/arkbuilders/rate/presentation/pairalert/PairAlertConditionScreen.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ import androidx.compose.foundation.layout.Arrangement
1313
import androidx.compose.foundation.layout.Box
1414
import androidx.compose.foundation.layout.Column
1515
import androidx.compose.foundation.layout.Row
16+
import androidx.compose.foundation.layout.Spacer
1617
import androidx.compose.foundation.layout.fillMaxSize
1718
import androidx.compose.foundation.layout.fillMaxWidth
1819
import androidx.compose.foundation.layout.padding
1920
import androidx.compose.foundation.layout.size
21+
import androidx.compose.foundation.layout.width
2022
import androidx.compose.foundation.lazy.LazyColumn
2123
import androidx.compose.foundation.lazy.items
2224
import androidx.compose.foundation.shape.CircleShape
@@ -347,6 +349,7 @@ private fun PairAlertItem(
347349
}
348350
}
349351
}
352+
Spacer(Modifier.width(8.dp))
350353
Switch(
351354
checked = pairAlert.enabled,
352355
onCheckedChange = { onEnableToggle(pairAlert, it) },

‎app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/AddAssetScreen.kt‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import androidx.compose.ui.layout.onPlaced
3636
import androidx.compose.ui.platform.LocalContext
3737
import androidx.compose.ui.res.painterResource
3838
import androidx.compose.ui.res.stringResource
39+
import androidx.compose.ui.text.TextStyle
3940
import androidx.compose.ui.text.font.FontWeight
4041
import androidx.compose.ui.text.input.KeyboardType
4142
import androidx.compose.ui.tooling.preview.Preview
@@ -59,7 +60,7 @@ import dev.arkbuilders.rate.presentation.shared.AppSharedFlowKey
5960
import dev.arkbuilders.rate.presentation.theme.ArkColor
6061
import dev.arkbuilders.rate.presentation.ui.AppButton
6162
import dev.arkbuilders.rate.presentation.ui.AppTopBarBack
62-
import dev.arkbuilders.rate.presentation.ui.BasicTextFieldPlaceholder
63+
import dev.arkbuilders.rate.presentation.ui.ArkBasicTextField
6364
import dev.arkbuilders.rate.presentation.ui.GroupCreateDialog
6465
import dev.arkbuilders.rate.presentation.ui.GroupSelectPopup
6566
import dev.arkbuilders.rate.presentation.ui.NotifyAddedSnackbarVisuals
@@ -309,14 +310,25 @@ fun InputCurrency(
309310
tint = ArkColor.FGQuinary,
310311
)
311312
}
312-
BasicTextFieldPlaceholder(
313-
modifier = Modifier.padding(start = 12.dp),
313+
ArkBasicTextField(
314+
modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp),
314315
value = amount.value,
315316
onValueChange = { onAssetValueChanged(pos, it) },
316-
placeholder = stringResource(R.string.input_value),
317+
textStyle =
318+
TextStyle.Default.copy(
319+
color = ArkColor.TextPrimary,
320+
fontSize = 16.sp,
321+
),
317322
keyboardOptions =
318323
KeyboardOptions.Default
319324
.copy(keyboardType = KeyboardType.Number),
325+
placeholder = {
326+
Text(
327+
text = stringResource(R.string.input_value),
328+
color = ArkColor.TextPlaceHolder,
329+
fontSize = 16.sp,
330+
)
331+
},
320332
)
321333
}
322334

‎app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/EditAssetScreen.kt‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1+
@file:OptIn(ExperimentalMaterial3Api::class)
2+
13
package dev.arkbuilders.rate.presentation.portfolio
24

35
import androidx.compose.foundation.layout.Box
46
import androidx.compose.foundation.layout.Column
5-
import androidx.compose.foundation.layout.IntrinsicSize
67
import androidx.compose.foundation.layout.PaddingValues
78
import androidx.compose.foundation.layout.Row
89
import androidx.compose.foundation.layout.height
910
import androidx.compose.foundation.layout.padding
1011
import androidx.compose.foundation.layout.size
11-
import androidx.compose.foundation.layout.width
1212
import androidx.compose.foundation.rememberScrollState
13-
import androidx.compose.foundation.text.BasicTextField
14-
import androidx.compose.foundation.text.KeyboardOptions
1513
import androidx.compose.foundation.verticalScroll
1614
import androidx.compose.material3.ButtonDefaults
15+
import androidx.compose.material3.ExperimentalMaterial3Api
1716
import androidx.compose.material3.Icon
1817
import androidx.compose.material3.IconButton
19-
import androidx.compose.material3.LocalTextStyle
2018
import androidx.compose.material3.Scaffold
2119
import androidx.compose.material3.Text
2220
import androidx.compose.material3.TextButton
@@ -30,7 +28,6 @@ import androidx.compose.ui.Modifier
3028
import androidx.compose.ui.res.painterResource
3129
import androidx.compose.ui.res.stringResource
3230
import androidx.compose.ui.text.font.FontWeight
33-
import androidx.compose.ui.text.input.KeyboardType
3431
import androidx.compose.ui.tooling.preview.Preview
3532
import androidx.compose.ui.unit.dp
3633
import androidx.compose.ui.unit.sp
@@ -47,6 +44,7 @@ import dev.arkbuilders.rate.presentation.shared.AppSharedFlowKey
4744
import dev.arkbuilders.rate.presentation.theme.ArkColor
4845
import dev.arkbuilders.rate.presentation.ui.AppHorDiv
4946
import dev.arkbuilders.rate.presentation.ui.AppTopBarBack
47+
import dev.arkbuilders.rate.presentation.ui.ArkLargeTextField
5048
import dev.arkbuilders.rate.presentation.ui.InfoMarketCapitalizationDialog
5149
import dev.arkbuilders.rate.presentation.ui.InfoValueOfCirculatingDialog
5250
import dev.arkbuilders.rate.presentation.ui.LoadingScreen
@@ -112,9 +110,15 @@ private fun Content(
112110
.padding(horizontal = 16.dp)
113111
.verticalScroll(rememberScrollState()),
114112
) {
113+
val title =
114+
if (name.name.isNotEmpty()) {
115+
"${name.name} (${name.code})"
116+
} else {
117+
name.code
118+
}
115119
Text(
116120
modifier = Modifier.padding(top = 32.dp),
117-
text = "${name.name} (${name.code})",
121+
text = title,
118122
color = ArkColor.TextPrimary,
119123
fontWeight = FontWeight.SemiBold,
120124
fontSize = 24.sp,
@@ -124,22 +128,13 @@ private fun Content(
124128
Modifier.padding(top = 32.dp),
125129
verticalAlignment = Alignment.Top,
126130
) {
127-
BasicTextField(
131+
ArkLargeTextField(
128132
modifier =
129133
Modifier
130-
.width(IntrinsicSize.Min)
134+
.weight(1f, fill = false)
131135
.align(Alignment.CenterVertically),
132136
value = value,
133137
onValueChange = { onValueChange(it) },
134-
textStyle =
135-
LocalTextStyle.current.copy(
136-
fontSize = 36.sp,
137-
color = ArkColor.TextPrimary,
138-
fontWeight = FontWeight.SemiBold,
139-
),
140-
keyboardOptions =
141-
KeyboardOptions.Default
142-
.copy(keyboardType = KeyboardType.Number),
143138
)
144139
Text(
145140
modifier =

‎app/src/main/java/dev/arkbuilders/rate/presentation/portfolio/PortfolioScreen.kt‎

Lines changed: 53 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@file:OptIn(ExperimentalFoundationApi::class)
1+
@file:OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
22

33
package dev.arkbuilders.rate.presentation.portfolio
44

@@ -18,6 +18,7 @@ import androidx.compose.foundation.lazy.items
1818
import androidx.compose.foundation.shape.CircleShape
1919
import androidx.compose.material.icons.Icons
2020
import androidx.compose.material.icons.filled.Add
21+
import androidx.compose.material3.ExperimentalMaterial3Api
2122
import androidx.compose.material3.FloatingActionButton
2223
import androidx.compose.material3.Icon
2324
import androidx.compose.material3.Scaffold
@@ -54,6 +55,8 @@ import dev.arkbuilders.rate.presentation.ui.AppHorDiv16
5455
import dev.arkbuilders.rate.presentation.ui.AppSwipeToDismiss
5556
import dev.arkbuilders.rate.presentation.ui.CurrIcon
5657
import dev.arkbuilders.rate.presentation.ui.GroupViewPager
58+
import dev.arkbuilders.rate.presentation.ui.LargeNumberText
59+
import dev.arkbuilders.rate.presentation.ui.LargeNumberTooltipBox
5760
import dev.arkbuilders.rate.presentation.ui.LoadingScreen
5861
import dev.arkbuilders.rate.presentation.ui.NoInternetScreen
5962
import dev.arkbuilders.rate.presentation.ui.NoResult
@@ -239,16 +242,27 @@ private fun GroupPage(
239242
color = ArkColor.TextTertiary,
240243
fontWeight = FontWeight.Medium,
241244
)
242-
Row(modifier = Modifier.padding(top = 8.dp)) {
245+
Row(
246+
modifier =
247+
Modifier
248+
.padding(top = 8.dp, start = 24.dp, end = 24.dp),
249+
) {
250+
LargeNumberTooltipBox(number = total, code = baseCode) {
251+
LargeNumberText(
252+
number = total,
253+
color = ArkColor.TextPrimary,
254+
fontWeight = FontWeight.SemiBold,
255+
fontSize = 36.sp,
256+
)
257+
}
243258
Text(
244-
modifier = Modifier,
245-
text = CurrUtils.prepareToDisplay(total),
246-
color = ArkColor.TextPrimary,
247-
fontWeight = FontWeight.SemiBold,
248-
fontSize = 36.sp,
249-
)
250-
Text(
251-
modifier = Modifier.padding(start = 2.dp, top = 2.dp),
259+
modifier =
260+
Modifier
261+
.padding(
262+
start = 2.dp,
263+
top = 2.dp,
264+
)
265+
.weight(1f, fill = false),
252266
text = CurrUtils.getSymbolOrCode(baseCode),
253267
color = ArkColor.TextPrimary,
254268
fontWeight = FontWeight.SemiBold,
@@ -298,30 +312,48 @@ private fun CurrencyItem(
298312
horizontalArrangement = Arrangement.SpaceBetween,
299313
) {
300314
Text(
315+
modifier = Modifier.padding(end = 8.dp),
301316
text = amount.asset.code,
302317
fontWeight = FontWeight.Medium,
303318
color = ArkColor.TextPrimary,
304319
)
305-
Text(
306-
text = "${CurrUtils.prepareToDisplay(
307-
amount.baseAmount.value,
308-
)} ${amount.baseAmount.code}",
309-
fontWeight = FontWeight.Medium,
310-
color = ArkColor.TextPrimary,
311-
)
320+
LargeNumberTooltipBox(
321+
modifier = Modifier.weight(1f),
322+
number = amount.baseAmount.value,
323+
code = amount.baseAmount.code,
324+
) {
325+
LargeNumberText(
326+
number = amount.baseAmount.value,
327+
code = amount.baseAmount.code,
328+
fontWeight = FontWeight.Medium,
329+
color = ArkColor.TextPrimary,
330+
fontSize = 14.sp,
331+
textAlign = TextAlign.End,
332+
)
333+
}
312334
}
313335
Row(
314336
modifier = Modifier.fillMaxWidth(),
315337
horizontalArrangement = Arrangement.SpaceBetween,
316338
) {
317339
Text(
340+
modifier = Modifier.padding(end = 8.dp),
318341
text = CurrUtils.prepareToDisplay(amount.ratioToBase),
319342
color = ArkColor.TextTertiary,
320343
)
321-
Text(
322-
text = "${CurrUtils.prepareToDisplay(amount.asset.value)} ${amount.asset.code}",
323-
color = ArkColor.TextTertiary,
324-
)
344+
LargeNumberTooltipBox(
345+
modifier = Modifier.weight(1f),
346+
number = amount.asset.value,
347+
code = amount.asset.code,
348+
) {
349+
LargeNumberText(
350+
number = amount.asset.value,
351+
code = amount.asset.code,
352+
color = ArkColor.TextTertiary,
353+
fontSize = 14.sp,
354+
textAlign = TextAlign.End,
355+
)
356+
}
325357
}
326358
}
327359
}

0 commit comments

Comments
 (0)