Gabriel20xx/CollabTable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve layout consistency in ListDetailScreen; adjust padding and height modifiers for better alignment

Browse Source
This commit is contained in:
Gabriel20xx
2025-11-13 19:11:27 +01:00
parent 9d537e0de6
commit 71f208b624
1 changed files with 35 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/screens/ListDetailScreen.kt
+35 -101
View File
@@ -891,19 +891,20 @@ fun FieldHeader(
.width(width) .width(width)
.border(1.dp, MaterialTheme.colorScheme.outline), .border(1.dp, MaterialTheme.colorScheme.outline),
) { ) {
// Fill the available height provided by EqualHeightRow so content can be centered
Surface( Surface(
modifier = modifier =
Modifier Modifier
.fillMaxWidth() .fillMaxSize()
.heightIn(min = HeaderMinHeight), .heightIn(min = HeaderMinHeight),
color = MaterialTheme.colorScheme.primaryContainer, color = MaterialTheme.colorScheme.primaryContainer,
) { ) {
Row( Row(
modifier = modifier =
Modifier Modifier
.fillMaxWidth() .fillMaxSize()
.heightIn(min = HeaderMinHeight) .heightIn(min = HeaderMinHeight)
.padding(12.dp), .padding(horizontal = 12.dp, vertical = 8.dp),
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
@@ -1043,7 +1044,12 @@ fun ItemRow(
.border( .border(
width = 1.dp, width = 1.dp,
color = MaterialTheme.colorScheme.outline, color = MaterialTheme.colorScheme.outline,
).padding(8.dp), )
.fillMaxHeight()
// Consistent minimum top/bottom padding regardless of row height
.padding(horizontal = 8.dp, vertical = 8.dp),
// Center horizontally based on alignment while always vertically centering
contentAlignment = alignment,
) { ) {
when (field.getType()) { when (field.getType()) {
com.collabtable.app.data.model.FieldType.TEXT -> { com.collabtable.app.data.model.FieldType.TEXT -> {
@@ -1051,10 +1057,7 @@ fun ItemRow(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1063,10 +1066,7 @@ fun ItemRow(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1075,10 +1075,7 @@ fun ItemRow(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1092,10 +1089,7 @@ fun ItemRow(
}, },
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1104,10 +1098,7 @@ fun ItemRow(
text = if (value?.value.isNullOrBlank()) "" else "${value?.value}%", text = if (value?.value.isNullOrBlank()) "" else "${value?.value}%",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1116,10 +1107,7 @@ fun ItemRow(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1128,10 +1116,7 @@ fun ItemRow(
text = if (value?.value == "true") "✓" else "", text = if (value?.value == "true") "✓" else "",
style = MaterialTheme.typography.bodyLarge, style = MaterialTheme.typography.bodyLarge,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1168,10 +1153,7 @@ fun ItemRow(
text = "", text = "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
} }
@@ -1209,10 +1191,7 @@ fun ItemRow(
text = "", text = "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
} }
@@ -1250,10 +1229,7 @@ fun ItemRow(
text = "", text = "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
} }
@@ -1263,10 +1239,7 @@ fun ItemRow(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1275,10 +1248,7 @@ fun ItemRow(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1287,10 +1257,7 @@ fun ItemRow(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1305,10 +1272,7 @@ fun ItemRow(
} else { } else {
MaterialTheme.colorScheme.onSurfaceVariant MaterialTheme.colorScheme.onSurfaceVariant
}, },
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1316,10 +1280,7 @@ fun ItemRow(
Text( Text(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1327,10 +1288,7 @@ fun ItemRow(
Text( Text(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1341,7 +1299,7 @@ fun ItemRow(
Row( Row(
modifier = modifier =
Modifier Modifier
.padding(vertical = 8.dp), .padding(vertical = 0.dp),
) { ) {
repeat(maxRating) { index -> repeat(maxRating) { index ->
Icon( Icon(
@@ -1405,10 +1363,7 @@ fun ItemRow(
text = value?.value ?: "", text = value?.value ?: "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1418,20 +1373,14 @@ fun ItemRow(
text = "🖼️ ${value.value}", text = "🖼️ ${value.value}",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} else { } else {
Text( Text(
text = "", text = "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
} }
@@ -1442,20 +1391,14 @@ fun ItemRow(
text = "📎 ${value.value}", text = "📎 ${value.value}",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} else { } else {
Text( Text(
text = "", text = "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
} }
@@ -1468,10 +1411,7 @@ fun ItemRow(
fontFamily = androidx.compose.ui.text.font.FontFamily.Monospace, fontFamily = androidx.compose.ui.text.font.FontFamily.Monospace,
), ),
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
@@ -1482,20 +1422,14 @@ fun ItemRow(
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.primary, color = MaterialTheme.colorScheme.primary,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} else { } else {
Text( Text(
text = "", text = "",
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
textAlign = textAlign, textAlign = textAlign,
modifier = modifier = Modifier.fillMaxWidth(),
Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
) )
} }
} }