Make toolbar scrollable on CuratedPhotosScreen and SearchDashboardScreen

SIKV · Jun 18, 2024 · 7717634 · 7717634
1 parent 6dd9aaa
commit 7717634
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 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
@@ -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
@@ -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
@@ -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(