Skip to content

Commit af85eb0

Browse files
bmc08gtbmc08gt
committed
refactor(ui): extract CircularIconButton and clean up TitleBar
Extract the private CircularIconButton from AppBarDefaults into a shared top-level component with a (Dp) -> Unit content lambda. Update all call sites in TitleBar to use the new size parameter, migrate material2 to material3 imports in SearchInput, and adjust padding in RegionSelectionModalContent after SearchInput lost its built-in horizontal padding. Signed-off-by: Brandon McAnsh <git@bmcreations.dev>
1 parent 7712f07 commit af85eb0

4 files changed

Lines changed: 63 additions & 55 deletions

File tree

‎apps/flipcash/shared/currency-selection/ui/src/main/kotlin/com/flipcash/app/currency/internal/RegionSelectionModalContent.kt‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ internal fun RegionSelectionModalContent(viewModel: CurrencyViewModel) {
5454
.launchIn(this)
5555
}
5656
SearchInput(
57-
modifier = Modifier.padding(top = CodeTheme.dimens.grid.x3),
57+
modifier = Modifier
58+
.padding(horizontal = CodeTheme.dimens.grid.x3)
59+
.padding(top = CodeTheme.dimens.grid.x3),
5860
state = state.searchState,
5961
contentPadding = PaddingValues(start = CodeTheme.dimens.grid.x1),
6062
placeholder = stringResource(R.string.subtitle_searchRegions)

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
package com.getcode.ui.components
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Box
5+
import androidx.compose.foundation.layout.size
6+
import androidx.compose.foundation.shape.CircleShape
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Alignment
9+
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.draw.clip
11+
import androidx.compose.ui.graphics.Color
12+
import androidx.compose.ui.platform.testTag
13+
import androidx.compose.ui.unit.Dp
14+
import androidx.compose.ui.unit.dp
15+
import com.getcode.ui.components.AppBarDefaults.IconSize
16+
import com.getcode.ui.core.rememberedClickable
17+
18+
private val ButtonSize = 40.dp
19+
private val ButtonBackground = Color.White.copy(alpha = 0.1f)
20+
21+
22+
@Composable
23+
fun CircularIconButton(
24+
modifier: Modifier = Modifier,
25+
onClick: () -> Unit,
26+
testTag: String? = null,
27+
content: @Composable (Dp) -> Unit,
28+
) {
29+
Box(
30+
modifier = modifier
31+
.size(ButtonSize)
32+
.background(ButtonBackground, CircleShape)
33+
.clip(CircleShape)
34+
.rememberedClickable { onClick() }
35+
.then(if (testTag != null) Modifier.testTag(testTag) else Modifier),
36+
contentAlignment = Alignment.Center,
37+
) {
38+
content(IconSize)
39+
}
40+
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import androidx.compose.foundation.layout.padding
55
import androidx.compose.foundation.shape.CircleShape
66
import androidx.compose.foundation.text.input.TextFieldState
77
import androidx.compose.foundation.text.input.clearText
8-
import androidx.compose.material.Icon
9-
import androidx.compose.material.IconButton
8+
import androidx.compose.material3.Icon
9+
import androidx.compose.material3.IconButton
1010
import androidx.compose.material.icons.Icons
1111
import androidx.compose.material.icons.filled.Search
1212
import androidx.compose.material.icons.outlined.Close
@@ -24,8 +24,7 @@ fun SearchInput(
2424
placeholder: String = stringResource(R.string.action_search),
2525
) {
2626
TextInput(
27-
modifier = modifier
28-
.padding(horizontal = CodeTheme.dimens.grid.x3),
27+
modifier = modifier,
2928
state = state,
3029
contentPadding = contentPadding,
3130
leadingIcon = {

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

Lines changed: 17 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,27 @@
11
package com.getcode.ui.components
22

3-
import androidx.compose.foundation.background
43
import androidx.compose.foundation.layout.Box
54
import androidx.compose.foundation.layout.ExperimentalLayoutApi
65
import androidx.compose.foundation.layout.PaddingValues
76
import androidx.compose.foundation.layout.WindowInsets
87
import androidx.compose.foundation.layout.height
98
import androidx.compose.foundation.layout.padding
109
import androidx.compose.foundation.layout.requiredSize
11-
import androidx.compose.foundation.layout.size
1210
import androidx.compose.foundation.layout.statusBarsIgnoringVisibility
1311
import androidx.compose.foundation.layout.windowInsetsPadding
14-
import androidx.compose.foundation.shape.CircleShape
15-
import androidx.compose.material.Icon
16-
import androidx.compose.material.Text
12+
import androidx.compose.material3.Icon
13+
import androidx.compose.material3.Text
1714
import androidx.compose.material.icons.Icons
18-
import androidx.compose.material.icons.automirrored.filled.Redo
1915
import androidx.compose.material.icons.automirrored.outlined.ArrowBack
2016
import androidx.compose.material.icons.automirrored.outlined.Logout
21-
import androidx.compose.material.icons.filled.RestartAlt
22-
import androidx.compose.material.icons.filled.RestorePage
2317
import androidx.compose.material.icons.outlined.Close
2418
import androidx.compose.material.icons.outlined.MoreVert
25-
import androidx.compose.material.icons.outlined.Redo
2619
import androidx.compose.material.icons.rounded.RestorePage
2720
import androidx.compose.runtime.Composable
2821
import androidx.compose.ui.Alignment
2922
import androidx.compose.ui.Modifier
30-
import androidx.compose.ui.draw.clip
3123
import androidx.compose.ui.graphics.Color
3224
import androidx.compose.ui.layout.SubcomposeLayout
33-
import androidx.compose.ui.platform.testTag
3425
import androidx.compose.ui.res.painterResource
3526
import androidx.compose.ui.text.TextStyle
3627
import androidx.compose.ui.text.style.TextOverflow
@@ -41,75 +32,71 @@ import com.getcode.navigation.flow.LocalFlowDismissStyle
4132
import com.getcode.theme.CodeTheme
4233
import com.getcode.theme.DesignSystem
4334
import com.getcode.ui.core.addIf
44-
import com.getcode.ui.core.rememberedClickable
45-
import com.getcode.ui.core.unboundedClickable
4635
import com.getcode.ui.utils.calculateHorizontalPadding
4736
import kotlin.math.max
4837

4938
object AppBarDefaults {
5039
val ContentPadding: PaddingValues
5140
@Composable get() = PaddingValues(horizontal = CodeTheme.dimens.grid.x2)
5241

53-
private val IconSize = 20.dp
54-
private val ButtonSize = 40.dp
55-
private val ButtonBackground = Color.White.copy(alpha = 0.1f)
42+
internal val IconSize = 20.dp
5643

5744
@Composable
5845
fun UpNavigation(modifier: Modifier = Modifier, onClick: () -> Unit) {
59-
CircularIconButton(modifier = modifier, onClick = onClick, testTag = "action_back") {
46+
CircularIconButton(modifier = modifier, onClick = onClick, testTag = "action_back") { size ->
6047
Icon(
6148
imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
6249
contentDescription = "",
6350
tint = Color.White,
64-
modifier = Modifier.requiredSize(IconSize),
51+
modifier = Modifier.requiredSize(size),
6552
)
6653
}
6754
}
6855

6956
@Composable
7057
fun Close(modifier: Modifier = Modifier, onClick: () -> Unit) {
71-
CircularIconButton(modifier = modifier, onClick = onClick, testTag = "action_close") {
58+
CircularIconButton(modifier = modifier, onClick = onClick, testTag = "action_close") { size ->
7259
Icon(
7360
imageVector = Icons.Outlined.Close,
7461
contentDescription = "",
7562
tint = Color.White,
76-
modifier = Modifier.requiredSize(IconSize),
63+
modifier = Modifier.requiredSize(size),
7764
)
7865
}
7966
}
8067

8168
@Composable
8269
fun Share(modifier: Modifier = Modifier, onClick: () -> Unit) {
83-
CircularIconButton(modifier = modifier, onClick = onClick, testTag = "action_share") {
70+
CircularIconButton(modifier = modifier, onClick = onClick, testTag = "action_share") { size ->
8471
Icon(
8572
painter = painterResource(R.drawable.ic_remote_send),
8673
contentDescription = "",
8774
tint = Color.White,
88-
modifier = Modifier.requiredSize(IconSize),
75+
modifier = Modifier.requiredSize(size),
8976
)
9077
}
9178
}
9279

9380
@Composable
9481
fun Leave(modifier: Modifier = Modifier, onClick: () -> Unit) {
95-
CircularIconButton(modifier = modifier, onClick = onClick) {
82+
CircularIconButton(modifier = modifier, onClick = onClick) { size ->
9683
Icon(
9784
imageVector = Icons.AutoMirrored.Outlined.Logout,
9885
contentDescription = "",
9986
tint = Color.White,
100-
modifier = Modifier.requiredSize(IconSize),
87+
modifier = Modifier.requiredSize(size),
10188
)
10289
}
10390
}
10491

10592
@Composable
10693
fun Settings(modifier: Modifier = Modifier, onClick: () -> Unit) {
107-
CircularIconButton(modifier = modifier, onClick = onClick) {
94+
CircularIconButton(modifier = modifier, onClick = onClick) { size ->
10895
Icon(
10996
painter = painterResource(R.drawable.ic_settings_outline),
11097
contentDescription = "",
11198
tint = Color.White,
112-
modifier = Modifier.requiredSize(IconSize),
99+
modifier = Modifier.requiredSize(size),
113100
)
114101
}
115102
}
@@ -119,12 +106,12 @@ object AppBarDefaults {
119106
modifier: Modifier = Modifier,
120107
onClick: () -> Unit
121108
) {
122-
CircularIconButton(modifier = modifier, onClick = onClick) {
109+
CircularIconButton(modifier = modifier, onClick = onClick) { size ->
123110
Icon(
124111
imageVector = Icons.Outlined.MoreVert,
125112
contentDescription = "",
126113
tint = Color.White,
127-
modifier = Modifier.requiredSize(IconSize),
114+
modifier = Modifier.requiredSize(size),
128115
)
129116
}
130117
}
@@ -134,12 +121,12 @@ object AppBarDefaults {
134121
modifier: Modifier = Modifier,
135122
onClick: () -> Unit
136123
) {
137-
CircularIconButton(modifier = modifier, onClick = onClick) {
124+
CircularIconButton(modifier = modifier, onClick = onClick) { size ->
138125
Icon(
139126
imageVector = Icons.Rounded.RestorePage,
140127
contentDescription = "",
141128
tint = Color.White,
142-
modifier = Modifier.requiredSize(IconSize),
129+
modifier = Modifier.requiredSize(size),
143130
)
144131
}
145132
}
@@ -159,26 +146,6 @@ object AppBarDefaults {
159146
overflow = TextOverflow.Ellipsis
160147
)
161148
}
162-
163-
@Composable
164-
private fun CircularIconButton(
165-
modifier: Modifier = Modifier,
166-
onClick: () -> Unit,
167-
testTag: String? = null,
168-
content: @Composable () -> Unit,
169-
) {
170-
Box(
171-
modifier = modifier
172-
.size(ButtonSize)
173-
.background(ButtonBackground, CircleShape)
174-
.clip(CircleShape)
175-
.rememberedClickable { onClick() }
176-
.then(if (testTag != null) Modifier.testTag(testTag) else Modifier),
177-
contentAlignment = Alignment.Center,
178-
) {
179-
content()
180-
}
181-
}
182149
}
183150

184151
@Composable

0 commit comments

Comments
 (0)