fix(ui): opaque tab rows and bottom-bar under nav inset
When the disappearing bars translate on top of content, any translucent chrome lets items bleed through — which the user noticed on Home: posts became visible through the transparent SecondaryTabRow, and the strip under Android's gesture bar (covered by windowInsetsPadding on the bottom nav) was transparent too. - Swap `containerColor = Color.Transparent` to `MaterialTheme.colorScheme.background` on all tab rows that sit in a DisappearingScaffold topBar slot (Home, Discover, Polls, Community, ChatroomListTabs, OldBookmarkList). - Paint AppBottomBar's outer Column with the background before the windowInsetsPadding, so the system-gesture-bar strip at the bottom is opaque and items scrolling behind it are hidden. FollowPackFeedScreen intentionally uses a translucent (alpha 0.6f) top bar as a design choice, so it's left as-is. https://claude.ai/code/session_01M3Bj24jLc9aVhMuvn55jXa
This commit is contained in:
+2
@@ -21,6 +21,7 @@
|
|||||||
package com.vitorpamplona.amethyst.ui.navigation.bottombars
|
package com.vitorpamplona.amethyst.ui.navigation.bottombars
|
||||||
|
|
||||||
import androidx.compose.foundation.Canvas
|
import androidx.compose.foundation.Canvas
|
||||||
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.Column
|
import androidx.compose.foundation.layout.Column
|
||||||
import androidx.compose.foundation.layout.RowScope
|
import androidx.compose.foundation.layout.RowScope
|
||||||
@@ -71,6 +72,7 @@ private fun RenderBottomMenu(
|
|||||||
modifier =
|
modifier =
|
||||||
Modifier
|
Modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
|
.background(MaterialTheme.colorScheme.background)
|
||||||
.windowInsetsPadding(windowInsets)
|
.windowInsetsPadding(windowInsets)
|
||||||
.consumeWindowInsets(windowInsets)
|
.consumeWindowInsets(windowInsets)
|
||||||
.height(50.dp),
|
.height(50.dp),
|
||||||
|
|||||||
+1
-2
@@ -43,7 +43,6 @@ import androidx.compose.runtime.getValue
|
|||||||
import androidx.compose.runtime.remember
|
import androidx.compose.runtime.remember
|
||||||
import androidx.compose.runtime.rememberCoroutineScope
|
import androidx.compose.runtime.rememberCoroutineScope
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
|
||||||
import androidx.compose.ui.platform.LocalContext
|
import androidx.compose.ui.platform.LocalContext
|
||||||
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
||||||
import androidx.lifecycle.viewmodel.compose.viewModel
|
import androidx.lifecycle.viewmodel.compose.viewModel
|
||||||
@@ -110,7 +109,7 @@ private fun RenderOldBookmarkScreen(
|
|||||||
Column {
|
Column {
|
||||||
TopBarWithBackButton(stringRes(id = R.string.old_bookmarks_title), nav::popBack)
|
TopBarWithBackButton(stringRes(id = R.string.old_bookmarks_title), nav::popBack)
|
||||||
SecondaryTabRow(
|
SecondaryTabRow(
|
||||||
containerColor = Color.Transparent,
|
containerColor = MaterialTheme.colorScheme.background,
|
||||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||||
selectedTabIndex = pagerState.currentPage,
|
selectedTabIndex = pagerState.currentPage,
|
||||||
modifier = TabRowHeight,
|
modifier = TabRowHeight,
|
||||||
|
|||||||
+1
-2
@@ -46,7 +46,6 @@ import androidx.compose.runtime.rememberCoroutineScope
|
|||||||
import androidx.compose.runtime.setValue
|
import androidx.compose.runtime.setValue
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
|
||||||
import com.vitorpamplona.amethyst.R
|
import com.vitorpamplona.amethyst.R
|
||||||
import com.vitorpamplona.amethyst.commons.ui.feeds.FeedContentState
|
import com.vitorpamplona.amethyst.commons.ui.feeds.FeedContentState
|
||||||
import com.vitorpamplona.amethyst.ui.components.M3ActionDialog
|
import com.vitorpamplona.amethyst.ui.components.M3ActionDialog
|
||||||
@@ -81,7 +80,7 @@ fun MessagesTabHeader(
|
|||||||
|
|
||||||
Box(Modifier.fillMaxWidth()) {
|
Box(Modifier.fillMaxWidth()) {
|
||||||
SecondaryTabRow(
|
SecondaryTabRow(
|
||||||
containerColor = Color.Transparent,
|
containerColor = MaterialTheme.colorScheme.background,
|
||||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||||
selectedTabIndex = pagerState.currentPage,
|
selectedTabIndex = pagerState.currentPage,
|
||||||
modifier = TabRowHeight,
|
modifier = TabRowHeight,
|
||||||
|
|||||||
+1
-2
@@ -40,7 +40,6 @@ import androidx.compose.runtime.remember
|
|||||||
import androidx.compose.runtime.rememberCoroutineScope
|
import androidx.compose.runtime.rememberCoroutineScope
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import androidx.lifecycle.viewmodel.compose.viewModel
|
import androidx.lifecycle.viewmodel.compose.viewModel
|
||||||
import com.vitorpamplona.amethyst.R
|
import com.vitorpamplona.amethyst.R
|
||||||
@@ -168,7 +167,7 @@ fun CommunityScreen(
|
|||||||
}
|
}
|
||||||
|
|
||||||
SecondaryTabRow(
|
SecondaryTabRow(
|
||||||
containerColor = Color.Transparent,
|
containerColor = MaterialTheme.colorScheme.background,
|
||||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||||
modifier = TabRowHeight,
|
modifier = TabRowHeight,
|
||||||
selectedTabIndex = pagerState.currentPage,
|
selectedTabIndex = pagerState.currentPage,
|
||||||
|
|||||||
+1
-1
@@ -224,7 +224,7 @@ private fun DiscoverPages(
|
|||||||
Column {
|
Column {
|
||||||
DiscoveryTopBar(accountViewModel, nav)
|
DiscoveryTopBar(accountViewModel, nav)
|
||||||
SecondaryScrollableTabRow(
|
SecondaryScrollableTabRow(
|
||||||
containerColor = Color.Transparent,
|
containerColor = MaterialTheme.colorScheme.background,
|
||||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||||
selectedTabIndex = pagerState.currentPage,
|
selectedTabIndex = pagerState.currentPage,
|
||||||
modifier = TabRowHeight,
|
modifier = TabRowHeight,
|
||||||
|
|||||||
+1
-2
@@ -53,7 +53,6 @@ import androidx.compose.runtime.remember
|
|||||||
import androidx.compose.runtime.rememberCoroutineScope
|
import androidx.compose.runtime.rememberCoroutineScope
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
|
||||||
import androidx.compose.ui.platform.LocalLayoutDirection
|
import androidx.compose.ui.platform.LocalLayoutDirection
|
||||||
import androidx.compose.ui.tooling.preview.Preview
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
@@ -185,7 +184,7 @@ private fun HomePages(
|
|||||||
Column {
|
Column {
|
||||||
HomeTopBar(accountViewModel, nav)
|
HomeTopBar(accountViewModel, nav)
|
||||||
SecondaryTabRow(
|
SecondaryTabRow(
|
||||||
containerColor = Color.Transparent,
|
containerColor = MaterialTheme.colorScheme.background,
|
||||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||||
modifier = TabRowHeight,
|
modifier = TabRowHeight,
|
||||||
selectedTabIndex = pagerState.currentPage,
|
selectedTabIndex = pagerState.currentPage,
|
||||||
|
|||||||
+1
-2
@@ -34,7 +34,6 @@ import androidx.compose.runtime.getValue
|
|||||||
import androidx.compose.runtime.mutableStateOf
|
import androidx.compose.runtime.mutableStateOf
|
||||||
import androidx.compose.runtime.remember
|
import androidx.compose.runtime.remember
|
||||||
import androidx.compose.runtime.rememberCoroutineScope
|
import androidx.compose.runtime.rememberCoroutineScope
|
||||||
import androidx.compose.ui.graphics.Color
|
|
||||||
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
||||||
import com.vitorpamplona.amethyst.R
|
import com.vitorpamplona.amethyst.R
|
||||||
import com.vitorpamplona.amethyst.commons.ui.feeds.FeedContentState
|
import com.vitorpamplona.amethyst.commons.ui.feeds.FeedContentState
|
||||||
@@ -131,7 +130,7 @@ private fun PollsPages(
|
|||||||
Column {
|
Column {
|
||||||
PollsTopBar(accountViewModel, nav)
|
PollsTopBar(accountViewModel, nav)
|
||||||
SecondaryTabRow(
|
SecondaryTabRow(
|
||||||
containerColor = Color.Transparent,
|
containerColor = MaterialTheme.colorScheme.background,
|
||||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||||
modifier = TabRowHeight,
|
modifier = TabRowHeight,
|
||||||
selectedTabIndex = pagerState.currentPage,
|
selectedTabIndex = pagerState.currentPage,
|
||||||
|
|||||||
Reference in New Issue
Block a user