From 0bbf31344259a136c4aea24a45657b0d9cd53a6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marlon=20L=C3=B3pez?= Date: Sun, 24 Mar 2024 15:38:06 -0500 Subject: [PATCH] Feature/add navigation rail catalog home layout (#34) * feat(mobile-app): Renamed old files * feat(mobile-app): Added catalog home layout when navigation rail is displayed and is in book mode --- .../catalog_list/CatalogListContent.kt | 18 +++++++++++++----- .../catalog_list/parts/CatalogListHeadline.kt | 14 ++++++++++---- ...kt => LandscapeTwoPaneCatalogListScreen.kt} | 9 +++++++-- .../catalog_list/slots/CatalogListBanner.kt | 9 ++++++++- 4 files changed, 38 insertions(+), 12 deletions(-) rename apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/{TwoPaneCatalogListScreen.kt => LandscapeTwoPaneCatalogListScreen.kt} (91%) diff --git a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/CatalogListContent.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/CatalogListContent.kt index be575a2..e2bda61 100644 --- a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/CatalogListContent.kt +++ b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/CatalogListContent.kt @@ -13,7 +13,7 @@ import dev.marlonlom.apps.cappajv.core.database.entities.CatalogItemTuple import dev.marlonlom.apps.cappajv.features.catalog_list.screens.CompactTableTopCatalogListScreen import dev.marlonlom.apps.cappajv.features.catalog_list.screens.DefaultPortraitCatalogListScreen import dev.marlonlom.apps.cappajv.features.catalog_list.screens.LandscapeCompactCatalogListScreen -import dev.marlonlom.apps.cappajv.features.catalog_list.screens.TwoPaneCatalogListScreen +import dev.marlonlom.apps.cappajv.features.catalog_list.screens.LandscapeTwoPaneCatalogListScreen import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState import dev.marlonlom.apps.cappajv.ui.main.scaffold.ScaffoldContentType @@ -47,8 +47,8 @@ fun CatalogListContent( when { appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal) - .and(appState.navigationType == NavigationType.EXPANDED_NAV) -> { - TwoPaneCatalogListScreen( + .and(listOf(NavigationType.EXPANDED_NAV, NavigationType.NAVIGATION_RAIL).contains(appState.navigationType)) -> { + LandscapeTwoPaneCatalogListScreen( appState = appState, catalogItemsListState = catalogItemsListState, catalogItems = catalogItems, @@ -60,8 +60,16 @@ fun CatalogListContent( } (appState.devicePosture is DevicePosture.Separating.Book).and(appState.isCompactHeight.not()) - .and(appState.isLandscape.not()) -> { - + .and(appState.isLandscape) -> { + LandscapeTwoPaneCatalogListScreen( + appState = appState, + catalogItemsListState = catalogItemsListState, + catalogItems = catalogItems, + categories = categories, + selectedCategory = selectedCategory, + onSelectedCategoryChanged = onSelectedCategoryChanged, + onCatalogItemSelected = onCatalogItemSelected, + ) } appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal).and(appState.isCompactHeight) -> { diff --git a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/parts/CatalogListHeadline.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/parts/CatalogListHeadline.kt index fafec20..3dc8f32 100644 --- a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/parts/CatalogListHeadline.kt +++ b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/parts/CatalogListHeadline.kt @@ -25,6 +25,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import dev.marlonlom.apps.cappajv.R import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState +import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType /** * Catalog listing headline composable ui. @@ -45,18 +46,23 @@ fun CatalogListHeadline( else -> PaddingValues(top = 40.dp, bottom = 20.dp) } + val headlineTextStyle = when { + appState.isLandscape.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> MaterialTheme.typography.headlineSmall + else -> MaterialTheme.typography.headlineLarge + } + Row( modifier = modifier - .background(MaterialTheme.colorScheme.surface) - .fillMaxWidth() - .padding(rowPaddingValues), + .background(MaterialTheme.colorScheme.surface) + .fillMaxWidth() + .padding(rowPaddingValues), verticalAlignment = Alignment.Bottom, horizontalArrangement = Arrangement.SpaceBetween ) { Text( modifier = Modifier.fillMaxWidth(0.75f), text = stringResource(R.string.text_catalog_list_title), - style = MaterialTheme.typography.headlineLarge, + style = headlineTextStyle, fontWeight = FontWeight.Bold, maxLines = 2 ) diff --git a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/TwoPaneCatalogListScreen.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/LandscapeTwoPaneCatalogListScreen.kt similarity index 91% rename from apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/TwoPaneCatalogListScreen.kt rename to apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/LandscapeTwoPaneCatalogListScreen.kt index ae36942..76a7281 100644 --- a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/TwoPaneCatalogListScreen.kt +++ b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/LandscapeTwoPaneCatalogListScreen.kt @@ -25,6 +25,7 @@ import dev.marlonlom.apps.cappajv.features.catalog_list.parts.CatalogListHeadlin import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogCategoriesChipGroup import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogListBanner import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogListTuplesSlot +import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState @@ -45,7 +46,7 @@ import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState @ExperimentalLayoutApi @ExperimentalFoundationApi @Composable -fun TwoPaneCatalogListScreen( +fun LandscapeTwoPaneCatalogListScreen( appState: CappajvAppState, catalogItemsListState: LazyListState, catalogItems: List, @@ -55,13 +56,17 @@ fun TwoPaneCatalogListScreen( onCatalogItemSelected: (Long) -> Unit, modifier: Modifier = Modifier, ) { + val listColumnWidthFraction = when { + appState.devicePosture is DevicePosture.Separating.Book -> 0.4f + else -> 0.33f + } Row( modifier = modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(20.dp) ) { Column( - modifier = modifier.fillMaxWidth(0.33f) + modifier = modifier.fillMaxWidth(listColumnWidthFraction) ) { CatalogListHeadline(appState) CatalogListBanner(appState) diff --git a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogListBanner.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogListBanner.kt index 3db0a7a..c7df50b 100644 --- a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogListBanner.kt +++ b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogListBanner.kt @@ -39,6 +39,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.util.lerp import dev.marlonlom.apps.cappajv.R import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState +import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType import kotlinx.coroutines.delay import kotlinx.coroutines.yield @@ -75,12 +76,18 @@ fun CatalogListBanner( } } + val horizontalPagerHeight = when { + appState.isLandscape.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> 100.dp + appState.isLandscape -> 120.dp + else -> 160.dp + } + Column { HorizontalPager( state = pagerState, contentPadding = PaddingValues(0.dp), modifier = modifier - .height(if (appState.isLandscape) 120.dp else 160.dp) + .height(horizontalPagerHeight) .fillMaxWidth() ) { page -> BannerCard(