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.navigationBarsPadding
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.ZeroCornerSize
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.BookmarkAdd import androidx.compose.material.icons.filled.BookmarkAdd
import androidx.compose.material.icons.filled.BookmarkRemove import androidx.compose.material.icons.filled.BookmarkRemove
@ -67,7 +68,7 @@ fun MangaBottomActionMenu(
val scope = rememberCoroutineScope() val scope = rememberCoroutineScope()
Surface( Surface(
modifier = modifier, modifier = modifier,
shape = MaterialTheme.shapes.large, shape = MaterialTheme.shapes.large.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
tonalElevation = 3.dp, tonalElevation = 3.dp,
) { ) {
val haptic = LocalHapticFeedback.current val haptic = LocalHapticFeedback.current
@ -214,7 +215,7 @@ fun LibraryBottomActionMenu(
val scope = rememberCoroutineScope() val scope = rememberCoroutineScope()
Surface( Surface(
modifier = modifier, modifier = modifier,
shape = MaterialTheme.shapes.large, shape = MaterialTheme.shapes.large.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
tonalElevation = 3.dp, tonalElevation = 3.dp,
) { ) {
val haptic = LocalHapticFeedback.current 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.fadeIn
import androidx.compose.animation.fadeOut import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.calculateEndPadding import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.calculateStartPadding import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBars import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBars 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.LazyListScope
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.lazy.rememberLazyListState
@ -516,12 +517,16 @@ fun MangaScreenLargeImpl(
} }
}, },
) { contentPadding -> ) { contentPadding ->
Row { BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
val withNavBarContentPadding = contentPadding + val withNavBarContentPadding = contentPadding +
WindowInsets.navigationBars.only(WindowInsetsSides.Bottom).asPaddingValues() WindowInsets.navigationBars.only(WindowInsetsSides.Bottom).asPaddingValues()
val firstWidth = (maxWidth / 2).coerceAtMost(450.dp)
val secondWidth = maxWidth - firstWidth
Column( Column(
modifier = Modifier modifier = Modifier
.widthIn(max = 450.dp) .align(Alignment.TopStart)
.width(firstWidth)
.verticalScroll(rememberScrollState()) .verticalScroll(rememberScrollState())
.padding(bottom = withNavBarContentPadding.calculateBottomPadding()), .padding(bottom = withNavBarContentPadding.calculateBottomPadding()),
) { ) {
@ -556,7 +561,9 @@ fun MangaScreenLargeImpl(
VerticalFastScroller( VerticalFastScroller(
listState = chapterListState, listState = chapterListState,
modifier = Modifier.weight(1f), modifier = Modifier
.align(Alignment.TopEnd)
.width(secondWidth),
topContentPadding = withNavBarContentPadding.calculateTopPadding(), topContentPadding = withNavBarContentPadding.calculateTopPadding(),
endContentPadding = withNavBarContentPadding.calculateEndPadding(layoutDirection), endContentPadding = withNavBarContentPadding.calculateEndPadding(layoutDirection),
) { ) {

View file

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