fix: bottom navigation insets (#458)

* update main screen

* update post list

* update post detail

* update community detail

* update user detail

* make explore section similar to the home section

* fix formatting in saved items screen

closes #457
This commit is contained in:
Diego Beraldin 2024-01-17 19:16:46 +01:00
parent 2b03b93f8d
commit 1dae8bfad4
8 changed files with 265 additions and 196 deletions

View File

@ -8,8 +8,10 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
@ -122,6 +124,7 @@ class ExploreScreen : Screen {
val defaultDownVoteColor = MaterialTheme.colorScheme.tertiary
val lazyListState = rememberLazyListState()
val detailOpener = remember { getDetailOpener() }
val connection = navigationCoordinator.getBottomBarScrollConnection()
val scope = rememberCoroutineScope()
LaunchedEffect(navigationCoordinator) {
@ -147,6 +150,11 @@ class ExploreScreen : Screen {
Scaffold(
modifier = Modifier.padding(Spacing.xxs),
contentWindowInsets = if (settings.edgeToEdge) {
WindowInsets(0, 0, 0, 0)
} else {
WindowInsets.navigationBars
},
topBar = {
ExploreTopBar(
scrollBehavior = scrollBehavior,
@ -275,7 +283,16 @@ class ExploreScreen : Screen {
{ model.reduce(ExploreMviModel.Intent.Refresh) },
)
Box(
modifier = Modifier.padding(Spacing.xxs).then(
modifier = Modifier
.padding(Spacing.xxs)
.then(
if (connection != null && settings.hideNavigationBarWhileScrolling) {
Modifier.nestedScroll(connection)
} else {
Modifier
}
)
.then(
if (settings.hideNavigationBarWhileScrolling) {
Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
} else {

View File

@ -1,6 +1,8 @@
package com.github.diegoberaldin.raccoonforlemmy
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.offset
import androidx.compose.material.BottomAppBar
import androidx.compose.material3.MaterialTheme
@ -32,7 +34,6 @@ import cafe.adriel.voyager.koin.getScreenModel
import cafe.adriel.voyager.navigator.tab.CurrentTab
import cafe.adriel.voyager.navigator.tab.TabNavigator
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
import com.github.diegoberaldin.raccoonforlemmy.core.navigation.DrawerEvent
import com.github.diegoberaldin.raccoonforlemmy.core.navigation.TabNavigationSection
@ -70,6 +71,9 @@ internal object MainScreen : Screen {
val exitMessage = stringResource(MR.strings.message_confirm_exit)
val drawerCoordinator = remember { getDrawerCoordinator() }
val notificationCenter = remember { getNotificationCenter() }
val bottomNavigationInset = with(LocalDensity.current) {
WindowInsets.navigationBars.getBottom(this).toDp()
}
LaunchedEffect(model) {
model.effects.onEach {
@ -199,7 +203,7 @@ internal object MainScreen : Screen {
start = 0.dp,
top = 0.dp,
end = 0.dp,
bottom = Spacing.m,
bottom = bottomNavigationInset,
),
backgroundColor = MaterialTheme.colorScheme.background,
) {

View File

@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
@ -211,6 +212,11 @@ class CommunityDetailScreen(
modifier = Modifier
.background(MaterialTheme.colorScheme.background)
.padding(Spacing.xs),
contentWindowInsets = if (settings.edgeToEdge) {
WindowInsets(0, 0, 0, 0)
} else {
WindowInsets.navigationBars
},
topBar = {
val maxTopInset = Dimensions.topBarHeight.value.toInt()
var topInset by remember { mutableStateOf(maxTopInset) }

View File

@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
@ -125,6 +126,11 @@ class MultiCommunityScreen(
val detailOpener = remember { getDetailOpener() }
Scaffold(
contentWindowInsets = if (settings.edgeToEdge) {
WindowInsets(0, 0, 0, 0)
} else {
WindowInsets.navigationBars
},
topBar = {
val sortType = uiState.sortType
val maxTopInset = Dimensions.topBarHeight.value.toInt()

View File

@ -17,8 +17,10 @@ import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
@ -118,7 +120,6 @@ class PostDetailScreen(
private val highlightCommentId: Int? = null,
private val isMod: Boolean = false,
) : Screen {
override val key: ScreenKey
get() = super.key + postId.toString()
@ -188,8 +189,14 @@ class PostDetailScreen(
}
Scaffold(
modifier = Modifier.background(MaterialTheme.colorScheme.background)
modifier = Modifier
.background(MaterialTheme.colorScheme.background)
.padding(Spacing.xs),
contentWindowInsets = if (settings.edgeToEdge) {
WindowInsets(0, 0, 0, 0)
} else {
WindowInsets.navigationBars
},
topBar = {
TopAppBar(
title = {
@ -1102,7 +1109,8 @@ class PostDetailScreen(
Text(
text = buildString {
append(stringResource(MR.strings.post_detail_load_more_comments))
comment.comments?.takeIf { it > 0 }?.also { count ->
comment.comments?.takeIf { it > 0 }
?.also { count ->
append(" (")
append(count)
append(")")

View File

@ -9,8 +9,10 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
@ -52,13 +54,13 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import cafe.adriel.voyager.core.screen.Screen
import cafe.adriel.voyager.koin.getScreenModel
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Dimensions
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
import com.github.diegoberaldin.raccoonforlemmy.core.commonui.components.FloatingActionButtonMenu
@ -124,6 +126,9 @@ class PostListScreen : Screen {
val keepScreenOn = rememberKeepScreenOn()
val detailOpener = remember { getDetailOpener() }
val connection = navigationCoordinator.getBottomBarScrollConnection()
val bottomNavigationInset = with(LocalDensity.current) {
WindowInsets.navigationBars.getBottom(this).toDp()
}
LaunchedEffect(navigationCoordinator) {
navigationCoordinator.onDoubleTabSelection.onEach { section ->
@ -163,6 +168,11 @@ class PostListScreen : Screen {
}
Scaffold(
contentWindowInsets = if (settings.edgeToEdge) {
WindowInsets(0, 0, 0, 0)
} else {
WindowInsets.navigationBars
},
modifier = Modifier.padding(Spacing.xxs),
topBar = {
PostsTopBar(
@ -211,7 +221,9 @@ class PostListScreen : Screen {
),
) {
FloatingActionButtonMenu(
modifier = Modifier.padding(bottom = Dimensions.topBarHeight),
modifier = Modifier.padding(
bottom = Spacing.xxl + Spacing.s + bottomNavigationInset,
),
items = buildList {
if (uiState.zombieModeActive) {
this += FloatingActionButtonMenuItem(

View File

@ -149,7 +149,8 @@ class SavedItemsScreen : Screen {
targetOffsetY = { it * 2 },
),
) {
FloatingActionButtonMenu(items = buildList {
FloatingActionButtonMenu(
items = buildList {
this += FloatingActionButtonMenuItem(
icon = Icons.Default.ExpandLess,
text = stringResource(MR.strings.action_back_to_top),
@ -161,7 +162,8 @@ class SavedItemsScreen : Screen {
}
},
)
})
},
)
}
},
) { paddingValues ->

View File

@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
@ -179,8 +180,16 @@ class UserDetailScreen(
}.launchIn(this)
}
Scaffold(modifier = Modifier.background(MaterialTheme.colorScheme.background)
.padding(Spacing.xs), topBar = {
Scaffold(
modifier = Modifier
.background(MaterialTheme.colorScheme.background)
.padding(Spacing.xs),
contentWindowInsets = if (settings.edgeToEdge) {
WindowInsets(0, 0, 0, 0)
} else {
WindowInsets.navigationBars
},
topBar = {
val userName = uiState.user.name
val userHost = uiState.user.host
val maxTopInset = Dimensions.topBarHeight.value.toInt()
@ -315,7 +324,8 @@ class UserDetailScreen(
}
},
)
}, floatingActionButton = {
},
floatingActionButton = {
AnimatedVisibility(
visible = isFabVisible,
enter = slideInVertically(
@ -325,7 +335,8 @@ class UserDetailScreen(
targetOffsetY = { it * 2 },
),
) {
FloatingActionButtonMenu(items = buildList {
FloatingActionButtonMenu(
items = buildList {
this += FloatingActionButtonMenuItem(
icon = Icons.Default.ExpandLess,
text = stringResource(MR.strings.action_back_to_top),
@ -347,9 +358,11 @@ class UserDetailScreen(
},
)
}
})
},
)
}
}, snackbarHost = {
},
snackbarHost = {
SnackbarHost(snackbarHostState) { data ->
Snackbar(
containerColor = MaterialTheme.colorScheme.surfaceVariant,
@ -357,7 +370,8 @@ class UserDetailScreen(
snackbarData = data,
)
}
}) { padding ->
},
) { padding ->
val pullRefreshState = rememberPullRefreshState(
refreshing = uiState.refreshing,
onRefresh = rememberCallback(model) {