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
marlonlom · Mar 24, 2024 · 0bbf313 · 0bbf313
1 parent d91e0bf
commit 0bbf313
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/...pp/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/CatalogListContent.kt b/...pp/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/...main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/parts/CatalogListHeadline.kt b/...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/..._list/screens/TwoPaneCatalogListScreen.kt → ...eens/LandscapeTwoPaneCatalogListScreen.kt b/..._list/screens/TwoPaneCatalogListScreen.kt → ...eens/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<CatalogItemTuple>,
@@ -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/...c/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogListBanner.kt b/...c/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(