Skip to content

Commit 5d5f325

Browse files
pawcodingpawcoding
committed
refactor(buttons): update design of some buttons
1 parent 247ae27 commit 5d5f325

File tree

3 files changed

+101
-41
lines changed

3 files changed

+101
-41
lines changed

‎app/src/main/java/de/pawcode/cardstore/ui/components/LabelsListComponent.kt‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ import androidx.compose.material.icons.Icons
1111
import androidx.compose.material.icons.filled.Add
1212
import androidx.compose.material.icons.filled.Check
1313
import androidx.compose.material.icons.filled.EditNote
14-
import androidx.compose.material3.FilledTonalIconButton
14+
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
15+
import androidx.compose.material3.FilledIconButton
1516
import androidx.compose.material3.FilterChip
1617
import androidx.compose.material3.Icon
18+
import androidx.compose.material3.IconButtonDefaults
1719
import androidx.compose.material3.MaterialTheme
1820
import androidx.compose.material3.Text
1921
import androidx.compose.runtime.Composable
@@ -27,6 +29,7 @@ import de.pawcode.cardstore.data.database.entities.EXAMPLE_LABEL
2729
import de.pawcode.cardstore.data.database.entities.EXAMPLE_LABEL_LIST
2830
import de.pawcode.cardstore.data.database.entities.LabelEntity
2931

32+
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
3033
@Composable
3134
fun LabelsListComponent(
3235
labels: List<LabelEntity>,
@@ -57,6 +60,7 @@ fun LabelsListComponent(
5760
FilterChip(
5861
selected = chipSelected,
5962
onClick = { onLabelClick(label) },
63+
shape = MaterialTheme.shapes.medium,
6064
label = {
6165
Text(
6266
modifier = Modifier.padding(vertical = 8.dp),
@@ -74,11 +78,22 @@ fun LabelsListComponent(
7478
}
7579
}
7680

77-
FilledTonalIconButton(shape = MaterialTheme.shapes.small, onClick = { onEdit() }) {
81+
FilledIconButton(
82+
modifier =
83+
Modifier.size(
84+
IconButtonDefaults.smallContainerSize(IconButtonDefaults.IconButtonWidthOption.Wide)
85+
),
86+
shapes =
87+
IconButtonDefaults.shapes(
88+
shape = IconButtonDefaults.smallRoundShape,
89+
pressedShape = IconButtonDefaults.smallPressedShape,
90+
),
91+
onClick = { onEdit() },
92+
) {
7893
Icon(
7994
imageVector = if (labels.isNotEmpty()) Icons.Filled.EditNote else Icons.Filled.Add,
8095
contentDescription = stringResource(R.string.labels_edit),
81-
modifier = Modifier.size(32.dp),
96+
modifier = Modifier.size(IconButtonDefaults.smallIconSize),
8297
)
8398
}
8499
}

‎app/src/main/java/de/pawcode/cardstore/ui/components/SelectDropdownMenu.kt‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package de.pawcode.cardstore.ui.components
22

3+
import androidx.compose.foundation.layout.size
34
import androidx.compose.material.icons.Icons
45
import androidx.compose.material.icons.automirrored.filled.Sort
56
import androidx.compose.material.icons.automirrored.filled.TrendingUp
@@ -9,14 +10,17 @@ import androidx.compose.material.icons.filled.History
910
import androidx.compose.material.icons.filled.SortByAlpha
1011
import androidx.compose.material3.DropdownMenu
1112
import androidx.compose.material3.DropdownMenuItem
13+
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
14+
import androidx.compose.material3.FilledIconButton
1215
import androidx.compose.material3.Icon
13-
import androidx.compose.material3.IconButton
16+
import androidx.compose.material3.IconButtonDefaults
1417
import androidx.compose.material3.Text
1518
import androidx.compose.runtime.Composable
1619
import androidx.compose.runtime.getValue
1720
import androidx.compose.runtime.mutableStateOf
1821
import androidx.compose.runtime.remember
1922
import androidx.compose.runtime.setValue
23+
import androidx.compose.ui.Modifier
2024
import androidx.compose.ui.graphics.vector.ImageVector
2125
import androidx.compose.ui.res.stringResource
2226
import androidx.compose.ui.text.style.TextOverflow
@@ -30,6 +34,7 @@ data class DropdownOption<TValue : Enum<TValue>>(
3034
val value: TValue,
3135
)
3236

37+
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
3338
@Composable
3439
fun <TValue : Enum<TValue>> SelectDropdownMenu(
3540
icon: ImageVector,
@@ -41,8 +46,23 @@ fun <TValue : Enum<TValue>> SelectDropdownMenu(
4146
) {
4247
var dropdownExpanded by remember { mutableStateOf(initiallyExpanded) }
4348

44-
IconButton(onClick = { dropdownExpanded = !dropdownExpanded }) {
45-
Icon(icon, contentDescription = title)
49+
FilledIconButton(
50+
modifier =
51+
Modifier.size(
52+
IconButtonDefaults.smallContainerSize(IconButtonDefaults.IconButtonWidthOption.Wide)
53+
),
54+
onClick = { dropdownExpanded = !dropdownExpanded },
55+
shapes =
56+
IconButtonDefaults.shapes(
57+
shape = IconButtonDefaults.smallRoundShape,
58+
pressedShape = IconButtonDefaults.smallPressedShape,
59+
),
60+
) {
61+
Icon(
62+
icon,
63+
contentDescription = title,
64+
modifier = Modifier.size(IconButtonDefaults.smallIconSize),
65+
)
4666
}
4767
DropdownMenu(expanded = dropdownExpanded, onDismissRequest = { dropdownExpanded = false }) {
4868
values.forEach { option ->

‎app/src/main/java/de/pawcode/cardstore/ui/screens/CardListScreen.kt‎

Lines changed: 60 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
package de.pawcode.cardstore.ui.screens
22

3+
import androidx.compose.foundation.layout.Arrangement
34
import androidx.compose.foundation.layout.Box
45
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.Row
57
import androidx.compose.foundation.layout.WindowInsets
68
import androidx.compose.foundation.layout.fillMaxHeight
79
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.layout.size
811
import androidx.compose.foundation.layout.statusBars
912
import androidx.compose.foundation.layout.windowInsetsPadding
1013
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
@@ -24,9 +27,11 @@ import androidx.compose.material.icons.outlined.QrCodeScanner
2427
import androidx.compose.material.icons.twotone.CreditCard
2528
import androidx.compose.material.icons.twotone.DeleteForever
2629
import androidx.compose.material3.ExperimentalMaterial3Api
30+
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
2731
import androidx.compose.material3.ExtendedFloatingActionButton
32+
import androidx.compose.material3.FilledIconButton
2833
import androidx.compose.material3.Icon
29-
import androidx.compose.material3.IconButton
34+
import androidx.compose.material3.IconButtonDefaults
3035
import androidx.compose.material3.ModalBottomSheet
3136
import androidx.compose.material3.Scaffold
3237
import androidx.compose.material3.Text
@@ -151,7 +156,7 @@ fun CardListScreen(navController: NavController, viewModel: CardViewModel = view
151156
)
152157
}
153158

154-
@OptIn(ExperimentalMaterial3Api::class)
159+
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
155160
@Composable
156161
fun CardListScreenComponent(
157162
cardsFlow: Flow<List<CardWithLabels>>,
@@ -217,38 +222,58 @@ fun CardListScreenComponent(
217222
AppBar(
218223
title = stringResource(R.string.app_name),
219224
actions = {
220-
IconButton(onClick = { onShowAbout() }) {
221-
Icon(Icons.Outlined.Info, contentDescription = stringResource(R.string.about))
222-
}
223-
SelectDropdownMenu(
224-
icon = Icons.AutoMirrored.Filled.Sort,
225-
title = stringResource(R.string.cards_sort),
226-
value = sortBy,
227-
values =
228-
listOf(
229-
DropdownOption(
230-
title = stringResource(R.string.sort_intelligent),
231-
icon = Icons.Filled.AutoFixHigh,
232-
value = SortAttribute.INTELLIGENT,
233-
),
234-
DropdownOption(
235-
title = stringResource(R.string.sort_alphabetically),
236-
icon = Icons.Filled.SortByAlpha,
237-
value = SortAttribute.ALPHABETICALLY,
225+
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
226+
FilledIconButton(
227+
modifier =
228+
Modifier.size(
229+
IconButtonDefaults.smallContainerSize(
230+
IconButtonDefaults.IconButtonWidthOption.Wide
231+
)
238232
),
239-
DropdownOption(
240-
title = stringResource(R.string.sort_most_used),
241-
icon = Icons.AutoMirrored.Filled.TrendingUp,
242-
value = SortAttribute.MOST_USED,
233+
onClick = { onShowAbout() },
234+
shapes =
235+
IconButtonDefaults.shapes(
236+
shape = IconButtonDefaults.smallRoundShape,
237+
pressedShape = IconButtonDefaults.smallPressedShape,
243238
),
244-
DropdownOption(
245-
title = stringResource(R.string.sort_recently_used),
246-
icon = Icons.Filled.History,
247-
value = SortAttribute.RECENTLY_USED,
239+
) {
240+
Icon(
241+
Icons.Outlined.Info,
242+
contentDescription = stringResource(R.string.about),
243+
modifier = Modifier.size(IconButtonDefaults.smallIconSize),
244+
)
245+
}
246+
247+
SelectDropdownMenu(
248+
icon = Icons.AutoMirrored.Filled.Sort,
249+
title = stringResource(R.string.cards_sort),
250+
value = sortBy,
251+
values =
252+
listOf(
253+
DropdownOption(
254+
title = stringResource(R.string.sort_intelligent),
255+
icon = Icons.Filled.AutoFixHigh,
256+
value = SortAttribute.INTELLIGENT,
257+
),
258+
DropdownOption(
259+
title = stringResource(R.string.sort_alphabetically),
260+
icon = Icons.Filled.SortByAlpha,
261+
value = SortAttribute.ALPHABETICALLY,
262+
),
263+
DropdownOption(
264+
title = stringResource(R.string.sort_most_used),
265+
icon = Icons.AutoMirrored.Filled.TrendingUp,
266+
value = SortAttribute.MOST_USED,
267+
),
268+
DropdownOption(
269+
title = stringResource(R.string.sort_recently_used),
270+
icon = Icons.Filled.History,
271+
value = SortAttribute.RECENTLY_USED,
272+
),
248273
),
249-
),
250-
onValueChange = { onSortChange(it) },
251-
)
274+
onValueChange = { onSortChange(it) },
275+
)
276+
}
252277
},
253278
)
254279
},
@@ -449,8 +474,8 @@ fun CardListScreenComponent(
449474
}
450475
}
451476

452-
@Preview
453-
@Preview(device = "id:pixel_tablet")
477+
@Preview(showSystemUi = true)
478+
@Preview(device = "id:pixel_tablet", showSystemUi = true)
454479
@Composable
455480
fun PreviewCardListScreenComponent() {
456481
CardListScreenComponent(
@@ -468,8 +493,8 @@ fun PreviewCardListScreenComponent() {
468493
)
469494
}
470495

471-
@Preview
472-
@Preview(device = "id:pixel_tablet")
496+
@Preview(showSystemUi = true)
497+
@Preview(device = "id:pixel_tablet", showSystemUi = true)
473498
@Composable
474499
fun PreviewCardListScreenComponentEmpty() {
475500
CardListScreenComponent(

0 commit comments

Comments
 (0)