Skip to content

Commit 5c01758

Browse files
bmc08gtbmc08gt
committed
fix: correct visual alignment when using Alignment.CenterVertically
Signed-off-by: Brandon McAnsh <git@bmcreations.dev>
1 parent 6dd5289 commit 5c01758

8 files changed

Lines changed: 203 additions & 55 deletions

File tree

‎apps/flipcash/app/src/main/res/values-v31/themes.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
33

4-
<style name="Theme.Code" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
4+
<style name="Theme.Code" parent="Theme.MaterialComponents.DayNight.NoActionBar">
55
<!-- Primary brand color. -->
66
<item name="colorPrimary">@color/purple_dark</item>
77
<item name="colorPrimaryVariant">@color/purple_light</item>

‎apps/flipcash/app/src/main/res/values/themes.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources xmlns:tools="http://schemas.android.com/tools">
33
<!-- Base application theme. -->
4-
<style name="Theme.Code" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
4+
<style name="Theme.Code" parent="Theme.MaterialComponents.DayNight.NoActionBar">
55
<!-- Primary brand color. -->
66
<item name="colorPrimary">@color/purple_dark</item>
77
<item name="colorPrimaryVariant">@color/purple_light</item>

‎apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/internal/ui/previews/AppBarTitlePreviews.kt‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
package com.flipcash.app.core.internal.ui.previews
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.Devices.PIXEL_8A
5+
import androidx.compose.ui.tooling.preview.Preview
6+
import com.flipcash.app.core.ui.TokenSelectionPill
7+
import com.flipcash.app.theme.FlipcashPreview
8+
import com.getcode.ui.components.AppBarDefaults
9+
import com.getcode.ui.components.AppBarWithTitle
10+
11+
@Preview(showSystemUi = true, device = PIXEL_8A)
12+
@Composable
13+
private fun AppBarTitleOnGivePreview() {
14+
FlipcashPreview(showBackground = true) {
15+
16+
AppBarWithTitle(
17+
isInModal = true,
18+
leftIcon = { AppBarDefaults.UpNavigation() { }},
19+
title = {
20+
TokenSelectionPill(
21+
tokenName = "Test",
22+
tokenImageUrl = "https://flipcash-currency-assets.s3.us-east-1.amazonaws.com/default/icon.jpg",
23+
tokenSymbol = "TEST",
24+
onClick = {}
25+
)
26+
},
27+
rightContents = {
28+
AppBarDefaults.Close { }
29+
}
30+
)
31+
}
32+
}

apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/ButtonPreviews.kt renamed to apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/internal/ui/previews/ButtonPreviews.kt

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
package com.flipcash.app.core.ui
1+
package com.flipcash.app.core.internal.ui.previews
22

3+
import android.R
34
import androidx.compose.foundation.background
45
import androidx.compose.foundation.layout.Arrangement
56
import androidx.compose.foundation.layout.Column
@@ -9,12 +10,12 @@ import androidx.compose.foundation.layout.padding
910
import androidx.compose.runtime.Composable
1011
import androidx.compose.ui.Modifier
1112
import androidx.compose.ui.draw.paint
12-
import androidx.compose.ui.graphics.Color
1313
import androidx.compose.ui.layout.ContentScale
1414
import androidx.compose.ui.res.painterResource
1515
import androidx.compose.ui.tooling.preview.Preview
1616
import androidx.compose.ui.unit.dp
1717
import com.flipcash.app.core.onramp.ui.buildExternalWalletButtonLabel
18+
import com.flipcash.app.core.ui.buildNotifyButtonLabel
1819
import com.flipcash.app.theme.FlipcashPreview
1920
import com.flipcash.services.internal.model.thirdparty.OnRampProvider
2021
import com.getcode.theme.CodeTheme
@@ -164,7 +165,7 @@ private fun CodeButtonPreviewsOnImage() {
164165
modifier = Modifier
165166
.padding(16.dp)
166167
.paint(
167-
painter = painterResource(android.R.drawable.ic_menu_always_landscape_portrait),
168+
painter = painterResource(R.drawable.ic_menu_always_landscape_portrait),
168169
contentScale = ContentScale.Crop
169170
),
170171
verticalArrangement = Arrangement.spacedBy(16.dp)

‎apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/TokenImageWithName.kt‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@ import com.getcode.ui.components.R
2525

2626
@Composable
2727
fun TokenIconWithName(
28-
token: Token,
28+
tokenName: String,
29+
tokenImageUrl: String?,
30+
tokenSymbol: String,
2931
imageSize: Dp,
3032
modifier: Modifier = Modifier,
31-
displayName: (Token) -> String = { it.name },
3233
textStyle: TextStyle = CodeTheme.typography.screenTitle,
3334
textColor: Color = CodeTheme.colors.textMain,
3435
spacing: Dp = 0.dp,
@@ -39,31 +40,67 @@ fun TokenIconWithName(
3940
verticalAlignment = Alignment.CenterVertically
4041
) {
4142
TokenIcon(
42-
token = token,
43+
imageUrl = tokenImageUrl,
44+
symbol = tokenSymbol,
4345
modifier = Modifier.size(imageSize)
4446
)
4547
Text(
46-
text = displayName(token),
48+
text = tokenName,
4749
style = textStyle,
4850
color = textColor,
4951
)
5052
}
5153
}
5254

55+
@Composable
56+
fun TokenIconWithName(
57+
token: Token,
58+
imageSize: Dp,
59+
modifier: Modifier = Modifier,
60+
displayName: (Token) -> String = { it.name },
61+
textStyle: TextStyle = CodeTheme.typography.screenTitle,
62+
textColor: Color = CodeTheme.colors.textMain,
63+
spacing: Dp = 0.dp,
64+
) {
65+
TokenIconWithName(
66+
tokenName = displayName(token),
67+
tokenImageUrl = token.imageUrl,
68+
tokenSymbol = token.symbol,
69+
imageSize = imageSize,
70+
modifier = modifier,
71+
textStyle = textStyle,
72+
textColor = textColor,
73+
spacing = spacing
74+
)
75+
}
76+
5377
@Composable
5478
fun TokenIcon(
5579
token: Token,
56-
modifier: Modifier
80+
modifier: Modifier = Modifier
81+
) {
82+
TokenIcon(
83+
imageUrl = token.imageUrl,
84+
symbol = token.symbol,
85+
modifier = modifier
86+
)
87+
}
88+
89+
@Composable
90+
fun TokenIcon(
91+
imageUrl: String?,
92+
symbol: String,
93+
modifier: Modifier = Modifier,
5794
) {
5895
AsyncImage(
5996
modifier = modifier.clip(CircleShape),
6097
model = ImageRequest.Builder(LocalPlatformContext.current)
61-
.data(token.imageUrl)
98+
.data(imageUrl)
6299
.crossfade(false)
63100
.error(R.drawable.ic_placeholder_user)
64-
.memoryCacheKey(token.symbol)
101+
.memoryCacheKey(symbol)
65102
.memoryCachePolicy(CachePolicy.ENABLED)
66-
.diskCacheKey(token.symbol)
103+
.diskCacheKey(symbol)
67104
.diskCachePolicy(CachePolicy.ENABLED)
68105
.build(),
69106
contentDescription = null,

‎apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/TokenSelectionPill.kt‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
package com.flipcash.app.core.ui
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.foundation.layout.width
9+
import androidx.compose.foundation.layout.wrapContentHeight
10+
import androidx.compose.foundation.shape.CircleShape
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.ui.Alignment
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.draw.clip
15+
import androidx.compose.ui.res.painterResource
16+
import com.getcode.opencode.model.financial.Token
17+
import com.getcode.theme.CodeTheme
18+
import com.getcode.ui.core.R
19+
import com.getcode.ui.core.debugBounds
20+
import com.getcode.ui.core.rememberedClickable
21+
22+
@Composable
23+
fun TokenSelectionPill(token: Token?, onClick: () -> Unit) {
24+
Box(
25+
modifier = Modifier
26+
.fillMaxWidth()
27+
.wrapContentHeight(),
28+
contentAlignment = Alignment.Center
29+
) {
30+
Row(
31+
modifier = Modifier
32+
.clip(CircleShape)
33+
.rememberedClickable { onClick() },
34+
verticalAlignment = Alignment.CenterVertically,
35+
horizontalArrangement = Arrangement.spacedBy(
36+
space = CodeTheme.dimens.grid.x1,
37+
alignment = Alignment.CenterHorizontally
38+
)
39+
) {
40+
token?.let {
41+
TokenIconWithName(
42+
token = token,
43+
imageSize = CodeTheme.dimens.staticGrid.x5,
44+
spacing = CodeTheme.dimens.grid.x1,
45+
)
46+
47+
Image(
48+
modifier = Modifier
49+
.width(CodeTheme.dimens.grid.x4),
50+
painter = painterResource(R.drawable.ic_dropdown),
51+
contentDescription = ""
52+
)
53+
}
54+
55+
}
56+
}
57+
}
58+
59+
@Composable
60+
fun TokenSelectionPill(
61+
tokenName: String,
62+
tokenImageUrl: String?,
63+
tokenSymbol: String,
64+
onClick: () -> Unit
65+
) {
66+
Box(
67+
modifier = Modifier
68+
.fillMaxWidth()
69+
.wrapContentHeight(),
70+
contentAlignment = Alignment.Center
71+
) {
72+
Row(
73+
modifier = Modifier
74+
.clip(CircleShape)
75+
.rememberedClickable { onClick() },
76+
verticalAlignment = Alignment.CenterVertically,
77+
horizontalArrangement = Arrangement.spacedBy(
78+
space = CodeTheme.dimens.grid.x1,
79+
alignment = Alignment.CenterHorizontally
80+
)
81+
) {
82+
TokenIconWithName(
83+
tokenName = tokenName,
84+
tokenImageUrl = tokenImageUrl,
85+
tokenSymbol = tokenSymbol,
86+
imageSize = CodeTheme.dimens.staticGrid.x5,
87+
spacing = CodeTheme.dimens.grid.x1,
88+
)
89+
90+
Image(
91+
modifier = Modifier
92+
.width(CodeTheme.dimens.grid.x4),
93+
painter = painterResource(R.drawable.ic_dropdown),
94+
contentDescription = ""
95+
)
96+
}
97+
}
98+
}

‎apps/flipcash/features/cash/src/main/kotlin/com/flipcash/app/cash/CashScreen.kt‎

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import com.flipcash.app.cash.internal.GiveScreenContent
3131
import com.flipcash.app.core.AppRoute
3232
import com.flipcash.app.core.tokens.TokenPurpose
3333
import com.flipcash.app.core.ui.TokenIconWithName
34+
import com.flipcash.app.core.ui.TokenSelectionPill
3435
import com.flipcash.app.session.LocalSessionController
3536
import com.flipcash.features.cash.R
3637
import com.getcode.navigation.core.LocalCodeNavigator
@@ -80,44 +81,12 @@ class CashScreen(
8081
AppBarWithTitle(
8182
isInModal = true,
8283
title = {
83-
Box(
84-
modifier = Modifier
85-
.fillMaxWidth()
86-
.wrapContentHeight(),
87-
contentAlignment = Alignment.Center
88-
) {
89-
Row(
90-
modifier = Modifier
91-
.clip(CircleShape)
92-
.rememberedClickable {
93-
navigator.push(
94-
ScreenRegistry.get(
95-
AppRoute.Sheets.TokenSelection(TokenPurpose.Select)
96-
)
97-
)
98-
},
99-
verticalAlignment = Alignment.CenterVertically,
100-
horizontalArrangement = Arrangement.spacedBy(
101-
space = CodeTheme.dimens.grid.x1,
102-
alignment = Alignment.CenterHorizontally
84+
TokenSelectionPill(state.token?.token) {
85+
navigator.push(
86+
ScreenRegistry.get(
87+
AppRoute.Sheets.TokenSelection(TokenPurpose.Select)
10388
)
104-
) {
105-
state.token?.let { (token, _) ->
106-
TokenIconWithName(
107-
token = token,
108-
imageSize = CodeTheme.dimens.staticGrid.x5,
109-
spacing = CodeTheme.dimens.grid.x1,
110-
)
111-
112-
Image(
113-
modifier = Modifier
114-
.width(CodeTheme.dimens.grid.x4),
115-
painter = painterResource(R.drawable.ic_dropdown),
116-
contentDescription = ""
117-
)
118-
}
119-
120-
}
89+
)
12190
}
12291
},
12392
rightContents = {

‎ui/components/src/main/kotlin/com/getcode/ui/components/TitleBar.kt‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import com.getcode.theme.DesignSystem
3131
import com.getcode.ui.core.addIf
3232
import com.getcode.ui.core.unboundedClickable
3333
import com.getcode.ui.utils.calculateHorizontalPadding
34+
import kotlin.math.max
3435

3536
object AppBarDefaults {
3637
val ContentPadding: PaddingValues
@@ -214,6 +215,11 @@ private fun TopAppBarBase(
214215
val inset = CodeTheme.dimens.inset
215216
val horizontal = contentPadding.calculateHorizontalPadding()
216217

218+
val emptyLeftSlot = @Composable {
219+
Box(modifier = Modifier.padding(5.dp)) {
220+
AppBarDefaults.UpNavigation() { }
221+
}
222+
}
217223
val leftSlot = @Composable {
218224
Box(modifier = Modifier.padding(5.dp)) {
219225
leftIcon()
@@ -233,6 +239,9 @@ private fun TopAppBarBase(
233239
.height(56.dp),
234240
) { constraints ->
235241
// Measure left icon, if provided
242+
val emptyLeftIconPlaceable = subcompose("empty_leftIcon", emptyLeftSlot).firstOrNull()?.measure(
243+
constraints.copy(minWidth = 0, minHeight = 0)
244+
)
236245
val leftIconPlaceable = subcompose("leftIcon", leftSlot).firstOrNull()?.measure(
237246
constraints.copy(minWidth = 0, minHeight = 0)
238247
)
@@ -244,12 +253,13 @@ private fun TopAppBarBase(
244253
)
245254

246255
// Calculate the remaining space for the title region
247-
val leftIconWidth = leftIconPlaceable?.width ?: 0
256+
val leftIconWidth = max(leftIconPlaceable?.width ?: 0, emptyLeftIconPlaceable?.width ?: 0)
257+
val isEmpty = (leftIconPlaceable?.width ?: 0) == 5.dp.roundToPx()
248258
val rightContentsWidth = rightContentsPlaceable?.width ?: 0
249259
val remainingWidth =
250-
constraints.maxWidth - leftIconWidth - rightContentsWidth - contentPadding.calculateLeftPadding(
260+
constraints.maxWidth - leftIconWidth - rightContentsWidth - (contentPadding.calculateLeftPadding(
251261
layoutDirection
252-
).roundToPx() - (contentPadding.calculateRightPadding(layoutDirection).roundToPx() * 2)
262+
).roundToPx() * 2) - (contentPadding.calculateRightPadding(layoutDirection).roundToPx() * 2)
253263

254264
// Measure title region with the remaining space, if provided
255265
val titleRegionPlaceable = subcompose("titleRegion", titleRegion).firstOrNull()?.measure(
@@ -258,9 +268,10 @@ private fun TopAppBarBase(
258268

259269
layout(constraints.maxWidth, constraints.maxHeight) {
260270
// Place left icon, if present
261-
leftIconPlaceable?.placeRelative(
271+
val left = if (isEmpty) emptyLeftIconPlaceable else leftIconPlaceable
272+
left?.placeRelative(
262273
x = contentPadding.calculateLeftPadding(layoutDirection).roundToPx(),
263-
y = (constraints.maxHeight - (leftIconPlaceable.height)) / 2 + contentPadding.calculateTopPadding()
274+
y = (constraints.maxHeight - (left.height)) / 2 + contentPadding.calculateTopPadding()
264275
.roundToPx()
265276
)
266277

0 commit comments

Comments
 (0)