MangaScreen large UI tweaks (#7625)

* MangaScreen: Fix large UI column sizing behavior

* MangaInfoHeader: Adjust large UI cover sizing behavior

* BottomActionMenu: Change bg shape
This commit is contained in:
Ivan Iskandar 2022-07-27 20:12:01 +07:00 committed by GitHub
parent dcafdac036
commit 3fe5e53b25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 8 deletions

View file

@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.ZeroCornerSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.BookmarkAdd
import androidx.compose.material.icons.filled.BookmarkRemove
@ -67,7 +68,7 @@ fun MangaBottomActionMenu(
val scope = rememberCoroutineScope()
Surface(
modifier = modifier,
shape = MaterialTheme.shapes.large,
shape = MaterialTheme.shapes.large.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
tonalElevation = 3.dp,
) {
val haptic = LocalHapticFeedback.current
@ -214,7 +215,7 @@ fun LibraryBottomActionMenu(
val scope = rememberCoroutineScope()
Surface(
modifier = modifier,
shape = MaterialTheme.shapes.large,
shape = MaterialTheme.shapes.large.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
tonalElevation = 3.dp,
) {
val haptic = LocalHapticFeedback.current

View file

@ -6,21 +6,22 @@ import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
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.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
@ -516,12 +517,16 @@ fun MangaScreenLargeImpl(
}
},
) { contentPadding ->
Row {
BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
val withNavBarContentPadding = contentPadding +
WindowInsets.navigationBars.only(WindowInsetsSides.Bottom).asPaddingValues()
val firstWidth = (maxWidth / 2).coerceAtMost(450.dp)
val secondWidth = maxWidth - firstWidth
Column(
modifier = Modifier
.widthIn(max = 450.dp)
.align(Alignment.TopStart)
.width(firstWidth)
.verticalScroll(rememberScrollState())
.padding(bottom = withNavBarContentPadding.calculateBottomPadding()),
) {
@ -556,7 +561,9 @@ fun MangaScreenLargeImpl(
VerticalFastScroller(
listState = chapterListState,
modifier = Modifier.weight(1f),
modifier = Modifier
.align(Alignment.TopEnd)
.width(secondWidth),
topContentPadding = withNavBarContentPadding.calculateTopPadding(),
endContentPadding = withNavBarContentPadding.calculateEndPadding(layoutDirection),
) {

View file

@ -293,7 +293,7 @@ private fun MangaAndSourceTitlesLarge(
horizontalAlignment = Alignment.CenterHorizontally,
) {
MangaCover.Book(
modifier = Modifier.fillMaxWidth(0.4f),
modifier = Modifier.fillMaxWidth(0.65f),
data = coverDataProvider(),
onClick = onCoverClick,
)