Implement new design for folder preview monster icon

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

Hide file tree

Showing 3 changed files with 29 additions and 50 deletions.
diff --git a/...pose/src/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreview.kt b/...pose/src/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreview.kt
@@ -16,11 +16,9 @@
 
 package br.alexandregpereira.hunter.folder.preview.ui
 
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -30,11 +28,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Card
-import androidx.compose.material.MaterialTheme
 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.domain.model.MonsterFolderPreview
@@ -54,51 +48,38 @@ fun FolderPreview(
     onLongClick: (index: String) -> Unit = {},
     onSave: () -> Unit = {},
 ) {
-    Box(modifier.fillMaxWidth()) {
-        Card(
-            modifier = Modifier
-                .height(40.dp + contentPadding.calculateBottomPadding())
-                .fillMaxWidth()
-                .align(Alignment.BottomCenter),
-            elevation = 0.dp,
-            shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
-            border = BorderStroke(width = 2.dp, color = MaterialTheme.colors.background),
-            backgroundColor = MaterialTheme.colors.background.copy(alpha = 0.5f)
-        ) {}
-        Column {
-            Row {
-                LazyRow(
-                    modifier = Modifier.fillMaxWidth(0.7f),
-                    horizontalArrangement = Arrangement.spacedBy(16.dp),
-                    contentPadding = PaddingValues(horizontal = 16.dp)
-                ) {
-                    items(monsters, key = { it.index }) { state ->
-                        CircleImage(
-                            imageUrl = state.imageUrl,
-                            backgroundColor = if (isSystemInDarkTheme()) {
-                                state.backgroundColorDark
-                            } else {
-                                state.backgroundColorLight
-                            },
-                            contentDescription = state.name,
-                            modifier = Modifier.animateItemPlacement(),
-                            onClick = { onClick(state.index) },
-                            onLongClick = { onLongClick(state.index) }
-                        )
-                    }
+    Column(modifier.fillMaxWidth()) {
+        Spacer(modifier = Modifier.height(8.dp))
+        Row {
+            LazyRow(
+                modifier = Modifier.fillMaxWidth(0.7f),
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                contentPadding = PaddingValues(horizontal = 16.dp)
+            ) {
+                items(monsters, key = { it.index }) { state ->
+                    CircleImage(
+                        imageUrl = state.imageUrl,
+                        backgroundColor = if (isSystemInDarkTheme()) {
+                            state.backgroundColorDark
+                        } else {
+                            state.backgroundColorLight
+                        },
+                        contentDescription = state.name,
+                        modifier = Modifier.animateItemPlacement(),
+                        onClick = { onClick(state.index) },
+                        onLongClick = { onLongClick(state.index) }
+                    )
                 }
-
-                AppButton(
-                    text = saveButtonText,
-                    onClick = onSave,
-                    modifier = Modifier.padding(end = 16.dp)
-                )
             }
 
-            Spacer(
-                modifier = Modifier.height(8.dp + contentPadding.calculateBottomPadding())
+            AppButton(
+                text = saveButtonText,
+                onClick = onSave,
+                modifier = Modifier.padding(end = 16.dp)
             )
         }
+
+        Spacer(modifier = Modifier.height(8.dp + contentPadding.calculateBottomPadding()))
     }
 }
 

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
@@ -24,11 +24,8 @@ 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
@@ -53,7 +50,6 @@ internal fun FolderPreviewScreen(
             onClick = onClick,
             onLongClick = onLongClick,
             onSave = onSave,
-            modifier = Modifier.align(Alignment.BottomCenter).padding(top = 8.dp)
         )
     }
 }
diff --git a/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/CircleImage.kt b/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/CircleImage.kt
@@ -22,6 +22,7 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
@@ -40,6 +41,7 @@ fun CircleImage(
         contentDescription = contentDescription,
         shape = CircleShape,
         backgroundColor = backgroundColor,
+        contentScale = ContentScale.Crop,
         modifier = modifier
             .size(size)
             .animatePressed(