Skip to content

Commit bb35655

Browse files
marlonlommarlonlom
authored
Feature/add navigation rail catalog home layout (#35)
* feat(mobile-app): Added catalog home layout when navigation rail is displayed and is in tabletop mode
1 parent 0bbf313 commit bb35655

File tree

4 files changed

+131
-3
lines changed

4 files changed

+131
-3
lines changed

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import dev.marlonlom.apps.cappajv.features.catalog_list.screens.CompactTableTopC
1414
import dev.marlonlom.apps.cappajv.features.catalog_list.screens.DefaultPortraitCatalogListScreen
1515
import dev.marlonlom.apps.cappajv.features.catalog_list.screens.LandscapeCompactCatalogListScreen
1616
import dev.marlonlom.apps.cappajv.features.catalog_list.screens.LandscapeTwoPaneCatalogListScreen
17+
import dev.marlonlom.apps.cappajv.features.catalog_list.screens.TableTopCatalogListScreen
1718
import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
1819
import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
1920
import dev.marlonlom.apps.cappajv.ui.main.scaffold.ScaffoldContentType
@@ -46,6 +47,19 @@ fun CatalogListContent(
4647
) {
4748
when {
4849

50+
appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal)
51+
.and(appState.isCompactHeight) -> {
52+
LandscapeCompactCatalogListScreen(
53+
appState = appState,
54+
catalogItemsListState = catalogItemsListState,
55+
catalogItems = catalogItems,
56+
categories = categories,
57+
selectedCategory = selectedCategory,
58+
onSelectedCategoryChanged = onSelectedCategoryChanged,
59+
onCatalogItemSelected = onCatalogItemSelected,
60+
)
61+
}
62+
4963
appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal)
5064
.and(listOf(NavigationType.EXPANDED_NAV, NavigationType.NAVIGATION_RAIL).contains(appState.navigationType)) -> {
5165
LandscapeTwoPaneCatalogListScreen(
@@ -72,8 +86,10 @@ fun CatalogListContent(
7286
)
7387
}
7488

75-
appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal).and(appState.isCompactHeight) -> {
76-
LandscapeCompactCatalogListScreen(
89+
(appState.devicePosture is DevicePosture.Separating.TableTop)
90+
.and(appState.isCompactWidth.not())
91+
.and(appState.isLandscape.not()) -> {
92+
TableTopCatalogListScreen(
7793
appState = appState,
7894
catalogItemsListState = catalogItemsListState,
7995
catalogItems = catalogItems,
@@ -83,7 +99,7 @@ fun CatalogListContent(
8399
onCatalogItemSelected = onCatalogItemSelected,
84100
)
85101
}
86-
102+
87103
appState.isCompactHeight.and(appState.isLandscape)
88104
.and(appState.scaffoldContentType == ScaffoldContentType.SinglePane)
89105
.and(appState.devicePosture is DevicePosture.Separating.Book) -> {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import androidx.compose.ui.res.stringResource
2424
import androidx.compose.ui.text.font.FontWeight
2525
import androidx.compose.ui.unit.dp
2626
import dev.marlonlom.apps.cappajv.R
27+
import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
2728
import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
2829
import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType
2930

@@ -42,11 +43,17 @@ fun CatalogListHeadline(
4243
) {
4344

4445
val rowPaddingValues = when {
46+
appState.isLandscape.not().and(appState.devicePosture is DevicePosture.Separating)
47+
.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> PaddingValues(vertical = 20.dp)
48+
4549
appState.isCompactHeight -> PaddingValues(vertical = 20.dp)
4650
else -> PaddingValues(top = 40.dp, bottom = 20.dp)
4751
}
4852

4953
val headlineTextStyle = when {
54+
appState.isLandscape.not().and(appState.devicePosture is DevicePosture.Separating)
55+
.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> MaterialTheme.typography.headlineSmall
56+
5057
appState.isLandscape.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> MaterialTheme.typography.headlineSmall
5158
else -> MaterialTheme.typography.headlineLarge
5259
}

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
* Copyright 2024 Marlonlom
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
package dev.marlonlom.apps.cappajv.features.catalog_list.screens
7+
8+
import androidx.compose.foundation.ExperimentalFoundationApi
9+
import androidx.compose.foundation.background
10+
import androidx.compose.foundation.layout.Arrangement
11+
import androidx.compose.foundation.layout.Column
12+
import androidx.compose.foundation.layout.ExperimentalLayoutApi
13+
import androidx.compose.foundation.layout.Row
14+
import androidx.compose.foundation.layout.fillMaxHeight
15+
import androidx.compose.foundation.layout.fillMaxSize
16+
import androidx.compose.foundation.layout.fillMaxWidth
17+
import androidx.compose.foundation.layout.padding
18+
import androidx.compose.foundation.layout.safeContentPadding
19+
import androidx.compose.foundation.lazy.LazyListState
20+
import androidx.compose.material3.MaterialTheme
21+
import androidx.compose.runtime.Composable
22+
import androidx.compose.ui.Alignment
23+
import androidx.compose.ui.Modifier
24+
import androidx.compose.ui.unit.dp
25+
import dev.marlonlom.apps.cappajv.core.database.entities.CatalogItemTuple
26+
import dev.marlonlom.apps.cappajv.features.catalog_list.parts.CatalogListHeadline
27+
import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogCategoriesChipGroup
28+
import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogListBanner
29+
import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogListTuplesSlot
30+
import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
31+
import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
32+
33+
34+
/**
35+
* TableTop catalog list screen composable ui.
36+
*
37+
* @author marlonlom
38+
*
39+
* @param appState Application ui state.
40+
* @param catalogItemsListState Catalog items lazy list state.
41+
* @param catalogItems Catalog items list.
42+
* @param categories Categories list.
43+
* @param selectedCategory Selected category name.
44+
* @param onSelectedCategoryChanged Action for category selected.
45+
* @param onCatalogItemSelected Action for catalog item selected.
46+
* @param modifier Modifier for this composable.
47+
*/
48+
@ExperimentalLayoutApi
49+
@ExperimentalFoundationApi
50+
@Composable
51+
fun TableTopCatalogListScreen(
52+
appState: CappajvAppState,
53+
catalogItemsListState: LazyListState,
54+
catalogItems: List<CatalogItemTuple>,
55+
categories: List<String>,
56+
selectedCategory: String,
57+
onSelectedCategoryChanged: (String) -> Unit,
58+
onCatalogItemSelected: (Long) -> Unit,
59+
modifier: Modifier = Modifier,
60+
) {
61+
val hingeRatio = (appState.devicePosture as DevicePosture.Separating.TableTop).hingeRatio
62+
63+
Column(
64+
modifier = modifier.fillMaxWidth(),
65+
) {
66+
Row(
67+
modifier = modifier.fillMaxHeight(hingeRatio),
68+
horizontalArrangement = Arrangement.spacedBy(20.dp)
69+
) {
70+
Column(modifier = modifier.fillMaxWidth(0.45f)) {
71+
CatalogListHeadline(appState)
72+
CatalogListBanner(appState)
73+
CatalogCategoriesChipGroup(
74+
categories = categories,
75+
selectedCategory = selectedCategory,
76+
onCategoryChipSelected = { onSelectedCategoryChanged(it) },
77+
)
78+
}
79+
Column(modifier = modifier.safeContentPadding()) {
80+
CatalogListTuplesSlot(
81+
appState = appState,
82+
catalogItemsListState = catalogItemsListState,
83+
catalogTuples = catalogItems,
84+
onCatalogItemTupleClicked = onCatalogItemSelected,
85+
)
86+
}
87+
}
88+
Row(
89+
modifier = modifier
90+
.fillMaxSize()
91+
.padding(top = 30.dp)
92+
.safeContentPadding()
93+
.background(
94+
MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.25f)
95+
),
96+
) {
97+
98+
}
99+
}
100+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import androidx.compose.ui.res.painterResource
3838
import androidx.compose.ui.unit.dp
3939
import androidx.compose.ui.util.lerp
4040
import dev.marlonlom.apps.cappajv.R
41+
import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
4142
import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
4243
import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType
4344
import kotlinx.coroutines.delay
@@ -77,6 +78,10 @@ fun CatalogListBanner(
7778
}
7879

7980
val horizontalPagerHeight = when {
81+
appState.isLandscape.not()
82+
.and(appState.devicePosture is DevicePosture.Separating)
83+
.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> 100.dp
84+
8085
appState.isLandscape.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> 100.dp
8186
appState.isLandscape -> 120.dp
8287
else -> 160.dp

0 commit comments

Comments
 (0)