[current results ui] Make suggested UI changes
Configuration counts are in colored circles
History buttons are aligned on right edge
Maximum width increased to 1000px, right border made light gray
Change-Id: I2c19356e31adfb210bdf275c35476b3400576a72
Reviewed-on: https://dart-review.googlesource.com/c/dart_ci/+/161520
Reviewed-by: Karl Klose <karlklose@google.com>
diff --git a/current_results_ui/lib/main.dart b/current_results_ui/lib/main.dart
index 9e985dc..3b65932 100644
--- a/current_results_ui/lib/main.dart
+++ b/current_results_ui/lib/main.dart
@@ -48,9 +48,9 @@
return Align(
alignment: Alignment.topLeft,
child: Container(
- constraints: BoxConstraints(maxWidth: 808.0),
+ constraints: BoxConstraints(maxWidth: 1000.0),
decoration: BoxDecoration(
- border: Border(right: BorderSide(color: Colors.black))),
+ border: Border(right: BorderSide(color: Colors.grey[300]))),
child: Scaffold(
appBar: AppBar(
leading: Align(
diff --git a/current_results_ui/lib/results.dart b/current_results_ui/lib/results.dart
index 0ead7a5..97de9b2 100644
--- a/current_results_ui/lib/results.dart
+++ b/current_results_ui/lib/results.dart
@@ -36,18 +36,9 @@
if (expanded.length != widget.queryResults.names.length) {
expanded = List<bool>.filled(widget.queryResults.names.length, false);
}
- return Align(
- alignment: Alignment.topLeft,
- child: SizedBox(
- width: 800.0,
- child: Container(
- // decoration: BoxDecoration(border: Border.all(color: Colors.black)),
- child: ListView.builder(
- itemCount: widget.queryResults.names.length,
- itemBuilder: itemBuilder(widget.queryResults),
- ),
- ),
- ),
+ return ListView.builder(
+ itemCount: widget.queryResults.names.length,
+ itemBuilder: itemBuilder(widget.queryResults),
);
}
@@ -67,7 +58,7 @@
height: 28.0,
padding: EdgeInsets.only(top: 0.0, left: 8.0),
child: Row(
- crossAxisAlignment: CrossAxisAlignment.end,
+ crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
icon: Icon(
@@ -77,21 +68,32 @@
),
for (final kind in kinds)
Container(
- width: 20,
- alignment: Alignment.bottomCenter,
- color: counts.containsKey(kind)
- ? resultColors[kind]
- : Colors.white,
+ width: 24,
+ alignment: Alignment.center,
+ margin: EdgeInsets.symmetric(horizontal: 1.0),
+ decoration: BoxDecoration(
+ color: counts.containsKey(kind)
+ ? resultColors[kind]
+ : Colors.white,
+ shape: BoxShape.circle,
+ ),
child: Text('${counts[kind] ?? ''}',
style: TextStyle(fontSize: 14.0)),
),
- Flexible(
- child: SingleChildScrollView(
- scrollDirection: Axis.horizontal,
- reverse: true,
- child: SelectableText(
- results.partialResults ? '$name (partial results)' : name,
- style: TextStyle(fontSize: 16.0),
+ Expanded(
+ flex: 1,
+ child: Container(
+ padding: EdgeInsets.only(left: 4.0),
+ alignment: Alignment.centerLeft,
+ child: SingleChildScrollView(
+ scrollDirection: Axis.horizontal,
+ reverse: true,
+ child: SelectableText(
+ results.partialResults
+ ? '$name (partial results)'
+ : name,
+ style: TextStyle(fontSize: 16.0),
+ ),
),
),
),
