Skip to content

Commit dc3c6df

Browse files
marlonlommarlonlom
authored
Bugfix/adjust catalog home UI (#30)
* feat(mobile-app): Removed unused xml resources * feat(mobile-app): Updated catalog list screens ui * feat(mobile-app): Updated catalog list row composable * feat(mobile-app): Updated catalog list categories slot * feat(mobile-app): Updated catalog list row title text colors * feat(mobile-app): Updated catalog list banner inactive color
1 parent 669e0b6 commit dc3c6df

File tree

9 files changed

+127
-192
lines changed

9 files changed

+127
-192
lines changed

‎apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/parts/CatalogTupleRow.kt

Lines changed: 106 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,13 @@ import androidx.compose.foundation.border
1010
import androidx.compose.foundation.layout.Arrangement
1111
import androidx.compose.foundation.layout.Column
1212
import androidx.compose.foundation.layout.ExperimentalLayoutApi
13-
import androidx.compose.foundation.layout.FlowRow
1413
import androidx.compose.foundation.layout.Row
1514
import androidx.compose.foundation.layout.fillMaxWidth
1615
import androidx.compose.foundation.layout.padding
1716
import androidx.compose.foundation.layout.size
1817
import androidx.compose.material3.Card
1918
import androidx.compose.material3.CardDefaults
2019
import androidx.compose.material3.MaterialTheme
21-
import androidx.compose.material3.SuggestionChip
22-
import androidx.compose.material3.SuggestionChipDefaults
2320
import androidx.compose.material3.Text
2421
import androidx.compose.runtime.Composable
2522
import androidx.compose.ui.Alignment
@@ -28,16 +25,16 @@ import androidx.compose.ui.draw.clip
2825
import androidx.compose.ui.graphics.Color
2926
import androidx.compose.ui.layout.ContentScale
3027
import androidx.compose.ui.platform.LocalContext
31-
import androidx.compose.ui.res.stringResource
3228
import androidx.compose.ui.text.SpanStyle
3329
import androidx.compose.ui.text.buildAnnotatedString
3430
import androidx.compose.ui.text.font.FontWeight
3531
import androidx.compose.ui.text.style.TextOverflow
3632
import androidx.compose.ui.text.withStyle
33+
import androidx.compose.ui.unit.DpSize
3734
import androidx.compose.ui.unit.dp
35+
import androidx.core.text.trimmedLength
3836
import coil.compose.AsyncImage
3937
import coil.request.ImageRequest
40-
import dev.marlonlom.apps.cappajv.R
4138
import dev.marlonlom.apps.cappajv.core.database.entities.CatalogItemTuple
4239
import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
4340
import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
@@ -60,9 +57,6 @@ internal fun CatalogTupleRow(
6057
onCatalogItemTupleClicked: (Long) -> Unit,
6158
modifier: Modifier = Modifier,
6259
) {
63-
64-
val imageSizeDp = getCatalogTupleImageSizeDp(appState)
65-
6660
Card(
6761
modifier = modifier.fillMaxWidth(),
6862
shape = CardDefaults.outlinedShape,
@@ -72,103 +66,133 @@ internal fun CatalogTupleRow(
7266
},
7367
) {
7468
Row(
75-
modifier.padding(10.dp),
69+
modifier = modifier.padding(vertical = 10.dp),
7670
verticalAlignment = Alignment.CenterVertically,
77-
horizontalArrangement = Arrangement.spacedBy(20.dp)
71+
horizontalArrangement = Arrangement.spacedBy(16.dp)
7872
) {
79-
val imageRequest = ImageRequest.Builder(LocalContext.current)
80-
.data(tuple.picture)
81-
.crossfade(true)
82-
.build()
73+
CatalogTuplePosterImage(tuple, appState)
74+
Column(
75+
modifier = modifier
76+
.fillMaxWidth()
77+
.padding(end = 10.dp)
78+
) {
79+
CatalogTupleTitle(tuple, appState)
80+
CatalogTupleSamplePunctuationText(tuple)
81+
}
82+
}
83+
}
84+
}
8385

84-
AsyncImage(
85-
model = imageRequest,
86-
contentDescription = tuple.title,
87-
contentScale = ContentScale.Crop,
88-
modifier = Modifier
89-
.border(
90-
width = 2.dp,
91-
color = MaterialTheme.colorScheme.secondary,
92-
shape = MaterialTheme.shapes.medium,
93-
)
94-
.clip(MaterialTheme.shapes.medium)
95-
.size(imageSizeDp)
96-
.background(Color.White),
86+
/**
87+
* Catalog tuple sample punctuation text composable ui.
88+
*
89+
* @author marlonlom
90+
*
91+
* @param tuple Catalog item.
92+
*/
93+
@Composable
94+
private fun CatalogTupleSamplePunctuationText(
95+
tuple: CatalogItemTuple
96+
) {
97+
val samplePunctuationTxt = buildAnnotatedString {
98+
val textParts = tuple.samplePunctuation.split(":")
99+
withStyle(
100+
SpanStyle(
101+
fontWeight = FontWeight.SemiBold,
102+
color = MaterialTheme.colorScheme.secondary,
97103
)
98-
99-
Column {
100-
Text(
101-
text = tuple.title,
102-
style = getCatalogTupleTitleStyle(appState),
103-
maxLines = 1,
104-
overflow = TextOverflow.Ellipsis,
105-
fontWeight = FontWeight.SemiBold
104+
) {
105+
val punctuationTitle = when {
106+
textParts[0].trimmedLength() > 10 -> textParts[0].split(" ")[0].plus(" ...")
107+
else -> textParts[0]
108+
}
109+
append(punctuationTitle)
110+
}
111+
append(": ")
112+
append(textParts[1].trim())
113+
if (tuple.punctuationsCount > 1) {
114+
append(" ")
115+
withStyle(
116+
SpanStyle(
117+
fontWeight = FontWeight.SemiBold,
118+
color = MaterialTheme.colorScheme.secondary,
106119
)
107-
FlowRow(
108-
horizontalArrangement = Arrangement.spacedBy(10.dp),
109-
) {
110-
SuggestionChip(
111-
onClick = { },
112-
colors = SuggestionChipDefaults.suggestionChipColors(
113-
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
114-
labelColor = MaterialTheme.colorScheme.onTertiaryContainer
115-
),
116-
label = {
117-
val samplePunctuationTxt = buildAnnotatedString {
118-
val textParts = tuple.samplePunctuation.split(":")
119-
withStyle(SpanStyle(fontWeight = FontWeight.SemiBold)) {
120-
append(textParts[0])
121-
}
122-
append(": ")
123-
append(textParts[1].trim())
124-
}
125-
Text(text = samplePunctuationTxt)
126-
},
127-
shape = MaterialTheme.shapes.small,
128-
)
129-
130-
if (tuple.punctuationsCount > 1) {
131-
Text(
132-
text = gePunctuationCountText(
133-
appState = appState,
134-
punctuationsCount = tuple.punctuationsCount - 1
135-
),
136-
modifier = Modifier.align(Alignment.CenterVertically)
137-
)
138-
}
139-
}
120+
) {
121+
append("(+ ${tuple.punctuationsCount - 1})")
140122
}
141123
}
142124
}
125+
Text(
126+
text = samplePunctuationTxt,
127+
style = MaterialTheme.typography.labelMedium,
128+
)
143129
}
144130

131+
/**
132+
* Catalog tuple item title composable text.
133+
*
134+
* @author marlonlom
135+
*
136+
* @param tuple Catalog item tuple data.
137+
* @param appState Application ui state.
138+
*/
145139
@Composable
146-
private fun gePunctuationCountText(
147-
appState: CappajvAppState,
148-
punctuationsCount: Int,
149-
) = when {
150-
appState.isCompactWidth.and(appState.isLandscape.not())
151-
.and(appState.devicePosture is DevicePosture.Separating.TableTop) -> "+$punctuationsCount"
140+
private fun CatalogTupleTitle(
141+
tuple: CatalogItemTuple, appState: CappajvAppState
142+
) {
143+
Text(
144+
text = tuple.title,
145+
style = getCatalogTupleTitleStyle(appState),
146+
color = MaterialTheme.colorScheme.secondary,
147+
maxLines = 1,
148+
overflow = TextOverflow.Ellipsis,
149+
fontWeight = FontWeight.SemiBold
150+
)
151+
}
152152

153-
else -> stringResource(
154-
R.string.text_catalog_hint_more_punctuations,
155-
punctuationsCount
153+
/**
154+
* Catalog tuple item poster image composable.
155+
*
156+
* @author marlonlom
157+
*
158+
* @param tuple Catalog item tuple data.
159+
* @param appState Application ui state.
160+
*/
161+
@Composable
162+
private fun CatalogTuplePosterImage(
163+
tuple: CatalogItemTuple, appState: CappajvAppState
164+
) {
165+
val imageRequest = ImageRequest.Builder(LocalContext.current).data(tuple.picture).crossfade(true).build()
166+
167+
AsyncImage(
168+
model = imageRequest,
169+
contentDescription = tuple.title,
170+
contentScale = ContentScale.Crop,
171+
modifier = Modifier
172+
.border(
173+
width = 2.dp,
174+
color = MaterialTheme.colorScheme.secondary,
175+
shape = MaterialTheme.shapes.medium,
176+
)
177+
.clip(MaterialTheme.shapes.medium)
178+
.size(getCatalogTupleImageSizeDp(appState))
179+
.background(Color.White),
156180
)
157181
}
158182

159183
@Composable
160-
private fun getCatalogTupleImageSizeDp(appState: CappajvAppState) = when {
184+
private fun getCatalogTupleImageSizeDp(appState: CappajvAppState): DpSize = when {
161185
appState.isCompactWidth.and(appState.isLandscape.not())
162-
.and(appState.devicePosture is DevicePosture.Separating.TableTop) -> 56.dp
186+
.and(appState.devicePosture is DevicePosture.Separating.TableTop) -> DpSize(48.dp, 56.dp)
163187

164-
else -> 100.dp
188+
else -> DpSize(56.dp, 64.dp)
165189
}
166190

167191

168192
@Composable
169193
private fun getCatalogTupleTitleStyle(appState: CappajvAppState) = when {
170194
appState.isCompactWidth.and(appState.isLandscape.not())
171-
.and(appState.devicePosture is DevicePosture.Separating.TableTop) -> MaterialTheme.typography.titleMedium
195+
.and(appState.devicePosture is DevicePosture.Separating.TableTop) -> MaterialTheme.typography.bodyMedium
172196

173-
else -> MaterialTheme.typography.titleLarge
197+
else -> MaterialTheme.typography.bodyLarge
174198
}

‎apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/CompactTableTopCatalogListScreen.kt

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ fun CompactTableTopCatalogListScreen(
7272
categories = categories,
7373
selectedCategory = selectedCategory,
7474
onCategoryChipSelected = { onSelectedCategoryChanged(it) },
75-
isScrollable = true
7675
)
7776
}
7877

‎apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/DefaultPortraitCatalogListScreen.kt

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ fun DefaultPortraitCatalogListScreen(
5050
) {
5151
Column(
5252
modifier = modifier
53-
.fillMaxWidth()
54-
.safeContentPadding(),
53+
.fillMaxWidth()
54+
.safeContentPadding(),
5555
horizontalAlignment = Alignment.CenterHorizontally
5656
) {
5757
CatalogListHeadline(appState)
@@ -60,7 +60,6 @@ fun DefaultPortraitCatalogListScreen(
6060
categories = categories,
6161
selectedCategory = selectedCategory,
6262
onCategoryChipSelected = { onSelectedCategoryChanged(it) },
63-
isScrollable = true,
6463
)
6564
CatalogListTuplesSlot(
6665
appState = appState,

‎apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogCategoriesChipGroup.kt

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ package dev.marlonlom.apps.cappajv.features.catalog_list.slots
77

88
import androidx.compose.foundation.layout.Arrangement
99
import androidx.compose.foundation.layout.ExperimentalLayoutApi
10-
import androidx.compose.foundation.layout.FlowRow
1110
import androidx.compose.foundation.layout.size
1211
import androidx.compose.foundation.lazy.LazyRow
1312
import androidx.compose.foundation.lazy.items
@@ -33,15 +32,13 @@ import androidx.compose.ui.unit.dp
3332
*
3433
* @param selectedCategory Selected category.
3534
* @param onCategoryChipSelected Action for category changed.
36-
* @param isScrollable True/False if scroll is handled, default to false.
3735
*/
3836
@ExperimentalLayoutApi
3937
@Composable
4038
fun CatalogCategoriesChipGroup(
4139
categories: List<String>,
4240
selectedCategory: String,
4341
onCategoryChipSelected: (String) -> Unit,
44-
isScrollable: Boolean = false,
4542
) {
4643
val list = categories.mapIndexed { index, category ->
4744
Pair(
@@ -74,31 +71,17 @@ fun CatalogCategoriesChipGroup(
7471
)
7572
}
7673

77-
if (isScrollable) {
78-
LazyRow(
79-
horizontalArrangement = Arrangement.spacedBy(
80-
space = 10.dp,
81-
alignment = Alignment.Start,
82-
),
83-
) {
84-
items(
85-
items = list,
86-
key = { it.first }
87-
) { category ->
88-
addCategoryFilterChip(category)
89-
}
90-
}
91-
} else {
92-
FlowRow(
93-
horizontalArrangement = Arrangement.spacedBy(
94-
space = 10.dp,
95-
alignment = Alignment.Start,
96-
),
97-
verticalArrangement = Arrangement.spacedBy(4.dp),
98-
) {
99-
list.forEach { category ->
100-
addCategoryFilterChip(category)
101-
}
74+
LazyRow(
75+
horizontalArrangement = Arrangement.spacedBy(
76+
space = 10.dp,
77+
alignment = Alignment.Start,
78+
),
79+
) {
80+
items(
81+
items = list,
82+
key = { it.first }
83+
) { category ->
84+
addCategoryFilterChip(category)
10285
}
10386
}
10487
}

‎apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogListBanner.kt

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ fun CatalogListBanner(
114114
private fun BannerCard(
115115
pageIndex: Int,
116116
pagerState: PagerState,
117-
bannerImage: Painter
117+
bannerImage: Painter,
118118
) {
119119
Card(
120120
onClick = {},
@@ -164,15 +164,18 @@ fun HorizontalPagerIndicator(
164164
modifier: Modifier = Modifier,
165165
) {
166166
Row(
167-
Modifier
167+
modifier
168168
.wrapContentHeight()
169169
.fillMaxWidth()
170170
.padding(bottom = 10.dp),
171171
verticalAlignment = Alignment.CenterVertically,
172172
horizontalArrangement = Arrangement.Center
173173
) {
174174
repeat(pagerState.pageCount) { iteration ->
175-
val color = if (pagerState.currentPage == iteration) activeColor else Color.LightGray
175+
val color = when (pagerState.currentPage) {
176+
iteration -> activeColor
177+
else -> activeColor.copy(alpha = 0.25f)
178+
}
176179
Box(
177180
modifier = modifier
178181
.padding(2.dp)

0 commit comments

Comments
 (0)