From 3fe5e53b2546559a91b3373c7bd6329bae7634ab Mon Sep 17 00:00:00 2001
From: Ivan Iskandar <12537387+ivaniskandar@users.noreply.github.com>
Date: Wed, 27 Jul 2022 20:12:01 +0700
Subject: [PATCH] MangaScreen large UI tweaks (#7625)

* MangaScreen: Fix large UI column sizing behavior

* MangaInfoHeader: Adjust large UI cover sizing behavior

* BottomActionMenu: Change bg shape
---
 .../components/MangaBottomActionMenu.kt         |  5 +++--
 .../eu/kanade/presentation/manga/MangaScreen.kt | 17 ++++++++++++-----
 .../manga/components/MangaInfoHeader.kt         |  2 +-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/src/main/java/eu/kanade/presentation/components/MangaBottomActionMenu.kt b/app/src/main/java/eu/kanade/presentation/components/MangaBottomActionMenu.kt
index 3e7dc940d3..0ab3b89656 100644
--- a/app/src/main/java/eu/kanade/presentation/components/MangaBottomActionMenu.kt
+++ b/app/src/main/java/eu/kanade/presentation/components/MangaBottomActionMenu.kt
@@ -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
diff --git a/app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt b/app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt
index 5dbb2b23f3..5dbc019c2a 100644
--- a/app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt
+++ b/app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt
@@ -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),
                 ) {
diff --git a/app/src/main/java/eu/kanade/presentation/manga/components/MangaInfoHeader.kt b/app/src/main/java/eu/kanade/presentation/manga/components/MangaInfoHeader.kt
index 35ec573aa2..b51dc1cc6e 100644
--- a/app/src/main/java/eu/kanade/presentation/manga/components/MangaInfoHeader.kt
+++ b/app/src/main/java/eu/kanade/presentation/manga/components/MangaInfoHeader.kt
@@ -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,
         )