From 4be57c9f63ca511b61cd78a4ef68a834b8e5fa68 Mon Sep 17 00:00:00 2001 From: Alexandre G Pereira Date: Sun, 11 Aug 2024 17:40:35 -0300 Subject: [PATCH] Implement new design for folder preview monster icon --- .../hunter/folder/preview/ui/FolderPreview.kt | 73 +++++++------------ .../folder/preview/ui/FolderPreviewScreen.kt | 4 - .../hunter/ui/compose/CircleImage.kt | 2 + 3 files changed, 29 insertions(+), 50 deletions(-) diff --git a/feature/folder-preview/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreview.kt b/feature/folder-preview/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreview.kt index 9a61941e3..8e588c5f0 100644 --- a/feature/folder-preview/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreview.kt +++ b/feature/folder-preview/compose/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/feature/folder-preview/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreviewScreen.kt b/feature/folder-preview/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreviewScreen.kt index add4c68c9..a05744a84 100644 --- a/feature/folder-preview/compose/src/commonMain/kotlin/br/alexandregpereira/hunter/folder/preview/ui/FolderPreviewScreen.kt +++ b/feature/folder-preview/compose/src/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 index 174302372..a385071c7 100644 --- 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(