feat(ui): Add inactive state to table

Author: pithuene

packages/memex_ui/lib/color.dart

@@ -6,7 +6,8 @@ class MemexColor {
 
   static const Color text = Color(0xFF000000);
   static const Color textSelection = Color(0x55007aFF);
-  static const Color selection = CupertinoColors.activeBlue;
+  static const Color selection = CupertinoColors.systemBlue;
+  static const Color selectionInactive = Color.fromARGB(255, 127, 189, 255);
   static const Color grid = Color.fromARGB(44, 0, 0, 0);
   static const Color shade = Color.fromARGB(16, 0, 0, 0);
   static const Color transparent = Color.fromARGB(0, 0, 0, 0);

packages/memex_ui/lib/key_label.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/services.dart';
 import 'package:memex_ui/memex_ui.dart';
 
@@ -69,7 +70,7 @@ class KeyLabel extends StatelessWidget {
     Size textContentSize = _calculateTextContentSize();
     return Container(
       decoration: BoxDecoration(
-        color: MemexColor.white,
+        color: CupertinoColors.systemYellow,
         borderRadius: BorderRadius.circular(4),
         border: Border.all(
           color: MemexColor.grid,

packages/memex_ui/lib/miller_columns/miller_columns.dart

@@ -284,6 +284,7 @@ class MillerColumnsState<Key, Node> extends State<MillerColumns<Key, Node>> {
                   showHeader: false,
                   fullWidthHighlight: true,
                   showEvenRowHighlight: false,
+                  isActive: Prop(isLast),
                 ),
               ),
             ),

packages/memex_ui/lib/table/table_row.dart

@@ -12,6 +12,7 @@ class TableViewRow<T> extends StatelessWidget {
     required this.row,
     required this.rowHeight,
     required this.data,
+    this.isActive,
     this.fullWidthHighlight = false,
     bool showEvenRowHighlight = true,
   }) : hasEvenRowHighlight = (showEvenRowHighlight) ? index % 2 == 1 : false;
@@ -29,14 +30,18 @@ class TableViewRow<T> extends StatelessWidget {
   final bool hasEvenRowHighlight;
   final bool fullWidthHighlight;
 
+  /// When the table is not active, the selection color is grey.
+  final Prop<bool>? isActive;
+
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: () {
         data.select(TableSelection(key: row.key, value: row.value));
       },
       behavior: HitTestBehavior.opaque,
-      child: Padding(
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 75),
         padding: fullWidthHighlight
             ? EdgeInsets.zero
             : const EdgeInsets.symmetric(horizontal: 10),
@@ -61,6 +66,7 @@ class TableViewRow<T> extends StatelessWidget {
               hasEvenRowHighlight: hasEvenRowHighlight,
               fullWidthHighlight: fullWidthHighlight,
               isSelected: isSelected,
+              isActive: isActive,
               columnWidths: columnWidths,
               childrenBuilder: (context) => colDefs.map((colDef) {
                 final AlignmentGeometry alignmentGeometry =
@@ -89,8 +95,9 @@ class TableViewRow<T> extends StatelessWidget {
 }
 
 /// Add selection and even / odd highlighting to table rows
-class _RowHighlight extends StatelessWidget {
+class _RowHighlight extends ReactiveWidget {
   const _RowHighlight({
+    this.isActive,
     required this.hasEvenRowHighlight,
     required this.fullWidthHighlight,
     required this.isSelected,
@@ -100,6 +107,10 @@ class _RowHighlight extends StatelessWidget {
 
   final bool hasEvenRowHighlight;
   final bool fullWidthHighlight;
+
+  /// When the table is not active, the selection color is grey.
+  final Prop<bool>? isActive;
+
   final bool isSelected;
   final Map<int, TableColumnWidth> columnWidths;
   final List<Widget> Function(BuildContext) childrenBuilder;
@@ -118,7 +129,9 @@ class _RowHighlight extends StatelessWidget {
       );
     } else if (isSelected) {
       decoration = BoxDecoration(
-        color: MemexColor.selection,
+        color: (isActive?.value ?? true)
+            ? MemexColor.selection
+            : MemexColor.selectionInactive,
         borderRadius: fullWidthHighlight
             ? null
             : const BorderRadius.all(Radius.circular(5)),

packages/memex_ui/lib/table/table_view.dart

@@ -4,13 +4,14 @@ import './table_row.dart';
 
 /// A scrollable data table with sorting and selection.
 class TableView<T> extends ReactiveWidget {
-  const TableView({
+  TableView({
     super.key,
     this.scrollController,
     required this.rowHeight,
     required this.dataSource,
     this.showHeader = true,
     this.showEvenRowHighlight = true,
+    this.isActive,
     this.fullWidthHighlight = false,
   });
 
@@ -28,6 +29,9 @@ class TableView<T> extends ReactiveWidget {
   /// in which case it is also not rounded.
   final bool fullWidthHighlight;
 
+  /// When the table is not active, the selection color is grey.
+  final Prop<bool>? isActive;
+
   /// Optionally override the scrollController.
   final ScrollController? scrollController;
   final TableDatasource<T> dataSource;
@@ -45,21 +49,18 @@ class TableView<T> extends ReactiveWidget {
       builder: (context, order) => ReactiveBuilder(
         () => Column(
           children: [
-            ...showHeader
-                ? [
-                    TableHeader<T>(
-                      colDefs: dataSource.colDefs,
-                      order: order.data,
-                      columnHeaderClicked: (colDef) {
-                        if (colDef == order.data?.column) {
-                          dataSource.reverseOrderDirection();
-                        } else {
-                          dataSource.orderBy(TableOrder(column: colDef));
-                        }
-                      },
-                    )
-                  ]
-                : [],
+            if (showHeader)
+              TableHeader<T>(
+                colDefs: dataSource.colDefs,
+                order: order.data,
+                columnHeaderClicked: (colDef) {
+                  if (colDef == order.data?.column) {
+                    dataSource.reverseOrderDirection();
+                  } else {
+                    dataSource.orderBy(TableOrder(column: colDef));
+                  }
+                },
+              ),
             Expanded(
               child: StreamBuilder<void>(
                 initialData: null,
@@ -78,6 +79,7 @@ class TableView<T> extends ReactiveWidget {
                       row: dataSource.getRowValue(index),
                       showEvenRowHighlight: showEvenRowHighlight,
                       fullWidthHighlight: fullWidthHighlight,
+                      isActive: isActive,
                     );
                   },
                 ),