Add favourite button, make tiles larger

This commit is contained in:
Joren 2024-04-29 20:27:38 +02:00
parent ed2d8e6409
commit b9ca44892b
Signed by untrusted user who does not match committer: Joren
GPG Key ID: 280E33DFBC0F1B55

View File

@ -4,6 +4,7 @@ import androidx.compose.foundation.Image
import com.ti.mobpo.ui.PokeSearchViewModel
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
@ -14,19 +15,30 @@ import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.layout
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.dp
import com.ti.mobpo.R
import com.ti.mobpo.ui.SearchBar
@ -81,13 +93,14 @@ fun PokeSearch(pokeSearchViewModel: PokeSearchViewModel) {
@Composable
fun PokemonCard(pokemon: PokemonDetails) {
var isFavourite by remember { mutableStateOf(false) }
Card(
shape = MaterialTheme.shapes.medium,
elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
modifier = Modifier
.padding(4.dp)
.fillMaxWidth()
.aspectRatio(1f)
.aspectRatio(0.75f)
) {
Column(
modifier = Modifier.fillMaxSize(),
@ -102,14 +115,38 @@ fun PokemonCard(pokemon: PokemonDetails) {
.fillMaxWidth()
.weight(1f)
)
Text(
text = capitalizeFirstLetterAfterHyphens(pokemon.name),
style = MaterialTheme.typography.bodySmall,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp, vertical = 4.dp) // Adjust padding as needed
.wrapContentSize(Alignment.Center)
)
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
) {
Text(
text = capitalizeFirstLetterAfterHyphens(pokemon.name),
modifier = Modifier
.padding(8.dp)
.weight(1f),
maxLines = 2,
overflow = TextOverflow.Ellipsis
)
IconButton(
onClick = { isFavourite = !isFavourite },
modifier = Modifier.wrapContentSize()
.layout { measurable, constraints ->
if (constraints.maxHeight == Constraints.Infinity) {
layout(0, 0) {}
} else {
val placeable = measurable.measure(constraints)
layout(placeable.width, placeable.height) {
placeable.place(0, 0)
}
}
}
) {
Icon(
imageVector = if (isFavourite) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder,
contentDescription = "Favourite"
)
}
}
}
}
}