-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/add catalog search book screen UI (#25)
* feat(mobile-app): Updated catalog search headline composable ui * feat(mobile-app): Updated catalog search slots composable ui * feat(mobile-app): Updated catalog search route ui content for book mode
- Loading branch information
Showing
8 changed files
with
271 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
...in/dev/marlonlom/apps/cappajv/features/catalog_search/screens/CatalogSearchRouteScreen.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /* | ||
| * Copyright 2024 Marlonlom | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| package dev.marlonlom.apps.cappajv.features.catalog_search.screens | ||
|
|
||
| import androidx.compose.foundation.ExperimentalFoundationApi | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.MutableState | ||
| import androidx.compose.runtime.State | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.CatalogSearchUiState | ||
| import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture | ||
| import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState | ||
| import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType | ||
|
|
||
| /** | ||
| * Catalog search route screen content composable ui. | ||
| * | ||
| * @author marlonlom | ||
| * | ||
| * @param appState Application ui state. | ||
| * @param queryText Query text for searching. | ||
| * @param showClearIcon True/False if query text should be cleared. | ||
| * @param onSearchReady Action for query text ready for search. | ||
| * @param searchResultUiState Catalog search results ui state. | ||
| * @param onSearchedItemClicked Action for searched item clicked. | ||
| */ | ||
| @ExperimentalFoundationApi | ||
| @Composable | ||
| fun CatalogSearchRouteScreen( | ||
| appState: CappajvAppState, | ||
| queryText: MutableState<String>, | ||
| showClearIcon: State<Boolean>, | ||
| onSearchReady: () -> Unit, | ||
| searchResultUiState: CatalogSearchUiState, | ||
| onSearchedItemClicked: (Long) -> Unit, | ||
| ) { | ||
| when { | ||
| appState.isLandscape | ||
| .and(appState.devicePosture is DevicePosture.Separating.Book) | ||
| .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> { | ||
| LandscapeTwoPaneCatalogSearchScreen( | ||
| appState = appState, | ||
| queryText = queryText, | ||
| showClearIcon = showClearIcon, | ||
| onSearchReady = onSearchReady, | ||
| searchResultUiState = searchResultUiState, | ||
| onSearchedItemClicked = onSearchedItemClicked | ||
| ) | ||
| } | ||
|
|
||
| appState.isLandscape | ||
| .and(appState.devicePosture == DevicePosture.Normal) | ||
| .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> { | ||
| LandscapeTwoPaneCatalogSearchScreen( | ||
| appState = appState, | ||
| queryText = queryText, | ||
| showClearIcon = showClearIcon, | ||
| onSearchReady = onSearchReady, | ||
| searchResultUiState = searchResultUiState, | ||
| onSearchedItemClicked = onSearchedItemClicked | ||
| ) | ||
| } | ||
|
|
||
| else -> { | ||
| DefaultPortraitCatalogSearchScreen( | ||
| appState = appState, | ||
| queryText = queryText, | ||
| showClearIcon = showClearIcon, | ||
| onSearchReady = onSearchReady, | ||
| searchResultUiState = searchResultUiState, | ||
| onSearchedItemClicked = onSearchedItemClicked | ||
| ) | ||
| } | ||
| } | ||
| } |
69 changes: 69 additions & 0 deletions
69
...lonlom/apps/cappajv/features/catalog_search/screens/DefaultPortraitCatalogSearchScreen.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| /* | ||
| * Copyright 2024 Marlonlom | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| package dev.marlonlom.apps.cappajv.features.catalog_search.screens | ||
|
|
||
| import androidx.compose.foundation.ExperimentalFoundationApi | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.MutableState | ||
| import androidx.compose.runtime.State | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.unit.dp | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.CatalogSearchUiState | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.parts.CatalogSearchHeadline | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchInputSlot | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchResultsSlot | ||
| import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState | ||
|
|
||
| /** | ||
| * Default portrait catalog search screen composable ui. | ||
| * | ||
| * @author marlonlom | ||
| * | ||
| * @param appState Application ui state. | ||
| * @param queryText Query text for searching. | ||
| * @param showClearIcon True/False if query text should be cleared. | ||
| * @param onSearchReady Action for query text ready for search. | ||
| * @param searchResultUiState Catalog search results ui state. | ||
| * @param onSearchedItemClicked Action for searched item clicked. | ||
| */ | ||
| @ExperimentalFoundationApi | ||
| @Composable | ||
| internal fun DefaultPortraitCatalogSearchScreen( | ||
| appState: CappajvAppState, | ||
| queryText: MutableState<String>, | ||
| showClearIcon: State<Boolean>, | ||
| onSearchReady: () -> Unit, | ||
| searchResultUiState: CatalogSearchUiState, | ||
| onSearchedItemClicked: (Long) -> Unit | ||
| ) { | ||
| val contentHorizontalPadding = when { | ||
| appState.isLandscape.not().and(appState.isMediumWidth) -> 40.dp | ||
| appState.isLandscape.not().and(appState.isExpandedWidth) -> 80.dp | ||
| else -> 20.dp | ||
| } | ||
|
|
||
| Column( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(contentHorizontalPadding) | ||
| ) { | ||
| CatalogSearchHeadline(appState) | ||
| CatalogSearchInputSlot( | ||
| appState = appState, | ||
| queryText = queryText, | ||
| showClearIcon = showClearIcon, | ||
| onSearchReady = onSearchReady, | ||
| ) | ||
| CatalogSearchResultsSlot( | ||
| appState = appState, | ||
| searchResultUiState = searchResultUiState, | ||
| onSearchedItemClicked = onSearchedItemClicked, | ||
| ) | ||
| } | ||
| } |
82 changes: 82 additions & 0 deletions
82
...onlom/apps/cappajv/features/catalog_search/screens/LandscapeTwoPaneCatalogSearchScreen.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| /* | ||
| * Copyright 2024 Marlonlom | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| package dev.marlonlom.apps.cappajv.features.catalog_search.screens | ||
|
|
||
| import androidx.compose.foundation.ExperimentalFoundationApi | ||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.layout.Column | ||
| 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.material3.MaterialTheme | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.MutableState | ||
| import androidx.compose.runtime.State | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.unit.dp | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.CatalogSearchUiState | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.parts.CatalogSearchHeadline | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchInputSlot | ||
| import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchResultsSlot | ||
| import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState | ||
|
|
||
| /** | ||
| * Landscape two-pane catalog search screen composable ui. | ||
| * | ||
| * @author marlonlom | ||
| * | ||
| * @param appState Application ui state. | ||
| * @param queryText Query text for searching. | ||
| * @param showClearIcon True/False if query text should be cleared. | ||
| * @param onSearchReady Action for query text ready for search. | ||
| * @param searchResultUiState Catalog search results ui state. | ||
| * @param onSearchedItemClicked Action for searched item clicked. | ||
| */ | ||
| @ExperimentalFoundationApi | ||
| @Composable | ||
| internal fun LandscapeTwoPaneCatalogSearchScreen( | ||
| appState: CappajvAppState, | ||
| queryText: MutableState<String>, | ||
| showClearIcon: State<Boolean>, | ||
| onSearchReady: () -> Unit, | ||
| searchResultUiState: CatalogSearchUiState, | ||
| onSearchedItemClicked: (Long) -> Unit | ||
| ) { | ||
| Row { | ||
| Column( | ||
| modifier = Modifier | ||
| .fillMaxWidth(0.45f) | ||
| .fillMaxHeight() | ||
| .padding(horizontal = 20.dp), | ||
| ) { | ||
| CatalogSearchHeadline(appState) | ||
| CatalogSearchInputSlot( | ||
| appState = appState, | ||
| queryText = queryText, | ||
| showClearIcon = showClearIcon, | ||
| onSearchReady = onSearchReady, | ||
| ) | ||
| CatalogSearchResultsSlot( | ||
| appState = appState, | ||
| searchResultUiState = searchResultUiState, | ||
| onSearchedItemClicked = onSearchedItemClicked, | ||
| ) | ||
| } | ||
| Column( | ||
| modifier = Modifier | ||
| .background(MaterialTheme.colorScheme.primaryContainer) | ||
| .fillMaxSize() | ||
| .safeContentPadding(), | ||
| ) { | ||
| Text(text = "Detail") | ||
| } | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.