Skip to content

Commit

Permalink
Feature/add navigation rail catalog home layout (#35)
Browse files Browse the repository at this point in the history
* feat(mobile-app): Added catalog home layout when navigation rail is displayed and is in tabletop mode
  • Loading branch information
marlonlom authored Mar 24, 2024
1 parent 0bbf313 commit bb35655
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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(
Expand All @@ -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,
Expand All @@ -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) -> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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<CatalogItemTuple>,
categories: List<String>,
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)
),
) {

}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit bb35655

Please sign in to comment.