diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/ItemRecyclers.kt b/src/main/kotlin/com/looker/droidify/ui/compose/ItemRecyclers.kt index ba5a74a4..63c0d1e8 100644 --- a/src/main/kotlin/com/looker/droidify/ui/compose/ItemRecyclers.kt +++ b/src/main/kotlin/com/looker/droidify/ui/compose/ItemRecyclers.kt @@ -11,6 +11,8 @@ import androidx.compose.ui.unit.dp import com.looker.droidify.database.entity.Product import com.looker.droidify.database.entity.Repository import com.looker.droidify.entity.ProductItem +import com.looker.droidify.ui.compose.components.ProductCard +import com.looker.droidify.ui.compose.components.ProductsListItem @Composable fun ProductsVerticalRecycler( @@ -18,13 +20,13 @@ fun ProductsVerticalRecycler( repositories: Map, onUserClick: (ProductItem) -> Unit = {} ) { - Surface(color = MaterialTheme.colorScheme.background){ + Surface(color = MaterialTheme.colorScheme.background) { LazyColumn( verticalArrangement = spacedBy(2.dp) ) { items(productsList ?: emptyList()) { product -> product.item.let { item -> - ProductRow(item, repositories[item.repositoryId], onUserClick) + ProductsListItem(item, repositories[item.repositoryId], onUserClick) } } } @@ -42,7 +44,7 @@ fun ProductsHorizontalRecycler( ) { items(productsList ?: emptyList()) { product -> product.item.let { item -> - ProductColumn(item, repositories[item.repositoryId], onUserClick) + ProductCard(item, repositories[item.repositoryId], onUserClick) } } } diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/components/ProductCard.kt b/src/main/kotlin/com/looker/droidify/ui/compose/components/ProductCard.kt new file mode 100644 index 00000000..c8dba7a9 --- /dev/null +++ b/src/main/kotlin/com/looker/droidify/ui/compose/components/ProductCard.kt @@ -0,0 +1,74 @@ +package com.looker.droidify.ui.compose.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp +import com.looker.droidify.database.entity.Repository +import com.looker.droidify.entity.ProductItem +import com.looker.droidify.network.CoilDownloader +import com.looker.droidify.ui.compose.utils.NetworkImage + +@Composable +fun ProductCard( + item: ProductItem, + repo: Repository? = null, + onUserClick: (ProductItem) -> Unit = {} +) { + + val imageData by remember(item, repo) { + mutableStateOf( + CoilDownloader.createIconUri( + item.packageName, + item.icon, + item.metadataIcon, + repo?.address, + repo?.authentication + ) + ) + } + + Column( + modifier = Modifier + .padding(4.dp) + .requiredSize(80.dp, 116.dp) + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = MaterialTheme.colorScheme.surface) + .clickable(onClick = { onUserClick(item) }), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + NetworkImage( + modifier = Modifier.size(64.dp), + data = imageData + ) + + Text( + modifier = Modifier.padding(4.dp, 2.dp), + text = item.name, + style = MaterialTheme.typography.bodySmall, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + color = MaterialTheme.colorScheme.onSurface + ) + Text( + modifier = Modifier.padding(4.dp, 1.dp), + text = item.version, + style = MaterialTheme.typography.labelSmall, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + color = MaterialTheme.colorScheme.onSurfaceVariant + ) + } +} \ No newline at end of file diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/Items.kt b/src/main/kotlin/com/looker/droidify/ui/compose/components/ProductsListItem.kt similarity index 64% rename from src/main/kotlin/com/looker/droidify/ui/compose/Items.kt rename to src/main/kotlin/com/looker/droidify/ui/compose/components/ProductsListItem.kt index 4b1e6673..e6d959b6 100644 --- a/src/main/kotlin/com/looker/droidify/ui/compose/Items.kt +++ b/src/main/kotlin/com/looker/droidify/ui/compose/components/ProductsListItem.kt @@ -1,9 +1,6 @@ -package com.looker.droidify.ui.compose +package com.looker.droidify.ui.compose.components -import androidx.compose.foundation.background -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.FavoriteBorder @@ -15,22 +12,19 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextOverflow -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.looker.droidify.R import com.looker.droidify.database.entity.Repository import com.looker.droidify.entity.ProductItem import com.looker.droidify.network.CoilDownloader -import com.looker.droidify.ui.compose.components.ExpandableCard -import com.looker.droidify.ui.compose.components.NetworkImage -import com.looker.droidify.ui.compose.theme.AppTheme +import com.looker.droidify.ui.compose.utils.ExpandableCard +import com.looker.droidify.ui.compose.utils.NetworkImage @Composable -fun ProductRow( +fun ProductsListItem( item: ProductItem, repo: Repository? = null, onUserClick: (ProductItem) -> Unit = {} @@ -97,59 +91,6 @@ fun ProductRow( } } -@Composable -fun ProductColumn( - item: ProductItem, - repo: Repository? = null, - onUserClick: (ProductItem) -> Unit = {} -) { - - val imageData by remember(item, repo) { - mutableStateOf( - CoilDownloader.createIconUri( - item.packageName, - item.icon, - item.metadataIcon, - repo?.address, - repo?.authentication - ) - ) - } - - Column( - modifier = Modifier - .padding(4.dp) - .requiredSize(80.dp, 116.dp) - .clip(shape = RoundedCornerShape(8.dp)) - .background(color = MaterialTheme.colorScheme.surface) - .clickable(onClick = { onUserClick(item) }), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - NetworkImage( - modifier = Modifier.size(64.dp), - data = imageData - ) - - Text( - modifier = Modifier.padding(4.dp, 2.dp), - text = item.name, - style = MaterialTheme.typography.bodySmall, - overflow = TextOverflow.Ellipsis, - maxLines = 1, - color = MaterialTheme.colorScheme.onSurface - ) - Text( - modifier = Modifier.padding(4.dp, 1.dp), - text = item.version, - style = MaterialTheme.typography.labelSmall, - overflow = TextOverflow.Ellipsis, - maxLines = 1, - color = MaterialTheme.colorScheme.onSurfaceVariant - ) - } -} - @Composable fun ExpandedItemContent( modifier: Modifier = Modifier, @@ -186,36 +127,4 @@ fun ExpandedItemContent( } } } -} - -@Preview -@Composable -fun ProductColumnPreview() { - AppTheme(darkTheme = false) { - ProductColumn(ProductItem()) - } -} - -@Preview -@Composable -fun ProductColumnDarkPreview() { - AppTheme(darkTheme = true) { - ProductColumn(ProductItem()) - } -} - -@Preview -@Composable -fun ProductRowPreview() { - AppTheme(darkTheme = false) { - ProductRow(ProductItem()) - } -} - -@Preview -@Composable -fun ProductRowDarkPreview() { - AppTheme(darkTheme = true) { - ProductRow(ProductItem()) - } } \ No newline at end of file diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/components/Card.kt b/src/main/kotlin/com/looker/droidify/ui/compose/utils/Card.kt similarity index 63% rename from src/main/kotlin/com/looker/droidify/ui/compose/components/Card.kt rename to src/main/kotlin/com/looker/droidify/ui/compose/utils/Card.kt index 8ece4cb6..3a325876 100644 --- a/src/main/kotlin/com/looker/droidify/ui/compose/components/Card.kt +++ b/src/main/kotlin/com/looker/droidify/ui/compose/utils/Card.kt @@ -1,17 +1,25 @@ -package com.looker.droidify.ui.compose.components +package com.looker.droidify.ui.compose.utils import androidx.compose.animation.* +import androidx.compose.animation.core.animateDpAsState import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.shape.CornerBasedShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.saveable.rememberSaveable +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp import com.looker.droidify.ui.compose.theme.LocalShapes @OptIn(ExperimentalFoundationApi::class) @@ -19,21 +27,26 @@ import com.looker.droidify.ui.compose.theme.LocalShapes fun ExpandableCard( modifier: Modifier = Modifier, preExpanded: Boolean = false, + backgroundColor: Color = MaterialTheme.colorScheme.background, + shape: CornerBasedShape = RoundedCornerShape(LocalShapes.current.large), onClick: () -> Unit = {}, expandedContent: @Composable () -> Unit = {}, mainContent: @Composable () -> Unit ) { - var expanded by remember { mutableStateOf(preExpanded) } + var expanded by rememberSaveable { mutableStateOf(preExpanded) } + val cardElevation by animateDpAsState(targetValue = if (expanded) 12.dp else 0.dp) + val background by animateColorAsState(targetValue = backgroundColor) Surface( modifier = Modifier .animateContentSize() - .clip(RoundedCornerShape(LocalShapes.current.large)) + .clip(shape) .combinedClickable( onClick = onClick, onLongClick = { expanded = !expanded } ), - color = MaterialTheme.colorScheme.background + tonalElevation = cardElevation, + color = background ) { Box(modifier = modifier, contentAlignment = Alignment.CenterStart) { Column { diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/components/Image.kt b/src/main/kotlin/com/looker/droidify/ui/compose/utils/Image.kt similarity index 97% rename from src/main/kotlin/com/looker/droidify/ui/compose/components/Image.kt rename to src/main/kotlin/com/looker/droidify/ui/compose/utils/Image.kt index f9520728..248d6f0a 100644 --- a/src/main/kotlin/com/looker/droidify/ui/compose/components/Image.kt +++ b/src/main/kotlin/com/looker/droidify/ui/compose/utils/Image.kt @@ -1,4 +1,4 @@ -package com.looker.droidify.ui.compose.components +package com.looker.droidify.ui.compose.utils import android.net.Uri import androidx.compose.foundation.Image