Skip to content

Commit cdba546

Browse files
google-labs-jules[bot]google-labs-jules[bot]
committed
refactor: Update styling and behavior of system message database
Addresses your feedback on the system message database feature: - "Database" Button: - Shape changed to CircleShape for a more rounded appearance. - Background set to transparent, content color adjusted for visibility. - First Pop-up (Database List): - Now displays a fixed number of rows (approx. 10). - The "New" button is integrated into the first row. - If fewer entries exist than rows, styled empty placeholder rows are shown. - Alternating dark yellow backgrounds for rows maintained. - Removed "No entries found" text in favor of fixed empty row display. - Second Pop-up (New/Edit Entry): - Card background color set to DarkYellow1 to ensure the pop-up content area is fully dark yellow. - OutlinedTextField placeholders are now persistently visible when fields are empty. This was achieved by removing the built-in `label` and adding static `Text` labels above each text field. - General: - Ensured UI elements maintain a modern and rounded aesthetic. - Confirmed existing button colors (e.g. for "New", "Save") are acceptable as per your clarification.
1 parent 8db7949 commit cdba546

1 file changed

Lines changed: 93 additions & 61 deletions

File tree

‎app/src/main/kotlin/com/google/ai/sample/feature/multimodal/PhotoReasoningScreen.kt‎

Lines changed: 93 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import androidx.compose.material.icons.filled.MoreVert
4444
import androidx.compose.material.icons.filled.Send
4545
import androidx.compose.material.icons.outlined.Person
4646
import androidx.compose.material.icons.rounded.Add
47+
import androidx.compose.foundation.shape.CircleShape
4748
import androidx.compose.foundation.shape.RoundedCornerShape
4849
import androidx.compose.material3.Button
4950
import androidx.compose.material3.ButtonDefaults
@@ -282,7 +283,11 @@ fun PhotoReasoningScreen(
282283
)
283284
Button(
284285
onClick = { showDatabaseListPopup = true },
285-
shape = RoundedCornerShape(8.dp)
286+
shape = CircleShape, // More rounded
287+
colors = ButtonDefaults.buttonColors(
288+
containerColor = Color.Transparent,
289+
contentColor = MaterialTheme.colorScheme.onPrimaryContainer
290+
)
286291
) {
287292
Text("Database")
288293
}
@@ -639,59 +644,80 @@ fun DatabaseListPopup(
639644
.padding(16.dp)
640645
.fillMaxSize()
641646
) {
642-
Button(
643-
onClick = onNewClicked,
644-
colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary),
645-
modifier = Modifier.align(Alignment.CenterHorizontally)
646-
) {
647-
Text("New")
648-
}
649-
Spacer(modifier = Modifier.height(16.dp))
647+
val displayRowCount = 10
650648

651-
if (entries.isEmpty()) {
652-
Box(
653-
modifier = Modifier.fillMaxSize(),
654-
contentAlignment = Alignment.Center
655-
) {
656-
Text("No entries found. Click 'New' to add one.")
657-
}
658-
} else {
659-
LazyColumn(modifier = Modifier.weight(1f)) {
660-
itemsIndexed(entries) { index, entry ->
649+
LazyColumn(modifier = Modifier.fillMaxSize()) { // Changed to fillMaxSize if it's the only direct child
650+
items(displayRowCount) { index ->
651+
val actualEntryIndex = index - 1 // For accessing `entries` list
652+
653+
if (index == 0) {
654+
// Row for "New" button
661655
Row(
662656
modifier = Modifier
663657
.fillMaxWidth()
664-
.background(if (index % 2 == 0) DarkYellow1 else DarkYellow2)
665-
.padding(16.dp)
666-
.clickable { onEntryClicked(entry) },
658+
.background(DarkYellow1)
659+
.padding(8.dp), // Adjusted padding
667660
verticalAlignment = Alignment.CenterVertically
668661
) {
669-
Text(
670-
text = entry.title,
671-
modifier = Modifier.weight(1f),
672-
color = Color.Black // Ensure text is visible on yellow
673-
)
674-
Box { // Box anchor for the DropdownMenu
675-
IconButton(onClick = { entryMenuToShow = entry }) {
676-
Icon(
677-
Icons.Filled.MoreVert,
678-
contentDescription = "More options",
679-
tint = Color.Black // Ensure icon is visible
680-
)
681-
}
682-
DropdownMenu(
683-
expanded = entryMenuToShow == entry,
684-
onDismissRequest = { entryMenuToShow = null }
685-
) {
686-
DropdownMenuItem(
687-
text = { Text("Delete") },
688-
onClick = {
689-
onDeleteClicked(entry)
690-
entryMenuToShow = null
691-
}
692-
)
662+
Button(
663+
onClick = onNewClicked,
664+
colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary),
665+
modifier = Modifier.padding(end = 8.dp)
666+
) {
667+
Text("New")
668+
}
669+
Text("Add a new system message guide", color = Color.Gray)
670+
}
671+
} else {
672+
// Subsequent rows for entries or empty placeholders
673+
if (actualEntryIndex < entries.size) {
674+
val entry = entries[actualEntryIndex]
675+
Row(
676+
modifier = Modifier
677+
.fillMaxWidth()
678+
.background(if (actualEntryIndex % 2 == 0) DarkYellow1 else DarkYellow2)
679+
.padding(16.dp)
680+
.clickable { onEntryClicked(entry) },
681+
verticalAlignment = Alignment.CenterVertically
682+
) {
683+
Text(
684+
text = entry.title,
685+
modifier = Modifier.weight(1f),
686+
color = Color.Black
687+
)
688+
Box { // Box anchor for the DropdownMenu
689+
IconButton(onClick = { entryMenuToShow = entry }) {
690+
Icon(
691+
Icons.Filled.MoreVert,
692+
contentDescription = "More options",
693+
tint = Color.Black
694+
)
695+
}
696+
DropdownMenu(
697+
expanded = entryMenuToShow == entry,
698+
onDismissRequest = { entryMenuToShow = null }
699+
) {
700+
DropdownMenuItem(
701+
text = { Text("Delete") },
702+
onClick = {
703+
onDeleteClicked(entry)
704+
entryMenuToShow = null
705+
}
706+
)
707+
}
693708
}
694709
}
710+
} else {
711+
// Empty styled row
712+
Box(
713+
modifier = Modifier
714+
.fillMaxWidth()
715+
.height(56.dp) // Adjust height as needed, e.g., to match other rows
716+
.background(if (actualEntryIndex % 2 == 0) DarkYellow1 else DarkYellow2)
717+
.padding(16.dp)
718+
) {
719+
// Optional: Text("...", color = Color.LightGray.copy(alpha = 0.5f))
720+
}
695721
}
696722
}
697723
}
@@ -869,62 +895,68 @@ fun EditEntryPopup(
869895
) {
870896
Dialog(
871897
onDismissRequest = onDismissRequest,
872-
properties = DialogProperties(usePlatformDefaultWidth = false)
898+
properties = DialogProperties(usePlatformDefaultWidth = false) // Allows custom sizing
873899
) {
874900
Card(
875901
modifier = Modifier
876-
.fillMaxWidth(0.9f)
877-
.fillMaxHeight(0.7f)
878-
.background(DarkYellow1) // Use DarkYellow1 for background
879-
.padding(16.dp), // Padding inside the card
880-
shape = RoundedCornerShape(16.dp)
902+
.fillMaxWidth(0.9f) // Dialog width relative to screen
903+
.fillMaxHeight(0.7f) // Dialog height relative to screen
904+
.padding(16.dp), // Overall padding *around* the card content, effectively margin from dialog edge
905+
shape = RoundedCornerShape(16.dp),
906+
colors = CardDefaults.cardColors(containerColor = DarkYellow1) // Set Card's own background
881907
) {
882908
Column(
883909
modifier = Modifier
884-
.padding(16.dp) // Inner padding for content
910+
.padding(16.dp) // Padding for the content *inside* the card
885911
.fillMaxSize()
886912
) {
887913
var titleInput by rememberSaveable { mutableStateOf(entry?.title ?: "") }
888914
var guideInput by rememberSaveable { mutableStateOf(entry?.guide ?: "") }
889915

916+
// Title Field
917+
Text("Title", style = MaterialTheme.typography.labelMedium, color = Color.Black.copy(alpha = 0.7f)) // Custom label
918+
Spacer(modifier = Modifier.height(4.dp))
890919
OutlinedTextField(
891920
value = titleInput,
892921
onValueChange = { titleInput = it },
893-
label = { Text("Title") },
922+
// label = { Text("Title") }, // REMOVE LABEL
894923
placeholder = { Text("App/Task", color = Color.Gray) },
895924
modifier = Modifier.fillMaxWidth(),
896-
colors = TextFieldDefaults.colors( // For M3 OutlinedTextField
925+
colors = TextFieldDefaults.colors(
897926
focusedContainerColor = Color.White,
898927
unfocusedContainerColor = Color.White,
899928
disabledContainerColor = Color.White,
900929
cursorColor = Color.Black, // Ensure cursor is visible
901930
focusedTextColor = Color.Black,
902931
unfocusedTextColor = Color.Black,
903-
focusedLabelColor = MaterialTheme.colorScheme.primary,
904-
unfocusedLabelColor = Color.Gray
932+
// focusedLabelColor = MaterialTheme.colorScheme.primary, // Not needed without label
933+
// unfocusedLabelColor = Color.Gray // Not needed without label
905934
),
906935
singleLine = true
907936
)
908937

909938
Spacer(modifier = Modifier.height(8.dp))
910939

940+
// Guide Field
941+
Text("Guide", style = MaterialTheme.typography.labelMedium, color = Color.Black.copy(alpha = 0.7f)) // Custom label
942+
Spacer(modifier = Modifier.height(4.dp))
911943
OutlinedTextField(
912944
value = guideInput,
913945
onValueChange = { guideInput = it },
914-
label = { Text("Guide") },
946+
// label = { Text("Guide") }, // REMOVE LABEL
915947
placeholder = { Text("Write a guide for an LLM on how it should perform certain tasks to be successful", color = Color.Gray) },
916948
modifier = Modifier
917949
.fillMaxWidth()
918950
.weight(1f),
919-
colors = TextFieldDefaults.colors( // For M3 OutlinedTextField
951+
colors = TextFieldDefaults.colors(
920952
focusedContainerColor = Color.White,
921953
unfocusedContainerColor = Color.White,
922954
disabledContainerColor = Color.White,
923955
cursorColor = Color.Black, // Ensure cursor is visible
924956
focusedTextColor = Color.Black,
925957
unfocusedTextColor = Color.Black,
926-
focusedLabelColor = MaterialTheme.colorScheme.primary,
927-
unfocusedLabelColor = Color.Gray
958+
// focusedLabelColor = MaterialTheme.colorScheme.primary, // Not needed without label
959+
// unfocusedLabelColor = Color.Gray // Not needed without label
928960
),
929961
minLines = 5
930962
)

0 commit comments

Comments
 (0)