home ui done

This commit is contained in:
Xaver 2025-01-14 10:30:36 +01:00
parent 9ec87011e1
commit ba5989e471
3 changed files with 46 additions and 53 deletions

View File

@ -11,6 +11,7 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import at.xaxa.ledger.ui.LedgerApp
import at.xaxa.ledger.ui.theme.LedgerTheme

View File

@ -45,7 +45,7 @@ fun HeaderCard(modifier: Modifier = Modifier, balance: String) {
color = Color(0xfff9f9f9),
border = BorderStroke(1.dp, Color(0xffc6c6c6)),
modifier = modifier
.requiredWidth(width = 360.dp)
.padding(16.dp, 0.dp)
.shadow(
elevation = 8.dp,
shape = RoundedCornerShape(12.dp),
@ -114,8 +114,7 @@ fun HorizontalCard(modifier: Modifier = Modifier, name: String, date: String, am
color = Color(0xfff9f9f9),
border = BorderStroke(1.dp, Color(0xffc6c6c6)),
modifier = modifier
.requiredWidth(width = 360.dp)
.requiredHeight(height = 80.dp)
.padding(16.dp, 0.dp)
.clip(shape = RoundedCornerShape(12.dp))
) {
Row(
@ -186,37 +185,7 @@ private fun HorizontalCardPreview() {
// region Button Success
@Composable
fun ButtonSuccess(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
Button(
onClick = onClick,
shape = RoundedCornerShape(10.dp),
colors = ButtonDefaults.buttonColors(containerColor = Color(0xff61a483)),
contentPadding = PaddingValues(horizontal = 24.dp, vertical = 10.dp),
modifier = modifier
.requiredHeight(height = 40.dp)
) {
Column(
verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically),
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.requiredHeight(height = 40.dp)
) {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.fillMaxSize()
) {
Text(
text = text,
color = Color.White,
textAlign = TextAlign.Center,
lineHeight = 1.43.em,
style = MaterialTheme.typography.labelLarge,
modifier = Modifier
.wrapContentHeight(align = Alignment.CenterVertically))
}
}
}
CustomButton(modifier, text, onClick, Color(0xff61a483))
}
@Preview()
@ -229,13 +198,32 @@ private fun ButtonSuccessPreview() {
// region Button Danger
@Composable
fun ButtonDanger(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
CustomButton(modifier, text, onClick, Color(0xffc14d4d))
}
@Preview()
@Composable
private fun ButtonDangerPreview() {
ButtonDanger(Modifier, "Danger", onClick = { println("success") })
}
// endregion
//Color(0xff61a483)
@Composable
private fun CustomButton(modifier: Modifier = Modifier, text: String, onClick: () -> Unit, color: Color){
Button(
onClick = onClick,
shape = RoundedCornerShape(10.dp),
colors = ButtonDefaults.buttonColors(containerColor = Color(0xffc14d4d)),
colors = ButtonDefaults.buttonColors(containerColor = color),
contentPadding = PaddingValues(horizontal = 24.dp, vertical = 10.dp),
modifier = modifier
.requiredHeight(height = 40.dp)
.padding(16.dp, 0.dp)
.shadow(
elevation = 8.dp,
shape = RoundedCornerShape(12.dp),
clip = false
)
) {
Column(
verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically),
@ -254,17 +242,11 @@ fun ButtonDanger(modifier: Modifier = Modifier, text: String, onClick: () -> Uni
color = Color.White,
textAlign = TextAlign.Center,
lineHeight = 1.43.em,
style = MaterialTheme.typography.labelLarge,
style = MaterialTheme.typography.labelMedium,
fontSize = 16.sp,
modifier = Modifier
.wrapContentHeight(align = Alignment.CenterVertically))
}
}
}
}
@Preview()
@Composable
private fun ButtonDangerPreview() {
ButtonDanger(Modifier, "Danger", onClick = { println("success") })
}
// endregion
}

View File

@ -18,24 +18,29 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import at.xaxa.ledger.ui.ButtonSuccess
import at.xaxa.ledger.ui.HeaderCard
import at.xaxa.ledger.ui.HorizontalCard
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun Home(modifier: Modifier = Modifier, onCardClick: (Int) -> Unit) {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally) {
horizontalAlignment = Alignment.CenterHorizontally
) {
val items = (1..20).toList()
LazyColumn() {
// LazyColumn with constrained height
LazyColumn(
modifier = Modifier
.weight(1f)
) {
stickyHeader {
HeaderCard(modifier = modifier, "-13563.00€")
}
items(items) { index ->
Column(
modifier = Modifier.padding(vertical = 4.dp) // Add vertical padding
modifier = Modifier.padding(vertical = 4.dp)
) {
HorizontalCard(
modifier = modifier,
@ -48,8 +53,13 @@ fun Home(modifier: Modifier = Modifier, onCardClick: (Int) -> Unit) {
}
}
Box(modifier = Modifier.align(Alignment.BottomCenter)) {
//This is your sticky footer Content
// Sticky footer content
Box(
modifier = Modifier
.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
ButtonSuccess(modifier = Modifier, "Add Transaction", onClick = { println("success") })
}
}
}
}