From 7f67e3e4b7d0ffc67d95116cc481fb945d998ac9 Mon Sep 17 00:00:00 2001 From: Wynd Date: Sun, 1 Mar 2026 16:13:46 +0200 Subject: [PATCH] Split the view in 3 columns instead of only 1 --- .../recipe/ui/components/MainScreen.kt | 15 +++++- .../recipe/ui/components/RecipePreview.kt | 49 ++++++++----------- .../pixelatedw/recipe/ui/components/Tag.kt | 8 +-- 3 files changed, 40 insertions(+), 32 deletions(-) diff --git a/app/src/main/java/xyz/pixelatedw/recipe/ui/components/MainScreen.kt b/app/src/main/java/xyz/pixelatedw/recipe/ui/components/MainScreen.kt index ad41bf5..b0ef4a2 100644 --- a/app/src/main/java/xyz/pixelatedw/recipe/ui/components/MainScreen.kt +++ b/app/src/main/java/xyz/pixelatedw/recipe/ui/components/MainScreen.kt @@ -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()) } + 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 = { diff --git a/app/src/main/java/xyz/pixelatedw/recipe/ui/components/RecipePreview.kt b/app/src/main/java/xyz/pixelatedw/recipe/ui/components/RecipePreview.kt index 0e09e9f..e852f48 100644 --- a/app/src/main/java/xyz/pixelatedw/recipe/ui/components/RecipePreview.kt +++ b/app/src/main/java/xyz/pixelatedw/recipe/ui/components/RecipePreview.kt @@ -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) +// } +// } } } diff --git a/app/src/main/java/xyz/pixelatedw/recipe/ui/components/Tag.kt b/app/src/main/java/xyz/pixelatedw/recipe/ui/components/Tag.kt index 3e900dd..00ea3bd 100644 --- a/app/src/main/java/xyz/pixelatedw/recipe/ui/components/Tag.kt +++ b/app/src/main/java/xyz/pixelatedw/recipe/ui/components/Tag.kt @@ -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 ) }