Correct top bar padding (#1073)

* Correct top bar padding * Remove unnecessary whitespace --------- Co-authored-by: Ashley Davies <[email protected]>
ashdavies · Jul 17, 2024 · c34731e · c34731e
1 parent 06cc41f
commit c34731e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 116 deletions.
diff --git a/after-party/src/androidDebug/kotlin/io/ashdavies/gallery/GalleryScreen.preview.kt b/after-party/src/androidDebug/kotlin/io/ashdavies/gallery/GalleryScreen.preview.kt
@@ -3,7 +3,6 @@ package io.ashdavies.gallery
 import android.content.res.Configuration
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.darkColorScheme
@@ -12,16 +11,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
 import kotlinx.collections.immutable.persistentListOf
 
-@Preview
-@Composable
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
-@OptIn(ExperimentalMaterial3Api::class)
-internal fun GalleryTopAppBarPreview() {
-    GalleryPreviewTheme {
-        GalleryTopAppBar()
-    }
-}
-
 @Composable
 @Preview(heightDp = 120)
 @OptIn(ExperimentalFoundationApi::class)

diff --git a/after-party/src/commonMain/kotlin/io/ashdavies/events/EventsScreen.kt b/after-party/src/commonMain/kotlin/io/ashdavies/events/EventsScreen.kt
@@ -16,25 +16,18 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowDropDown
 import androidx.compose.material.icons.filled.DateRange
 import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.Button
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
-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.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.rememberVectorPainter
-import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -60,57 +53,48 @@ internal object EventsScreen : Parcelable, Screen {
 @OptIn(
     ExperimentalFoundationApi::class,
     ExperimentalMaterialApi::class,
-    ExperimentalMaterial3Api::class,
 )
-internal fun EventsScreen(state: EventsScreen.State, modifier: Modifier = Modifier) {
-    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
-
-    Scaffold(
-        modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
-        topBar = { EventsTopAppBar("Events") },
-    ) { contentPadding ->
-        val pullRefreshState = rememberPullRefreshState(
-            refreshing = state.pagingItems.loadState.isRefreshing,
-            onRefresh = { state.pagingItems.refresh() },
-        )
-
-        Box(
-            modifier = Modifier
-                .padding(contentPadding)
-                .pullRefresh(pullRefreshState),
-        ) {
-            if (state.pagingItems.loadState.hasError) {
-                EventFailure(state.pagingItems.loadState.errorMessage ?: "Unknown Error")
-            }
+internal fun EventsScreen(
+    state: EventsScreen.State,
+    modifier: Modifier = Modifier,
+) {
+    val pullRefreshState = rememberPullRefreshState(
+        refreshing = state.pagingItems.loadState.isRefreshing,
+        onRefresh = { state.pagingItems.refresh() },
+    )
 
-            PullRefreshIndicator(
-                modifier = Modifier.align(Alignment.TopCenter),
-                refreshing = state.pagingItems.loadState.isRefreshing,
-                state = pullRefreshState,
-            )
+    Box(modifier.pullRefresh(pullRefreshState)) {
+        if (state.pagingItems.loadState.hasError) {
+            EventFailure(state.pagingItems.loadState.errorMessage ?: "Unknown Error")
+        }
 
-            FadeVisibility(state.pagingItems.itemCount > 0) {
-                LazyColumn(Modifier.fillMaxSize()) {
-                    items(state.pagingItems.itemCount) {
-                        EventSection(
-                            event = state.pagingItems[it],
-                            modifier = Modifier.animateItemPlacement(),
-                        )
-                    }
+        FadeVisibility(state.pagingItems.itemCount > 0) {
+            LazyColumn(Modifier.fillMaxSize()) {
+                items(state.pagingItems.itemCount) {
+                    EventSection(
+                        event = state.pagingItems[it],
+                        modifier = Modifier.animateItemPlacement(),
+                    )
                 }
             }
+        }
 
-            FadeVisibility(state.pagingItems.loadState.isRefreshing) {
-                LazyColumn(Modifier.fillMaxSize()) {
-                    items(PLACEHOLDER_COUNT) {
-                        EventSection(
-                            event = null,
-                            modifier = Modifier.animateItemPlacement(),
-                        )
-                    }
+        FadeVisibility(state.pagingItems.loadState.isRefreshing) {
+            LazyColumn(Modifier.fillMaxSize()) {
+                items(PLACEHOLDER_COUNT) {
+                    EventSection(
+                        event = null,
+                        modifier = Modifier.animateItemPlacement(),
+                    )
                 }
             }
         }
+
+        PullRefreshIndicator(
+            modifier = Modifier.align(Alignment.TopCenter),
+            refreshing = state.pagingItems.loadState.isRefreshing,
+            state = pullRefreshState,
+        )
     }
 }
 
@@ -129,28 +113,6 @@ private fun FadeVisibility(
     )
 }
 
-@Composable
-@ExperimentalMaterial3Api
-private fun EventsTopAppBar(
-    text: String = "Events",
-    modifier: Modifier = Modifier,
-) {
-    TopAppBar(
-        title = {
-            Row {
-                Text(text = text)
-
-                Icon(
-                    painter = rememberVectorPainter(Icons.Filled.ArrowDropDown),
-                    tint = MaterialTheme.colorScheme.onSurface,
-                    contentDescription = null,
-                )
-            }
-        },
-        modifier = modifier,
-    )
-}
-
 @Composable
 private fun EventSection(
     event: Event?,

diff --git a/after-party/src/commonMain/kotlin/io/ashdavies/gallery/GalleryScreen.kt b/after-party/src/commonMain/kotlin/io/ashdavies/gallery/GalleryScreen.kt
@@ -31,17 +31,14 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarDefaults.enterAlwaysScrollBehavior
-import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -128,9 +125,6 @@ internal fun GalleryScreen(
     val eventSink = state.eventSink
 
     Scaffold(
-        topBar = {
-            GalleryTopAppBar(scrollBehavior)
-        },
         floatingActionButton = {
             GalleryActionButton(
                 onClick = { eventSink(GalleryScreen.Event.Capture.Request) },
@@ -206,29 +200,6 @@ private fun GalleryExpandedItem(
     }
 }
 
-@Composable
-@ExperimentalMaterial3Api
-internal fun GalleryTopAppBar(
-    scrollBehavior: TopAppBarScrollBehavior = enterAlwaysScrollBehavior(),
-    title: String = "Gallery",
-    modifier: Modifier = Modifier,
-) {
-    CenterAlignedTopAppBar(
-        title = {
-            Text(
-                text = title,
-                style = MaterialTheme.typography.titleLarge,
-                color = MaterialTheme.colorScheme.onBackground,
-            )
-        },
-        modifier = modifier,
-        colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-            containerColor = MaterialTheme.colorScheme.background,
-        ),
-        scrollBehavior = scrollBehavior,
-    )
-}
-
 @Composable
 @ExperimentalFoundationApi
 internal fun GalleryGrid(

diff --git a/after-party/src/commonMain/kotlin/io/ashdavies/party/AfterPartyScreen.kt b/after-party/src/commonMain/kotlin/io/ashdavies/party/AfterPartyScreen.kt
@@ -2,6 +2,7 @@ package io.ashdavies.party
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.List
 import androidx.compose.material.icons.filled.Home
@@ -78,9 +79,10 @@ internal fun AfterPartyScreen(
         floatingActionButton = { },
         isExpanded = false,
         modifier = modifier,
-    ) {
+    ) { contentPadding ->
         CircuitContent(
             screen = state.screen,
+            modifier = Modifier.padding(contentPadding),
             onNavEvent = { event ->
                 eventSink(AfterPartyScreen.Event.ChildNav(event))
             },
@@ -122,15 +124,15 @@ internal fun AfterPartyBottomBar(
     BottomAppBar(modifier) {
         NavigationBar {
             NavigationBarItem(
-                icon = { NavigationBarImage(Icons.Default.Home) },
-                onClick = { onClick(GalleryScreen) },
                 selected = selected is GalleryScreen,
+                onClick = { onClick(GalleryScreen) },
+                icon = { NavigationBarImage(Icons.Default.Home) },
             )
 
             NavigationBarItem(
-                icon = { NavigationBarImage(Icons.AutoMirrored.Filled.List) },
-                onClick = { onClick(EventsScreen) },
                 selected = selected is EventsScreen,
+                onClick = { onClick(EventsScreen) },
+                icon = { NavigationBarImage(Icons.AutoMirrored.Filled.List) },
             )
         }
     }