Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correct top bar padding #1073

Merged
merged 2 commits into from
Jul 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand Down
104 changes: 33 additions & 71 deletions after-party/src/commonMain/kotlin/io/ashdavies/events/EventsScreen.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
)
}
}

Expand All @@ -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?,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -128,9 +125,6 @@ internal fun GalleryScreen(
val eventSink = state.eventSink

Scaffold(
topBar = {
GalleryTopAppBar(scrollBehavior)
},
floatingActionButton = {
GalleryActionButton(
onClick = { eventSink(GalleryScreen.Event.Capture.Request) },
Expand Down Expand Up @@ -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(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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))
},
Expand Down Expand Up @@ -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) },
)
}
}
Expand Down
Loading