From 8c2f54d55a93d254138ea9f5c3d376460348b6e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marlon=20L=C3=B3pez?= Date: Sun, 24 Mar 2024 15:16:07 -0500 Subject: [PATCH 1/4] feat(mobile-app): Renamed old files --- ...gListScreen.kt => LandscapeTwoPaneCatalogListScreen.kt} | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) rename apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/{TwoPaneCatalogListScreen.kt => LandscapeTwoPaneCatalogListScreen.kt} (92%) 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 92% 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..a27df9a 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 @@ -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) From 09467951182f94f73fbff74dc21dd358084b2b68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marlon=20L=C3=B3pez?= Date: Sun, 24 Mar 2024 15:17:00 -0500 Subject: [PATCH 2/4] 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 ++++++++++---- .../LandscapeTwoPaneCatalogListScreen.kt | 2 +- .../catalog_list/slots/CatalogListBanner.kt | 9 ++++++++- 4 files changed, 32 insertions(+), 11 deletions(-) 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/LandscapeTwoPaneCatalogListScreen.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/LandscapeTwoPaneCatalogListScreen.kt index a27df9a..76a7281 100644 --- a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/LandscapeTwoPaneCatalogListScreen.kt +++ b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/LandscapeTwoPaneCatalogListScreen.kt @@ -46,7 +46,7 @@ import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState @ExperimentalLayoutApi @ExperimentalFoundationApi @Composable -fun TwoPaneCatalogListScreen( +fun LandscapeTwoPaneCatalogListScreen( appState: CappajvAppState, catalogItemsListState: LazyListState, catalogItems: List, 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( From 7db6f46fc5f5b347694ae573efabf2a08df904d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marlon=20L=C3=B3pez?= Date: Sun, 24 Mar 2024 16:01:42 -0500 Subject: [PATCH 3/4] feat(mobile-app): Added catalog home layout when navigation rail is displayed and is in tabletop mode --- .../catalog_list/CatalogListContent.kt | 22 +++- .../catalog_list/parts/CatalogListHeadline.kt | 7 ++ .../screens/TableTopCatalogListScreen.kt | 100 ++++++++++++++++++ .../catalog_list/slots/CatalogListBanner.kt | 5 + 4 files changed, 131 insertions(+), 3 deletions(-) create mode 100644 apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/TableTopCatalogListScreen.kt 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 e2bda61..aa1e63a 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 @@ -14,6 +14,7 @@ import dev.marlonlom.apps.cappajv.features.catalog_list.screens.CompactTableTopC 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.LandscapeTwoPaneCatalogListScreen +import dev.marlonlom.apps.cappajv.features.catalog_list.screens.TableTopCatalogListScreen 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 @@ -46,6 +47,19 @@ fun CatalogListContent( ) { when { + appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal) + .and(appState.isCompactHeight) -> { + LandscapeCompactCatalogListScreen( + appState = appState, + catalogItemsListState = catalogItemsListState, + catalogItems = catalogItems, + categories = categories, + selectedCategory = selectedCategory, + onSelectedCategoryChanged = onSelectedCategoryChanged, + onCatalogItemSelected = onCatalogItemSelected, + ) + } + appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal) .and(listOf(NavigationType.EXPANDED_NAV, NavigationType.NAVIGATION_RAIL).contains(appState.navigationType)) -> { LandscapeTwoPaneCatalogListScreen( @@ -72,8 +86,10 @@ fun CatalogListContent( ) } - appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal).and(appState.isCompactHeight) -> { - LandscapeCompactCatalogListScreen( + (appState.devicePosture is DevicePosture.Separating.TableTop) + .and(appState.isCompactWidth.not()) + .and(appState.isLandscape.not()) -> { + TableTopCatalogListScreen( appState = appState, catalogItemsListState = catalogItemsListState, catalogItems = catalogItems, @@ -83,7 +99,7 @@ fun CatalogListContent( onCatalogItemSelected = onCatalogItemSelected, ) } - + appState.isCompactHeight.and(appState.isLandscape) .and(appState.scaffoldContentType == ScaffoldContentType.SinglePane) .and(appState.devicePosture is DevicePosture.Separating.Book) -> { 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 3dc8f32..5edc4d4 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 @@ -24,6 +24,7 @@ import androidx.compose.ui.res.stringResource 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.layout.DevicePosture import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType @@ -42,11 +43,17 @@ fun CatalogListHeadline( ) { val rowPaddingValues = when { + appState.isLandscape.not().and(appState.devicePosture is DevicePosture.Separating) + .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> PaddingValues(vertical = 20.dp) + appState.isCompactHeight -> PaddingValues(vertical = 20.dp) else -> PaddingValues(top = 40.dp, bottom = 20.dp) } val headlineTextStyle = when { + appState.isLandscape.not().and(appState.devicePosture is DevicePosture.Separating) + .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> MaterialTheme.typography.headlineSmall + appState.isLandscape.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> MaterialTheme.typography.headlineSmall else -> MaterialTheme.typography.headlineLarge } diff --git a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/TableTopCatalogListScreen.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/TableTopCatalogListScreen.kt new file mode 100644 index 0000000..f1a6d5e --- /dev/null +++ b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/TableTopCatalogListScreen.kt @@ -0,0 +1,100 @@ +/* + * Copyright 2024 Marlonlom + * SPDX-License-Identifier: Apache-2.0 + */ + +package dev.marlonlom.apps.cappajv.features.catalog_list.screens + +import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.ExperimentalLayoutApi +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.safeContentPadding +import androidx.compose.foundation.lazy.LazyListState +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import dev.marlonlom.apps.cappajv.core.database.entities.CatalogItemTuple +import dev.marlonlom.apps.cappajv.features.catalog_list.parts.CatalogListHeadline +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 + + +/** + * TableTop catalog list screen composable ui. + * + * @author marlonlom + * + * @param appState Application ui state. + * @param catalogItemsListState Catalog items lazy list state. + * @param catalogItems Catalog items list. + * @param categories Categories list. + * @param selectedCategory Selected category name. + * @param onSelectedCategoryChanged Action for category selected. + * @param onCatalogItemSelected Action for catalog item selected. + * @param modifier Modifier for this composable. + */ +@ExperimentalLayoutApi +@ExperimentalFoundationApi +@Composable +fun TableTopCatalogListScreen( + appState: CappajvAppState, + catalogItemsListState: LazyListState, + catalogItems: List, + categories: List, + selectedCategory: String, + onSelectedCategoryChanged: (String) -> Unit, + onCatalogItemSelected: (Long) -> Unit, + modifier: Modifier = Modifier, +) { + val hingeRatio = (appState.devicePosture as DevicePosture.Separating.TableTop).hingeRatio + + Column( + modifier = modifier.fillMaxWidth(), + ) { + Row( + modifier = modifier.fillMaxHeight(hingeRatio), + horizontalArrangement = Arrangement.spacedBy(20.dp) + ) { + Column(modifier = modifier.fillMaxWidth(0.45f)) { + CatalogListHeadline(appState) + CatalogListBanner(appState) + CatalogCategoriesChipGroup( + categories = categories, + selectedCategory = selectedCategory, + onCategoryChipSelected = { onSelectedCategoryChanged(it) }, + ) + } + Column(modifier = modifier.safeContentPadding()) { + CatalogListTuplesSlot( + appState = appState, + catalogItemsListState = catalogItemsListState, + catalogTuples = catalogItems, + onCatalogItemTupleClicked = onCatalogItemSelected, + ) + } + } + Row( + modifier = modifier + .fillMaxSize() + .padding(top = 30.dp) + .safeContentPadding() + .background( + MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.25f) + ), + ) { + + } + } +} 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 c7df50b..5962140 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 @@ -38,6 +38,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import androidx.compose.ui.util.lerp import dev.marlonlom.apps.cappajv.R +import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType import kotlinx.coroutines.delay @@ -77,6 +78,10 @@ fun CatalogListBanner( } val horizontalPagerHeight = when { + appState.isLandscape.not() + .and(appState.devicePosture is DevicePosture.Separating) + .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> 100.dp + appState.isLandscape.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> 100.dp appState.isLandscape -> 120.dp else -> 160.dp From 9b4b6addbd0b739a382435534464acf99c6bdeaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marlon=20L=C3=B3pez?= Date: Sun, 24 Mar 2024 16:07:48 -0500 Subject: [PATCH 4/4] feat(mobile-app): Added catalog home layout when navigation rail is displayed and is in tabletop mode --- .../apps/cappajv/features/catalog_list/CatalogListContent.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 aa1e63a..50dccf9 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 @@ -99,7 +99,7 @@ fun CatalogListContent( onCatalogItemSelected = onCatalogItemSelected, ) } - + appState.isCompactHeight.and(appState.isLandscape) .and(appState.scaffoldContentType == ScaffoldContentType.SinglePane) .and(appState.devicePosture is DevicePosture.Separating.Book) -> {