feat: add content alignment options using Material 3 SegmentedButton in EditFieldDialog

This commit is contained in:
2025-11-11 22:47:19 +01:00
parent b1e740c396
commit c76d47f687
3 changed files with 12 additions and 21 deletions
+3
View File
@@ -92,6 +92,9 @@ app/src/main/java/com/collabtable/app/
2. Fill in values for each field
3. Values are saved automatically as you type
### Column Content Alignment
In the Edit Column dialog you can choose how each column's cell content is aligned (Left, Center, Right) via a single connected Material 3 segmented button group. The selection persists per list/field and updates immediately when you save changes. To adjust later, open the Manage Columns dialog or edit the field again.
### Deleting
- Tap the delete icon next to any table, field, or item
- Confirm the deletion
+2 -1
View File
@@ -60,7 +60,8 @@ dependencies {
implementation 'androidx.compose.ui:ui'
implementation 'androidx.compose.ui:ui-graphics'
implementation 'androidx.compose.ui:ui-tooling-preview'
implementation 'androidx.compose.material3:material3:1.1.2'
// Use BOM-managed Material3 to access SegmentedButton (connected button group) API
implementation 'androidx.compose.material3:material3'
implementation 'androidx.compose.material:material-icons-extended'
implementation 'androidx.navigation:navigation-compose:2.7.5'
@@ -937,20 +937,6 @@ fun FieldHeader(
)
}
// Alignment segmented control (single-select)
Row(
horizontalArrangement = Arrangement.spacedBy(4.dp),
verticalAlignment = Alignment.CenterVertically,
) {
val opts = listOf("start" to "L", "center" to "C", "end" to "R")
opts.forEach { (value, label) ->
FilterChip(
selected = alignment == value,
onClick = { onAlignmentChange(value) },
label = { Text(label) },
)
}
}
}
}
}
@@ -2016,19 +2002,20 @@ fun EditFieldDialog(
}
}
// Content alignment (single-select) using FilterChips to support current Material3 version
// Content alignment (single-select) using a connected Material3 SegmentedButton group
Text(
text = "Content Alignment",
style = MaterialTheme.typography.titleSmall,
)
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
val opts = listOf("start" to "Left", "center" to "Center", "end" to "Right")
opts.forEach { (value, label) ->
FilterChip(
val alignmentOptions = listOf("start" to "Left", "center" to "Center", "end" to "Right")
SingleChoiceSegmentedButtonRow(modifier = Modifier.padding(top = 4.dp)) {
alignmentOptions.forEachIndexed { index, (value, label) ->
SegmentedButton(
selected = selectedAlignment == value,
onClick = { selectedAlignment = value },
shape = SegmentedButtonDefaults.itemShape(index = index, count = alignmentOptions.size),
icon = { if (selectedAlignment == value) Icon(Icons.Default.Check, contentDescription = null) },
label = { Text(label) },
leadingIcon = if (selectedAlignment == value) { { Icon(Icons.Default.Check, contentDescription = null) } } else null,
)
}
}