feat: add content alignment options using Material 3 SegmentedButton in EditFieldDialog
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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'
|
||||
|
||||
|
||||
+7
-20
@@ -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,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user