From 3e34bdf7fc3a9459d03ac7fd7df5c717ee2c8d5a Mon Sep 17 00:00:00 2001 From: FooIbar <118464521+FooIbar@users.noreply.github.com> Date: Tue, 15 Jul 2025 23:46:42 +0800 Subject: [PATCH] Draw scrim behind status bar to improve a11y Changes toolbar color to the default as surfaceContainerHighest doesn't look well in light theme. --- .../com/hippo/ehviewer/ui/reader/ReaderScreen.kt | 9 +++++++++ .../hippo/ehviewer/ui/screen/SearchBarScreen.kt | 16 +++++++++++++--- .../kotlin/com/hippo/ehviewer/ui/theme/Theme.kt | 4 ++++ .../tachiyomi/ui/reader/BottomReaderBar.kt | 11 +++-------- .../tachiyomi/ui/reader/ChapterNavigator.kt | 4 +++- .../kanade/tachiyomi/ui/reader/ReaderAppBars.kt | 6 +++++- 6 files changed, 37 insertions(+), 13 deletions(-) diff --git a/app/src/main/kotlin/com/hippo/ehviewer/ui/reader/ReaderScreen.kt b/app/src/main/kotlin/com/hippo/ehviewer/ui/reader/ReaderScreen.kt index baf8de85e..b52bb2656 100644 --- a/app/src/main/kotlin/com/hippo/ehviewer/ui/reader/ReaderScreen.kt +++ b/app/src/main/kotlin/com/hippo/ehviewer/ui/reader/ReaderScreen.kt @@ -13,11 +13,14 @@ import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsetsSides import androidx.compose.foundation.layout.displayCutout import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.safeDrawing +import androidx.compose.foundation.layout.statusBars import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.foundation.layout.windowInsetsTopHeight import androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.pager.rememberPagerState @@ -50,6 +53,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.keepScreenOn import androidx.compose.ui.res.colorResource +import androidx.compose.ui.zIndex import androidx.core.view.WindowInsetsControllerCompat import arrow.core.Either import arrow.core.Either.Companion.catch @@ -73,6 +77,7 @@ import com.hippo.ehviewer.gallery.useEhPageLoader import com.hippo.ehviewer.ui.MainActivity import com.hippo.ehviewer.ui.Screen import com.hippo.ehviewer.ui.theme.EhTheme +import com.hippo.ehviewer.ui.theme.scrim import com.hippo.ehviewer.ui.tools.Await import com.hippo.ehviewer.ui.tools.DialogState import com.hippo.ehviewer.ui.tools.asyncInVM @@ -232,6 +237,10 @@ fun ReaderScreen(pageLoader: PageLoader, info: BaseGalleryInfo?) { uiController.isSystemBarsVisible = it } } + Box( + Modifier.windowInsetsTopHeight(WindowInsets.statusBars).fillMaxWidth() + .align(Alignment.TopCenter).background(bgColor.scrim()).zIndex(1f), + ) } var showNavigationOverlay by remember { val showOnStart = Settings.showNavigationOverlayNewUser.value || Settings.showNavigationOverlayOnStart.value diff --git a/app/src/main/kotlin/com/hippo/ehviewer/ui/screen/SearchBarScreen.kt b/app/src/main/kotlin/com/hippo/ehviewer/ui/screen/SearchBarScreen.kt index dd2b5354e..8900fd4de 100644 --- a/app/src/main/kotlin/com/hippo/ehviewer/ui/screen/SearchBarScreen.kt +++ b/app/src/main/kotlin/com/hippo/ehviewer/ui/screen/SearchBarScreen.kt @@ -1,10 +1,12 @@ package com.hippo.ehviewer.ui.screen import androidx.compose.animation.AnimatedContent +import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.focusable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxWithConstraints +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -19,9 +21,10 @@ import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.statusBarsPadding +import androidx.compose.foundation.layout.statusBars import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.foundation.layout.windowInsetsTopHeight import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.text.input.TextFieldState @@ -38,6 +41,7 @@ import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.ListItem import androidx.compose.material3.ListItemDefaults +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.SearchBar import androidx.compose.material3.SearchBarDefaults @@ -70,6 +74,7 @@ import com.hippo.ehviewer.dao.Search import com.hippo.ehviewer.dao.SearchDao import com.hippo.ehviewer.ui.LocalNavDrawerState import com.hippo.ehviewer.ui.destinations.ImageSearchScreenDestination +import com.hippo.ehviewer.ui.theme.scrim import com.hippo.ehviewer.ui.tools.DialogState import com.hippo.ehviewer.ui.tools.awaitConfirmationOrCancel import com.hippo.ehviewer.ui.tools.rememberCompositionActiveState @@ -211,8 +216,13 @@ fun SearchBarScreen( BoxWithConstraints(modifier = Modifier.fillMaxSize()) { Scaffold( topBar = { - // Placeholder, fill immutable SearchBar padding - Spacer(modifier = Modifier.statusBarsPadding().height(SearchBarDefaults.InputFieldHeight + 16.dp)) + Column { + val scrim = MaterialTheme.colorScheme.background.scrim() + Box(Modifier.windowInsetsTopHeight(WindowInsets.statusBars).fillMaxWidth().background(scrim)) + + // Placeholder, fill immutable SearchBar padding + Spacer(modifier = Modifier.height(SearchBarDefaults.InputFieldHeight + 16.dp)) + } }, floatingActionButton = floatingActionButton, content = content, diff --git a/app/src/main/kotlin/com/hippo/ehviewer/ui/theme/Theme.kt b/app/src/main/kotlin/com/hippo/ehviewer/ui/theme/Theme.kt index 8c1c33bde..3c9381251 100644 --- a/app/src/main/kotlin/com/hippo/ehviewer/ui/theme/Theme.kt +++ b/app/src/main/kotlin/com/hippo/ehviewer/ui/theme/Theme.kt @@ -3,6 +3,7 @@ package com.hippo.ehviewer.ui.theme import android.app.WallpaperManager import android.os.Build import androidx.annotation.RequiresApi +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.scrollbar.LocalScrollbarStyle import androidx.compose.material3.ColorScheme import androidx.compose.material3.LocalContentColor @@ -74,6 +75,9 @@ fun EhTheme(useDarkTheme: Boolean, content: @Composable () -> Unit) { } } +@Composable +fun Color.scrim() = copy(alpha = if (isSystemInDarkTheme()) 0.5f else 0.9f) + typealias WallPaperPalette = Triple @Composable diff --git a/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/BottomReaderBar.kt b/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/BottomReaderBar.kt index 4621f35f2..b84a5e6b5 100644 --- a/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/BottomReaderBar.kt +++ b/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/BottomReaderBar.kt @@ -1,6 +1,5 @@ package eu.kanade.tachiyomi.ui.reader -import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.size @@ -15,7 +14,6 @@ import androidx.compose.material3.FlexibleBottomAppBar import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.IconButtonDefaults -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -23,6 +21,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.Dp @@ -39,8 +38,8 @@ import eu.kanade.tachiyomi.ui.reader.setting.PreferenceType import eu.kanade.tachiyomi.ui.reader.setting.ReadingModeType @Composable -fun BottomReaderBar(onClickSettings: () -> Unit) = FlexibleBottomAppBar( - containerColor = toolbarColor, +fun BottomReaderBar(onClickSettings: () -> Unit, containerColor: Color) = FlexibleBottomAppBar( + containerColor = containerColor, contentPadding = PaddingValues.Zero, horizontalArrangement = Arrangement.SpaceEvenly, ) { @@ -77,10 +76,6 @@ fun BottomReaderBar(onClickSettings: () -> Unit) = FlexibleBottomAppBar( ) } -// Use surface container highest to have a higher contract on grey background -val toolbarColor - @Composable get() = MaterialTheme.colorScheme.surfaceContainerHighest.copy(alpha = if (isSystemInDarkTheme()) 0.9f else 0.95f) - @Composable private fun DropdownIconButton( label: String, diff --git a/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ChapterNavigator.kt b/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ChapterNavigator.kt index cfff8c4aa..cf419bba6 100644 --- a/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ChapterNavigator.kt +++ b/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ChapterNavigator.kt @@ -15,6 +15,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp @@ -31,11 +32,12 @@ fun ChapterNavigator( currentPage: Int, totalPages: Int, onSliderValueChange: (Int) -> Unit, + containerColor: Color, ) = CompositionLocalProvider(LocalLayoutDirection provides if (isRtl) LayoutDirection.Rtl else LayoutDirection.Ltr) { val windowSizeClass = LocalWindowSizeClass.current val horizontalPadding = if (windowSizeClass.isExpanded) 24.dp else 16.dp Row( - modifier = Modifier.padding(horizontal = horizontalPadding).clip(CircleShape).background(toolbarColor).padding(horizontal = 16.dp), + modifier = Modifier.padding(horizontal = horizontalPadding).clip(CircleShape).background(containerColor).padding(horizontal = 16.dp), verticalAlignment = Alignment.CenterVertically, ) { Text(text = "$currentPage") diff --git a/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ReaderAppBars.kt b/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ReaderAppBars.kt index e7b66c036..4a28d38bd 100644 --- a/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ReaderAppBars.kt +++ b/app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ReaderAppBars.kt @@ -4,6 +4,7 @@ import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.tween import androidx.compose.animation.slideInVertically import androidx.compose.animation.slideOutVertically +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.WindowInsets @@ -11,6 +12,7 @@ import androidx.compose.foundation.layout.WindowInsetsSides import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.material3.BottomAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.unit.IntOffset @@ -34,6 +36,7 @@ fun ReaderAppBars( enter = slideInVertically(initialOffsetY = { it }, animationSpec = animationSpec), exit = slideOutVertically(targetOffsetY = { it }, animationSpec = animationSpec), ) { + val toolbarColor = BottomAppBarDefaults.containerColor.copy(alpha = if (isSystemInDarkTheme()) 0.9f else 0.95f) Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { if (showSeekBar && totalPages > 1) { ChapterNavigator( @@ -41,8 +44,9 @@ fun ReaderAppBars( currentPage = currentPage, totalPages = totalPages, onSliderValueChange = onSliderValueChange, + containerColor = toolbarColor, ) } - BottomReaderBar(onClickSettings = onClickSettings) + BottomReaderBar(onClickSettings = onClickSettings, containerColor = toolbarColor) } }