From 7717634aaa1ebd9d55aa9bbbd396f2a16f6b6275 Mon Sep 17 00:00:00 2001 From: SIKV Date: Tue, 18 Jun 2024 22:10:46 +0300 Subject: [PATCH] Make toolbar scrollable on CuratedPhotosScreen and SearchDashboardScreen --- .../github/sikv/photos/compose/ui/Scaffold.kt | 22 ++++++---- .../photos/curated/CuratedPhotosScreen.kt | 4 +- .../photos/search/ui/SearchDashboardScreen.kt | 42 ++++++------------- 3 files changed, 29 insertions(+), 39 deletions(-) diff --git a/compose-ui/src/main/java/com/github/sikv/photos/compose/ui/Scaffold.kt b/compose-ui/src/main/java/com/github/sikv/photos/compose/ui/Scaffold.kt index 0a3c2e2b..2581b82f 100644 --- a/compose-ui/src/main/java/com/github/sikv/photos/compose/ui/Scaffold.kt +++ b/compose-ui/src/main/java/com/github/sikv/photos/compose/ui/Scaffold.kt @@ -3,35 +3,43 @@ package com.github.sikv.photos.compose.ui import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Scaffold -import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.input.nestedscroll.nestedScroll @OptIn(ExperimentalMaterial3Api::class) @Composable fun Scaffold( - modifier: Modifier = Modifier, - title: String, + title: @Composable () -> Unit, actions: @Composable RowScope.() -> Unit = {}, content: @Composable BoxScope.() -> Unit ) { + val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior() + Scaffold( topBar = { TopAppBar( - title = { Text(text = title) }, - actions = actions + title = title, + actions = actions, + scrollBehavior = scrollBehavior ) }, - modifier = modifier + contentWindowInsets = WindowInsets(0, 0, 0, 0), + modifier = Modifier + .nestedScroll(scrollBehavior.nestedScrollConnection) ) { padding -> Box( content = content, modifier = Modifier - .padding(padding) // TODO: Fix bottom padding. + .fillMaxSize() + .padding(padding) ) } } diff --git a/feature/curated-photos/src/main/java/com/github/sikv/photos/curated/CuratedPhotosScreen.kt b/feature/curated-photos/src/main/java/com/github/sikv/photos/curated/CuratedPhotosScreen.kt index 9ccc9318..c9d6860b 100644 --- a/feature/curated-photos/src/main/java/com/github/sikv/photos/curated/CuratedPhotosScreen.kt +++ b/feature/curated-photos/src/main/java/com/github/sikv/photos/curated/CuratedPhotosScreen.kt @@ -4,6 +4,7 @@ import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.material3.Icon import androidx.compose.material3.IconButton +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.platform.LocalContext @@ -18,7 +19,6 @@ import com.github.sikv.photos.compose.ui.Scaffold import com.github.sikv.photos.domain.ListLayout import com.github.sikv.photos.domain.Photo -// TODO: Add scrollable toolbar. // TODO: Add loading indicator. @Composable @@ -30,7 +30,7 @@ internal fun CuratedPhotosScreen( val listLayout by viewModel.listLayoutState.collectAsStateWithLifecycle() Scaffold( - title = stringResource(id = R.string.photos), + title = { Text(stringResource(id = R.string.photos)) }, actions = { SwitchLayoutAction(viewModel = viewModel) } diff --git a/feature/search/src/main/java/com/github/sikv/photos/search/ui/SearchDashboardScreen.kt b/feature/search/src/main/java/com/github/sikv/photos/search/ui/SearchDashboardScreen.kt index 6f03728a..8acd5a27 100644 --- a/feature/search/src/main/java/com/github/sikv/photos/search/ui/SearchDashboardScreen.kt +++ b/feature/search/src/main/java/com/github/sikv/photos/search/ui/SearchDashboardScreen.kt @@ -4,20 +4,18 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.width -import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Scaffold import androidx.compose.material3.Text -import androidx.compose.material3.TopAppBar import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import com.github.sikv.photos.compose.ui.Scaffold import com.github.sikv.photos.compose.ui.Spacing import com.github.sikv.photos.domain.Photo import com.github.sikv.photos.recommendations.Recommendations @@ -31,31 +29,6 @@ internal fun SearchDashboardScreen( recommendationsEnabled: Boolean ) { Scaffold( - topBar = { - Toolbar( - onSearchClick = onSearchClick, - onVoiceSearchClick = onVoiceSearchClick - ) - }, - ) { padding -> - if (recommendationsEnabled) { - Recommendations( - onPhotoClick = onPhotoClick, - modifier = Modifier - .padding(padding) - .fillMaxSize() - ) - } - } -} - -@OptIn(ExperimentalMaterial3Api::class) -@Composable -private fun Toolbar( - onSearchClick: () -> Unit, - onVoiceSearchClick: () -> Unit, -) { - TopAppBar( title = { SearchBar( onSearchClick = onSearchClick @@ -70,8 +43,16 @@ private fun Toolbar( contentDescription = stringResource(id = R.string.voice_search) ) } + }, + ) { + if (recommendationsEnabled) { + Recommendations( + onPhotoClick = onPhotoClick, + modifier = Modifier + .fillMaxSize() + ) } - ) + } } @Composable @@ -81,6 +62,7 @@ private fun SearchBar( Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier + .fillMaxWidth() .clickable(onClick = onSearchClick) ) { Icon(