Skip to content

Commit 858ef0c

Browse files
committed
style(bills): apply font scaling to text on bills
Signed-off-by: Brandon McAnsh <git@bmcreations.dev>
1 parent ad3ee99 commit 858ef0c

File tree

2 files changed

+54
-12
lines changed

2 files changed

+54
-12
lines changed

apps/flipcash/shared/bills/src/main/kotlin/com/flipcash/app/bills/BillAmount.kt

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,22 @@ import androidx.compose.runtime.Composable
77
import androidx.compose.ui.Modifier
88
import androidx.compose.ui.draw.rotate
99
import androidx.compose.ui.layout.layout
10+
import androidx.compose.ui.text.TextStyle
11+
import androidx.compose.ui.text.font.FontWeight
1012
import androidx.compose.ui.tooling.preview.Preview
13+
import androidx.compose.ui.unit.min
14+
import androidx.compose.ui.unit.sp
1115
import com.flipcash.shared.bills.R
1216
import com.getcode.theme.CodeTheme
1317
import com.getcode.ui.utils.nonScaledSp
1418

1519
@Composable
16-
@Preview
17-
internal fun BillAmount(modifier: Modifier = Modifier, text: String = "", flag: Int? = R.drawable.ic_flag_us) {
20+
internal fun BillAmount(
21+
modifier: Modifier = Modifier,
22+
text: String = "",
23+
flag: Int? = R.drawable.ic_flag_us,
24+
textStyle: TextStyle = CodeTheme.typography.displayLarge.copy(fontSize = 40.nonScaledSp)
25+
) {
1826
Box(modifier = modifier) {
1927
Row(
2028
modifier = Modifier
@@ -35,9 +43,7 @@ internal fun BillAmount(modifier: Modifier = Modifier, text: String = "", flag:
3543
// }
3644
Text(
3745
text = text,
38-
style = CodeTheme.typography.displayLarge.copy(
39-
fontSize = 40.nonScaledSp
40-
),
46+
style = textStyle,
4147
color = CodeTheme.colors.onBackground
4248
)
4349
}

apps/flipcash/shared/bills/src/main/kotlin/com/flipcash/app/bills/CashBill.kt

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,17 @@ import androidx.compose.ui.graphics.drawscope.DrawScope
4646
import androidx.compose.ui.layout.ContentScale
4747
import androidx.compose.ui.platform.LocalResources
4848
import androidx.compose.ui.res.painterResource
49+
import androidx.compose.ui.text.TextStyle
50+
import androidx.compose.ui.text.font.FontWeight
4951
import androidx.compose.ui.unit.Dp
5052
import androidx.compose.ui.unit.DpOffset
5153
import androidx.compose.ui.unit.DpSize
5254
import androidx.compose.ui.unit.IntOffset
5355
import androidx.compose.ui.unit.IntSize
56+
import androidx.compose.ui.unit.TextUnit
5457
import androidx.compose.ui.unit.dp
5558
import androidx.compose.ui.unit.isSpecified
59+
import androidx.compose.ui.unit.sp
5660
import com.flipcash.app.core.money.formatted
5761
import com.flipcash.shared.bills.R
5862
import com.getcode.opencode.compose.LocalExchange
@@ -105,6 +109,7 @@ private object CashBillDefaults {
105109
endY = endY
106110
)
107111
}
112+
108113
is BillBackground.Solid -> {
109114
val color = hexToColor(background.colorHex)
110115
return Brush.verticalGradient(
@@ -141,6 +146,7 @@ private object CashBillDefaults {
141146
colors = listOf(color, color)
142147
)
143148
}
149+
144150
Punch.Code -> {
145151
val bgColors = if (bg.colors.size == 3) {
146152
bg.colors.slice(listOf(0, 2))
@@ -172,6 +178,7 @@ private object CashBillDefaults {
172178
colors = listOf(color, color)
173179
)
174180
}
181+
175182
Punch.Code -> {
176183
val color = deriveTargetColor(
177184
sourceColor = hexToColor(bg.colorHex),
@@ -249,6 +256,34 @@ private class CashBillGeometry(width: Dp, height: Dp) : Geometry(width, height)
249256
x = (size.width.value * 0.5f),
250257
y = (size.height.value * 0.9f)
251258
)
259+
260+
private val isCompressed: Boolean
261+
get() = size.width < 300.dp
262+
263+
private val isMini: Boolean
264+
get() = size.width < 200.dp
265+
266+
val mintFontSize: TextUnit
267+
@Composable get() = if (isCompressed) {
268+
if (isMini) {
269+
4.sp
270+
} else {
271+
7.sp
272+
}
273+
} else 8.nonScaledSp
274+
275+
val amountTextStyle: TextStyle
276+
@Composable get() = if (isCompressed) {
277+
CodeTheme.typography.displayLarge.copy(
278+
fontWeight = FontWeight.W600,
279+
fontSize = if (isMini) 30.sp else 35.sp
280+
)
281+
} else {
282+
CodeTheme.typography.displayLarge.copy(
283+
fontWeight = FontWeight.W600
284+
)
285+
}
286+
252287
}
253288

254289
@SuppressLint("UnusedBoxWithConstraintsScope")
@@ -341,25 +376,26 @@ internal fun CashBill(
341376
// Security strip
342377
SecurityStrip(geometry = geometry, token = token)
343378

344-
345379
// Bill Value Top Left
346380
BillAmount(
347-
modifier = Modifier.Companion
381+
modifier = Modifier
348382
.align(Alignment.TopStart)
349383
.padding(top = geometry.topStripHeight + geometry.securityStripSize.height * 0.5f)
350384
.padding(start = geometry.valuePadding),
351385
text = amount.formatted(),
352-
flag = exchange.getFlagByCurrency(amount.rate.currency.name)
386+
flag = exchange.getFlagByCurrency(amount.rate.currency.name),
387+
textStyle = geometry.amountTextStyle,
353388
)
354389

355390
// Bill Value Bottom Right
356391
BillAmount(
357-
modifier = Modifier.Companion
392+
modifier = Modifier
358393
.align(Alignment.BottomEnd)
359394
.padding(bottom = geometry.topStripHeight + geometry.securityStripSize.height * 0.5f)
360395
.padding(end = geometry.valuePadding),
361396
text = amount.formatted(),
362-
flag = exchange.getFlagByCurrency(amount.rate.currency.name)
397+
flag = exchange.getFlagByCurrency(amount.rate.currency.name),
398+
textStyle = geometry.amountTextStyle,
363399
)
364400

365401
// Lines
@@ -381,15 +417,15 @@ internal fun CashBill(
381417
Lines(count = 31, spacing = geometry.lineSpacing)
382418
}
383419

384-
Spacer(modifier = Modifier.Companion.weight(1f))
420+
Spacer(modifier = Modifier.weight(1f))
385421

386422
Row(
387423
modifier = Modifier.padding(bottom = geometry.mintPadding)
388424
) {
389425
// Mint
390426
Text(
391427
text = token.address.base58(),
392-
fontSize = 8.nonScaledSp,
428+
fontSize = geometry.mintFontSize,
393429
color = CashBillDefaults.DecorColor,
394430
)
395431
}

0 commit comments

Comments
 (0)