MangaScreen large UI tweaks (#7625)

* MangaScreen: Fix large UI column sizing behavior

* MangaInfoHeader: Adjust large UI cover sizing behavior

* BottomActionMenu: Change bg shape

(cherry picked from commit 3fe5e53b2546559a91b3373c7bd6329bae7634ab)
This commit is contained in:
Ivan Iskandar 2022-07-27 20:12:01 +07:00 committed by Jobobby04
parent 9db6d65957
commit b5120d0149
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
@ -74,7 +75,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
@ -226,7 +227,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
@ -640,12 +641,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()),
) {
@ -709,7 +714,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

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