Implement new design for monster content manager

alexandregpereira · Aug 11, 2024 · 977202e · 977202e
1 parent e6e96d2
commit 977202e
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 100 deletions.
diff --git a/app/src/commonMain/kotlin/br/alexandregpereira/hunter/app/ui/AppMainWidthSplitScreen.kt b/app/src/commonMain/kotlin/br/alexandregpereira/hunter/app/ui/AppMainWidthSplitScreen.kt
@@ -55,10 +55,6 @@ internal fun AppMainWidthSplitScreen(
                 contentPadding = contentPadding,
             )
 
-            MonsterContentManagerFeature(
-                contentPadding = contentPadding,
-            )
-
             MonsterLoreDetailFeature(contentPadding = contentPadding)
 
             MonsterRegistrationFeature(contentPadding = contentPadding)
@@ -73,5 +69,9 @@ internal fun AppMainWidthSplitScreen(
         }
     }
 
+    MonsterContentManagerFeature(
+        contentPadding = contentPadding,
+    )
+
     SyncFeature()
 }
diff --git a/...rc/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreviewScreen.kt b/...rc/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreviewScreen.kt
@@ -18,15 +18,17 @@ package br.alexandregpereira.hunter.folder.preview.ui
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateContentSize
-import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import br.alexandregpereira.hunter.folder.preview.FolderPreviewState
 
 @Composable
@@ -37,11 +39,11 @@ internal fun FolderPreviewScreen(
     onClick: (index: String) -> Unit = {},
     onLongClick: (index: String) -> Unit = {},
     onSave: () -> Unit = {},
-) = Box(modifier = modifier.fillMaxWidth().animateContentSize()) {
+) = Box(modifier = modifier.fillMaxWidth().animateContentSize(animationSpec = spring())) {
     AnimatedVisibility(
         visible = state.showPreview,
-        enter = fadeIn(),
-        exit = fadeOut(),
+        enter = fadeIn(animationSpec = spring()),
+        exit = fadeOut(animationSpec = spring()),
         modifier = modifier
     ) {
         FolderPreview(
@@ -51,7 +53,7 @@ internal fun FolderPreviewScreen(
             onClick = onClick,
             onLongClick = onLongClick,
             onSave = onSave,
-            modifier = Modifier.align(Alignment.BottomCenter)
+            modifier = Modifier.align(Alignment.BottomCenter).padding(top = 8.dp)
         )
     }
 }
diff --git a/...rc/commonMain/kotlin/br/alexandregpereira/hunter/monster/content/ui/MonsterContentCard.kt b/...rc/commonMain/kotlin/br/alexandregpereira/hunter/monster/content/ui/MonsterContentCard.kt
@@ -1,19 +1,23 @@
 package br.alexandregpereira.hunter.monster.content.ui
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow.Companion.Ellipsis
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import br.alexandregpereira.hunter.monster.content.MonsterContentManagerEmptyStrings
@@ -22,6 +26,7 @@ import br.alexandregpereira.hunter.ui.compose.AppButton
 import br.alexandregpereira.hunter.ui.compose.AppButtonSize
 import br.alexandregpereira.hunter.ui.compose.CoilImage
 import br.alexandregpereira.hunter.ui.compose.SectionTitle
+import br.alexandregpereira.hunter.ui.compose.cardShape
 import br.alexandregpereira.hunter.ui.theme.HunterTheme
 import br.alexandregpereira.hunter.ui.theme.Shapes
 import org.jetbrains.compose.ui.tooling.preview.Preview
@@ -35,59 +40,62 @@ internal fun MonsterContentCard(
     coverImageUrl: String,
     isEnabled: Boolean,
     strings: MonsterContentManagerStrings,
+    modifier: Modifier = Modifier,
     onAddClick: () -> Unit = {},
     onRemoveClick: () -> Unit = {},
     onPreviewClick: () -> Unit = {},
-) = Column {
-    Title(
-        name = name,
-        originalName = originalName,
-        modifier = Modifier.padding(bottom = 16.dp)
-    )
-    Row {
+) = Surface(modifier.clip(cardShape).background(MaterialTheme.colors.surface, cardShape), elevation = 1.dp) {
+    Column(Modifier.padding(8.dp)) {
+        Title(
+            name = name,
+            originalName = originalName,
+            modifier = Modifier.padding(bottom = 16.dp)
+        )
+
         Cover(
             coverImageUrl = coverImageUrl,
             name = name,
             totalMonsters = strings.totalMonsters(totalMonsters),
-            modifier = Modifier
-                .weight(1f)
-                .padding(end = 8.dp)
+            modifier = Modifier.fillMaxWidth()
         )
-        Summary(
-            summary = summary,
-            modifier = Modifier
-                .weight(1f)
-                .padding(start = 8.dp)
+
+        Spacer(Modifier.height(8.dp))
+
+        Summary(summary = summary)
+
+        Spacer(Modifier.height(8.dp))
+
+        Buttons(
+            isEnabled = isEnabled,
+            removeText = strings.remove,
+            addText = strings.add,
+            previewLabel = strings.preview,
+            onAddClick = onAddClick,
+            onRemoveClick = onRemoveClick,
+            onPreviewClick = onPreviewClick,
+            modifier = Modifier.padding(top = 8.dp),
         )
     }
-
-    Buttons(
-        isEnabled = isEnabled,
-        removeText = strings.remove,
-        addText = strings.add,
-        previewLabel = strings.preview,
-        onAddClick = onAddClick,
-        onRemoveClick = onRemoveClick,
-        onPreviewClick = onPreviewClick,
-        modifier = Modifier.padding(top = 8.dp),
-    )
 }
 
 @Composable
 private fun Cover(
     coverImageUrl: String,
     name: String,
     totalMonsters: String,
-    modifier: Modifier
+    modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier = modifier
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
         CoilImage(
             imageUrl = coverImageUrl,
             contentDescription = name,
             shape = Shapes.large,
+            contentScale = ContentScale.Crop,
             modifier = Modifier
+                .background(color = MaterialTheme.colors.surface, shape = Shapes.large)
                 .height(IMAGE_HEIGHT.dp)
                 .width(172.dp)
                 .align(alignment = Alignment.CenterHorizontally)
@@ -136,9 +144,8 @@ private fun Summary(
 ) = Text(
     text = summary,
     fontWeight = FontWeight.Light,
-    fontSize = 14.sp,
-    overflow = Ellipsis,
-    modifier = modifier.sizeIn(maxHeight = IMAGE_HEIGHT.dp)
+    fontSize = 16.sp,
+    modifier = modifier,
 )
 
 @Composable

diff --git a/...Main/kotlin/br/alexandregpereira/hunter/monster/content/ui/MonsterContentManagerScreen.kt b/...Main/kotlin/br/alexandregpereira/hunter/monster/content/ui/MonsterContentManagerScreen.kt
@@ -16,22 +16,23 @@
 
 package br.alexandregpereira.hunter.monster.content.ui
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
+import androidx.compose.foundation.lazy.staggeredgrid.items
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import br.alexandregpereira.hunter.monster.content.MonsterContentManagerState
 import br.alexandregpereira.hunter.monster.content.MonsterContentState
 import br.alexandregpereira.hunter.ui.compose.AppFullScreen
-import br.alexandregpereira.hunter.ui.compose.BackHandler
+import br.alexandregpereira.hunter.ui.compose.LoadingScreen
 import br.alexandregpereira.hunter.ui.compose.SectionTitle
-import br.alexandregpereira.hunter.ui.compose.SwipeVerticalToDismiss
-import br.alexandregpereira.hunter.ui.compose.Window
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
@@ -42,42 +43,55 @@ internal fun MonsterContentManagerScreen(
     onAddClick: (String) -> Unit = {},
     onRemoveClick: (String) -> Unit = {},
     onPreviewClick: (String, String) -> Unit = { _, _ -> },
-) = AppFullScreen(isOpen = state.isOpen, contentPadding, onClose = onClose) {
-    LazyColumn(
-        modifier = Modifier.padding(horizontal = 16.dp),
-        contentPadding = PaddingValues(
-            top = 24.dp + contentPadding.calculateTopPadding(),
-            bottom = contentPadding.calculateBottomPadding()
-        )
-    ) {
-        item(key = "title") {
-            SectionTitle(
-                title = state.strings.title,
-                isHeader = true,
-                modifier = Modifier
-                    .padding(bottom = 32.dp)
-            )
-        }
+) = AppFullScreen(
+    isOpen = state.isOpen,
+    contentPaddingValues = contentPadding,
+    onClose = onClose
+) {
+    LoadingScreen(isLoading = state.isLoading) {
+        LazyVerticalStaggeredGrid(
+            columns = StaggeredGridCells.Adaptive(300.dp),
+            modifier = Modifier.padding(horizontal = 16.dp),
+            contentPadding = PaddingValues(
+                top = 24.dp + contentPadding.calculateTopPadding(),
+                bottom = 24.dp + contentPadding.calculateBottomPadding()
+            ),
+            verticalItemSpacing = 16.dp,
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            item(
+                key = "title",
+                span = StaggeredGridItemSpan.FullLine
+            ) {
+                SectionTitle(
+                    title = state.strings.title,
+                    isHeader = true,
+                    modifier = Modifier
+                        .padding(bottom = 32.dp)
+                )
+            }
 
-        items(state.monsterContents, key = { it.acronym }) { monsterContent ->
-            MonsterContentCard(
-                name = monsterContent.name,
-                originalName = monsterContent.originalName,
-                totalMonsters = monsterContent.totalMonsters,
-                summary = monsterContent.summary,
-                coverImageUrl = monsterContent.coverImageUrl,
-                isEnabled = monsterContent.isEnabled,
-                strings = state.strings,
-                onAddClick = { onAddClick(monsterContent.acronym) },
-                onRemoveClick = { onRemoveClick(monsterContent.acronym) },
-                onPreviewClick = {
-                    onPreviewClick(
-                        monsterContent.acronym,
-                        monsterContent.name
-                    )
-                },
-            )
-            Spacer(modifier = Modifier.padding(bottom = 48.dp))
+            items(state.monsterContents, key = { it.acronym }) { monsterContent ->
+                MonsterContentCard(
+                    name = monsterContent.name,
+                    originalName = monsterContent.originalName,
+                    totalMonsters = monsterContent.totalMonsters,
+                    summary = monsterContent.summary,
+                    coverImageUrl = monsterContent.coverImageUrl,
+                    isEnabled = monsterContent.isEnabled,
+                    strings = state.strings,
+                    modifier = Modifier.fillMaxHeight(),
+                    onAddClick = { onAddClick(monsterContent.acronym) },
+                    onRemoveClick = { onRemoveClick(monsterContent.acronym) },
+                    onPreviewClick = {
+                        onPreviewClick(
+                            monsterContent.acronym,
+                            monsterContent.name
+                        )
+                    },
+                )
+                Spacer(modifier = Modifier.padding(bottom = 48.dp))
+            }
         }
     }
 }

diff --git a/...mmonMain/kotlin/br/alexandregpereira/hunter/monster/content/MonsterContentManagerState.kt b/...mmonMain/kotlin/br/alexandregpereira/hunter/monster/content/MonsterContentManagerState.kt
@@ -19,6 +19,7 @@ package br.alexandregpereira.hunter.monster.content
 data class MonsterContentManagerState(
     val monsterContents: List<MonsterContentState> = emptyList(),
     val isOpen: Boolean = false,
+    val isLoading: Boolean = false,
     val strings: MonsterContentManagerStrings = MonsterContentManagerEmptyStrings(),
 )
 

diff --git a/...in/kotlin/br/alexandregpereira/hunter/monster/content/MonsterContentManagerStateHolder.kt b/...in/kotlin/br/alexandregpereira/hunter/monster/content/MonsterContentManagerStateHolder.kt
@@ -57,6 +57,7 @@ class MonsterContentManagerStateHolder internal constructor(
     }
 
     private fun load() {
+        setState { copy(isLoading = true) }
         getAlternativeSourcesUseCase(onlyContentEnabled = false)
             .flowOn(dispatcher)
             .onEach { alternativeSources ->
@@ -65,6 +66,7 @@ class MonsterContentManagerStateHolder internal constructor(
                     copy(
                         monsterContents = alternativeSources.map { it.asState() },
                         strings = appLocalization.getStrings(),
+                        isLoading = false,
                     )
                 }
             }

diff --git a/...ore/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/ChallengeRatingCircle.kt b/...ore/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/ChallengeRatingCircle.kt
@@ -18,8 +18,8 @@ package br.alexandregpereira.hunter.ui.compose
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
@@ -53,6 +53,7 @@ fun ChallengeRatingCircle(
     CornerCircle(
         color = backgroundColor,
         size = size,
+        contentPadding = PaddingValues(horizontal = 12.dp, vertical = 8.dp),
     ) {
         Column {
             Text(
@@ -71,7 +72,6 @@ fun ChallengeRatingCircle(
                     color = MaterialTheme.colors.onSurface,
                     textAlign = TextAlign.Center,
                     maxLines = 1,
-                    modifier = Modifier.padding(top = 8.dp)
                 )
             }
         }

diff --git a/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/Common.kt b/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/Common.kt
@@ -60,7 +60,7 @@ fun Window(
         content = content,
         elevation = elevation,
         modifier = modifier
-            .padding(8.dp)
+            .padding(4.dp)
             .clip(shape = cardShape),
     )
 }