mirror of
https://github.com/Aviortheking/Neo-Store.git
synced 2025-06-07 08:19:55 +00:00
Separate ProductCard and ProductsListItem
This commit is contained in:
LooKeR
parent
44aa91d4fe
commit
d1bdefef3a
@ -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<Long, Repository>,
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -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())
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
@ -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
|
||||
Loading…
x
Reference in New Issue
Block a user