mirror of
https://github.com/owenlejeune/TVTime.git
synced 2025-11-21 19:20:57 -05:00
refactor composable widgets
This commit is contained in:
@@ -0,0 +1,66 @@
|
|||||||
|
package com.owenlejeune.tvtime.ui.components
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.height
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.lazy.LazyColumn
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
|
import androidx.compose.material.Card
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.owenlejeune.tvtime.extensions.listItems
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun PaletteView() {
|
||||||
|
class PaletteItem(val color: Color, val textColor: Color, val text: String)
|
||||||
|
|
||||||
|
val items = listOf(
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.primary, MaterialTheme.colorScheme.onPrimary, "primary"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.primaryContainer, MaterialTheme.colorScheme.onPrimaryContainer, "primary container"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.inversePrimary, Color.Black, "inverse primary"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.secondary, MaterialTheme.colorScheme.onSecondary, "secondary"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.secondaryContainer, MaterialTheme.colorScheme.onSecondaryContainer, "secondary container"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.tertiary, MaterialTheme.colorScheme.onTertiary, "tertiary"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.tertiaryContainer, MaterialTheme.colorScheme.onTertiaryContainer, "tertiary container"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.background, MaterialTheme.colorScheme.onBackground, "background"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.surface, MaterialTheme.colorScheme.onSurface, "surface"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.surfaceVariant, MaterialTheme.colorScheme.onSurfaceVariant, "surface variant"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.inverseSurface, MaterialTheme.colorScheme.inverseOnSurface, "inverse surface"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.error, MaterialTheme.colorScheme.onError, "error"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.errorContainer, MaterialTheme.colorScheme.onErrorContainer, "primary"),
|
||||||
|
PaletteItem(MaterialTheme.colorScheme.outline, Color.Black, "outline")
|
||||||
|
)
|
||||||
|
|
||||||
|
LazyColumn(modifier = Modifier.fillMaxSize()) {
|
||||||
|
listItems(items) { item ->
|
||||||
|
PaletteItemView(
|
||||||
|
surfaceColor = item.color,
|
||||||
|
textColor = item.textColor,
|
||||||
|
text = item.text
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
private fun PaletteItemView(surfaceColor: Color, textColor: Color, text: String) {
|
||||||
|
Card(
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
.height(100.dp)
|
||||||
|
.padding(12.dp),
|
||||||
|
shape = RoundedCornerShape(30.dp),
|
||||||
|
backgroundColor = surfaceColor
|
||||||
|
) {
|
||||||
|
Text(
|
||||||
|
text = text,
|
||||||
|
color = textColor,
|
||||||
|
modifier = Modifier.padding(30.dp, 12.dp)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
package com.owenlejeune.tvtime.ui.components
|
||||||
|
|
||||||
|
import android.widget.Toast
|
||||||
|
import androidx.compose.foundation.ExperimentalFoundationApi
|
||||||
|
import androidx.compose.foundation.Image
|
||||||
|
import androidx.compose.foundation.clickable
|
||||||
|
import androidx.compose.foundation.layout.PaddingValues
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.foundation.lazy.GridCells
|
||||||
|
import androidx.compose.foundation.lazy.LazyVerticalGrid
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.MutableState
|
||||||
|
import androidx.compose.runtime.mutableStateOf
|
||||||
|
import androidx.compose.runtime.remember
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.platform.LocalContext
|
||||||
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import coil.compose.rememberImagePainter
|
||||||
|
import coil.transform.RoundedCornersTransformation
|
||||||
|
import com.owenlejeune.tvtime.R
|
||||||
|
import com.owenlejeune.tvtime.api.tmdb.TmdbUtils
|
||||||
|
import com.owenlejeune.tvtime.api.tmdb.model.MediaItem
|
||||||
|
import com.owenlejeune.tvtime.extensions.dpToPx
|
||||||
|
import com.owenlejeune.tvtime.extensions.listItems
|
||||||
|
|
||||||
|
@OptIn(ExperimentalFoundationApi::class)
|
||||||
|
@Composable
|
||||||
|
fun PosterGrid(fetchMedia: (MutableState<List<MediaItem>>) -> Unit) {
|
||||||
|
val mediaList = remember { mutableStateOf(emptyList<MediaItem>()) }
|
||||||
|
fetchMedia(mediaList)
|
||||||
|
|
||||||
|
LazyVerticalGrid(
|
||||||
|
cells = GridCells.Fixed(count = 3),
|
||||||
|
contentPadding = PaddingValues(8.dp)
|
||||||
|
) {
|
||||||
|
listItems(mediaList.value) { item ->
|
||||||
|
PosterItem(mediaItem = item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun PosterItem(mediaItem: MediaItem) {
|
||||||
|
val context = LocalContext.current
|
||||||
|
val poster = TmdbUtils.getFullPosterPath(mediaItem)
|
||||||
|
Image(
|
||||||
|
painter = rememberImagePainter(
|
||||||
|
data = poster,
|
||||||
|
builder = {
|
||||||
|
transformations(RoundedCornersTransformation(5f.dpToPx(context)))
|
||||||
|
placeholder(R.drawable.placeholder)
|
||||||
|
}
|
||||||
|
),
|
||||||
|
contentDescription = mediaItem.title,
|
||||||
|
modifier = Modifier
|
||||||
|
.size(190.dp)
|
||||||
|
.padding(5.dp)
|
||||||
|
.clickable {
|
||||||
|
Toast
|
||||||
|
.makeText(context, "${mediaItem.title} clicked", Toast.LENGTH_SHORT)
|
||||||
|
.show()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
fun PosterItemPreview() {
|
||||||
|
PosterItem(mediaItem = object : MediaItem(
|
||||||
|
title = "Deadpool",
|
||||||
|
posterPath = "/fSRb7vyIP8rQpL0I47P3qUsEKX3.jpg"
|
||||||
|
){})
|
||||||
|
}
|
||||||
@@ -37,55 +37,6 @@ import com.owenlejeune.tvtime.api.tmdb.model.MediaItem
|
|||||||
import com.owenlejeune.tvtime.extensions.dpToPx
|
import com.owenlejeune.tvtime.extensions.dpToPx
|
||||||
import com.owenlejeune.tvtime.extensions.listItems
|
import com.owenlejeune.tvtime.extensions.listItems
|
||||||
|
|
||||||
@OptIn(ExperimentalFoundationApi::class)
|
|
||||||
@Composable
|
|
||||||
fun PosterGrid(fetchMedia: (MutableState<List<MediaItem>>) -> Unit) {
|
|
||||||
val mediaList = remember { mutableStateOf(emptyList<MediaItem>()) }
|
|
||||||
fetchMedia(mediaList)
|
|
||||||
|
|
||||||
LazyVerticalGrid(
|
|
||||||
cells = GridCells.Fixed(count = 3),
|
|
||||||
contentPadding = PaddingValues(8.dp)
|
|
||||||
) {
|
|
||||||
listItems(mediaList.value) { item ->
|
|
||||||
PosterItem(mediaItem = item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Composable
|
|
||||||
fun PosterItem(mediaItem: MediaItem) {
|
|
||||||
val context = LocalContext.current
|
|
||||||
val poster = TmdbUtils.getFullPosterPath(mediaItem)
|
|
||||||
Image(
|
|
||||||
painter = rememberImagePainter(
|
|
||||||
data = poster,
|
|
||||||
builder = {
|
|
||||||
transformations(RoundedCornersTransformation(5f.dpToPx(context)))
|
|
||||||
placeholder(R.drawable.placeholder)
|
|
||||||
}
|
|
||||||
),
|
|
||||||
contentDescription = mediaItem.title,
|
|
||||||
modifier = Modifier
|
|
||||||
.size(190.dp)
|
|
||||||
.padding(5.dp)
|
|
||||||
.clickable {
|
|
||||||
Toast
|
|
||||||
.makeText(context, "${mediaItem.title} clicked", Toast.LENGTH_SHORT)
|
|
||||||
.show()
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@Preview
|
|
||||||
@Composable
|
|
||||||
fun PosterItemPreview() {
|
|
||||||
PosterItem(mediaItem = object : MediaItem(
|
|
||||||
title = "Deadpool",
|
|
||||||
posterPath = "/fSRb7vyIP8rQpL0I47P3qUsEKX3.jpg"
|
|
||||||
){})
|
|
||||||
}
|
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun TopLevelSwitch(
|
fun TopLevelSwitch(
|
||||||
text: String,
|
text: String,
|
||||||
@@ -134,7 +85,7 @@ fun TopLevelSwitch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun CustomSwitch(
|
private fun CustomSwitch(
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
switchState: MutableState<Boolean> = remember { mutableStateOf(false) },
|
switchState: MutableState<Boolean> = remember { mutableStateOf(false) },
|
||||||
onCheckChanged: (Boolean) -> Unit = {}
|
onCheckChanged: (Boolean) -> Unit = {}
|
||||||
@@ -194,53 +145,3 @@ fun TopLevelSwitchPreview() {
|
|||||||
Toast.makeText(context, "Switch changed to $isChecked", Toast.LENGTH_SHORT).show()
|
Toast.makeText(context, "Switch changed to $isChecked", Toast.LENGTH_SHORT).show()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
|
||||||
fun PaletteView() {
|
|
||||||
class PaletteItem(val color: Color, val textColor: Color, val text: String)
|
|
||||||
|
|
||||||
val items = listOf(
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.primary, MaterialTheme.colorScheme.onPrimary, "primary"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.primaryContainer, MaterialTheme.colorScheme.onPrimaryContainer, "primary container"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.inversePrimary, Color.Black, "inverse primary"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.secondary, MaterialTheme.colorScheme.onSecondary, "secondary"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.secondaryContainer, MaterialTheme.colorScheme.onSecondaryContainer, "secondary container"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.tertiary, MaterialTheme.colorScheme.onTertiary, "tertiary"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.tertiaryContainer, MaterialTheme.colorScheme.onTertiaryContainer, "tertiary container"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.background, MaterialTheme.colorScheme.onBackground, "background"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.surface, MaterialTheme.colorScheme.onSurface, "surface"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.surfaceVariant, MaterialTheme.colorScheme.onSurfaceVariant, "surface variant"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.inverseSurface, MaterialTheme.colorScheme.inverseOnSurface, "inverse surface"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.error, MaterialTheme.colorScheme.onError, "error"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.errorContainer, MaterialTheme.colorScheme.onErrorContainer, "primary"),
|
|
||||||
PaletteItem(MaterialTheme.colorScheme.outline, Color.Black, "outline")
|
|
||||||
)
|
|
||||||
|
|
||||||
LazyColumn(modifier = Modifier.fillMaxSize()) {
|
|
||||||
listItems(items) { item ->
|
|
||||||
PaletteItemView(
|
|
||||||
surfaceColor = item.color,
|
|
||||||
textColor = item.textColor,
|
|
||||||
text = item.text
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Composable
|
|
||||||
fun PaletteItemView(surfaceColor: Color, textColor: Color, text: String) {
|
|
||||||
Card(
|
|
||||||
modifier = Modifier
|
|
||||||
.fillMaxWidth()
|
|
||||||
.height(100.dp)
|
|
||||||
.padding(12.dp),
|
|
||||||
shape = RoundedCornerShape(30.dp),
|
|
||||||
backgroundColor = surfaceColor
|
|
||||||
) {
|
|
||||||
Text(
|
|
||||||
text = text,
|
|
||||||
color = textColor,
|
|
||||||
modifier = Modifier.padding(30.dp, 12.dp)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user