Added shadow and rounded corner

This commit is contained in:
dankito 2024-08-25 02:32:33 +02:00
parent 3124bfc8f8
commit 8808843392
2 changed files with 14 additions and 7 deletions

View File

@ -19,7 +19,7 @@ fun TransactionListItem(transaction: AccountTransaction, backgroundColor: Color)
Row(
modifier = Modifier.fillMaxWidth()
.background(color = backgroundColor)
.padding(4.dp),
.padding(horizontal = 6.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically
) {
Column(

View File

@ -4,6 +4,8 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Divider
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
@ -32,7 +34,7 @@ fun TransactionsList(transactions: List<AccountTransaction>) {
modifier = Modifier.padding(4.dp)
) {
items(groupedByMonth.keys.sortedDescending()) { month ->
Column(modifier = Modifier.fillMaxWidth()) {
Column(Modifier.fillMaxWidth()) {
Text(
text = DI.formatUtil.formatMonth(month),
fontSize = 16.sp,
@ -44,12 +46,17 @@ fun TransactionsList(transactions: List<AccountTransaction>) {
val monthTransactions = groupedByMonth[month].orEmpty().sortedByDescending { it.valueDate }
Column(Modifier.background(Color.White)) { // LazyColumn inside LazyColumn is not allowed
monthTransactions.forEachIndexed { index, transaction ->
TransactionListItem(transaction, if (index % 2 == 1) Colors.Zinc100_50 else Color.Transparent)
Card(
shape = RoundedCornerShape(12.dp), // Rounded corners
elevation = 2.dp // Shadow elevation
) {
Column(Modifier.background(Color.White)) { // LazyColumn inside LazyColumn is not allowed
monthTransactions.forEachIndexed { index, transaction ->
TransactionListItem(transaction, if (index % 2 == 1) Colors.Zinc100_50 else Color.Transparent)
if (index < monthTransactions.size - 1) {
Divider(color = Colors.Zinc200, thickness = 1.dp)
if (index < monthTransactions.size - 1) {
Divider(color = Colors.Zinc200, thickness = 1.dp)
}
}
}
}