wynd
/
recipe-kt
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Split the view in 3 columns instead of only 1

master
Wynd 2026-03-01 16:13:46 +02:00
parent 0507bbf4c7
commit 7f67e3e4b7
3 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/src/main/java/xyz/pixelatedw/recipe/ui/components/MainScreen.kt
View File

@ -4,10 +4,15 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.items
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Settings
@ -56,6 +61,8 @@ fun MainScreen(ctx: MainActivity, padding: PaddingValues, view: RecipesView) {
var openTagFilterDialog by remember { mutableStateOf(false) }
var selectedEntries by remember { mutableStateOf(listOf<RecipeWithTags>()) }
val gridState = rememberLazyStaggeredGridState()
NavHost(
navController = navController,
startDestination = "list"
@ -129,7 +136,13 @@ fun MainScreen(ctx: MainActivity, padding: PaddingValues, view: RecipesView) {
)
}
}
LazyColumn {
LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(3),
modifier = Modifier.fillMaxSize(),
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalItemSpacing = 8.dp,
state = gridState,
) {
items(activeRecipes) { entry ->
val isSelected = selectedEntries.contains(entry)
RecipePreview(entry, isSelected, onClick = {

49
app/src/main/java/xyz/pixelatedw/recipe/ui/components/RecipePreview.kt
View File

@ -11,10 +11,10 @@ import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
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.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -22,6 +22,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
@ -32,7 +33,6 @@ import androidx.compose.ui.res.imageResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.em
import kotlinx.coroutines.delay
import xyz.pixelatedw.recipe.R
import xyz.pixelatedw.recipe.data.RecipeWithTags
@ -58,17 +58,15 @@ fun RecipePreview(
Column(
modifier = Modifier
.background(color = if (isSelected) Color(0x11FF0000) else Color(0x00FFFFFF))
.padding(8.dp)
.combinedClickable(
onLongClick = { onSelected(!isSelected) },
onClick = onClick
)
.height(192.dp)
) {
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxWidth()
.height(256.dp)
modifier = Modifier.weight(0.7f)
) {
AnimatedContent(
displayImageId,
@ -83,47 +81,42 @@ fun RecipePreview(
Image(
bitmap = displayImage.asImageBitmap(),
contentDescription = "Recipe image",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(256.dp)
.padding(top = 16.dp, bottom = 8.dp),
contentScale = ContentScale.FillHeight,
modifier = Modifier.fillMaxSize(),
)
} else {
Image(
bitmap = ImageBitmap.imageResource(R.drawable.missing_image),
contentDescription = "Missing recipe image",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(256.dp)
.padding(top = 16.dp, bottom = 8.dp),
contentScale = ContentScale.FillWidth,
modifier = Modifier.fillMaxSize(),
)
}
}
}
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp)
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth().weight(0.2f)
) {
Text(
text = entry.recipe.title,
modifier = Modifier.fillMaxWidth(),
style = TextStyle(
textAlign = TextAlign.Center,
fontSize = 7.em,
// fontSize = 7.em,
)
)
}
Row(
horizontalArrangement = Arrangement.End,
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp)
) {
for (tag in entry.tags) {
Tag(tag)
}
}
// Row(
// horizontalArrangement = Arrangement.End,
// modifier = Modifier
// .weight(0.15f)
// .fillMaxWidth()
// ) {
// for (tag in entry.tags) {
// Tag(tag)
// }
// }
}
}

8
app/src/main/java/xyz/pixelatedw/recipe/ui/components/Tag.kt
View File

@ -10,18 +10,20 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import xyz.pixelatedw.recipe.data.Tag
@Composable
fun Tag(tag: Tag) {
Box(
modifier = Modifier
.padding(start = 8.dp)
.clip(RoundedCornerShape(percent = 50))
.padding(start = 4.dp)
.clip(RoundedCornerShape(percent = 25))
.background(Color(0, 153, 170))
) {
Text(
modifier = Modifier.padding(start = 8.dp, end = 8.dp),
modifier = Modifier.padding(start = 4.dp, end = 4.dp),
fontSize = 12.sp,
text = tag.name
)
}