diff --git a/CollabTableAndroid/README.md b/CollabTableAndroid/README.md index b4cf985..1f23e14 100644 --- a/CollabTableAndroid/README.md +++ b/CollabTableAndroid/README.md @@ -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 diff --git a/CollabTableAndroid/app/build.gradle b/CollabTableAndroid/app/build.gradle index 1cd2a5d..f7b789c 100644 --- a/CollabTableAndroid/app/build.gradle +++ b/CollabTableAndroid/app/build.gradle @@ -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' diff --git a/CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/screens/ListDetailScreen.kt b/CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/screens/ListDetailScreen.kt index 13b9cb2..fd161ce 100644 --- a/CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/screens/ListDetailScreen.kt +++ b/CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/screens/ListDetailScreen.kt @@ -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, ) } }