feat: cell border

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/content/cell_container.dart

@@ -1,5 +1,7 @@
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 class CellContainer extends StatelessWidget {
   final Widget child;
@@ -12,6 +14,9 @@ class CellContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+    final borderSide = BorderSide(color: theme.shader4, width: 0.4);
+
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onTap: () {},
@@ -19,6 +24,9 @@ class CellContainer extends StatelessWidget {
         constraints: BoxConstraints(
           maxWidth: width,
         ),
+        decoration: BoxDecoration(
+          border: Border(right: borderSide, bottom: borderSide),
+        ),
         padding: EdgeInsets.symmetric(vertical: GridInsets.vertical, horizontal: GridInsets.horizontal),
         child: Center(child: IntrinsicHeight(child: child)),
       ),

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/content/grid_cell.dart

@@ -102,27 +102,14 @@ class RowLeading extends StatelessWidget {
           return Row(
             children: const [
               CreateRowButton(),
+              DrawRowButton(),
             ],
           );
         }
 
-        return const Spacer();
+        return const SizedBox.expand();
       },
     );
-
-    // return GestureDetector(
-    //   behavior: HitTestBehavior.translucent,
-    //   onTap: () {},
-    //   child: MouseHoverBuilder(
-    //     builder: (_, isHovered) => Container(
-    //       width: GridSize.startHeaderPadding,
-    //       decoration: CellDecoration.box(
-    //         color: isHovered ? Colors.red.withOpacity(.1) : Colors.white,
-    //       ),
-    //       padding: EdgeInsets.symmetric(vertical: GridInsets.vertical, horizontal: GridInsets.horizontal),
-    //     ),
-    //   ),
-    // );
   }
 }
 

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/content/grid_row.dart

@@ -1,5 +1,6 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/grid/prelude.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
 import 'package:flowy_infra_ui/widget/mouse_hover_builder.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -41,7 +42,7 @@ class GridRowWidget extends StatelessWidget {
 
   List<Widget> _buildCells() {
     return [
-      RowLeading(rowId: data.row.id),
+      SizedBox(width: GridSize.startHeaderPadding, child: RowLeading(rowId: data.row.id)),
       ...data.fields.map(
         (field) {
           final cellData = data.cellMap[field.id];

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/header.dart

@@ -40,9 +40,7 @@ class GridHeader extends StatelessWidget {
     fields.asMap().forEach((index, field) {
       final header = HeaderCellContainer(
         width: field.width.toDouble(),
-        child: HeaderCell(
-          field,
-        ),
+        child: HeaderCell(field),
       );
 
       //

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/header_cell.dart

@@ -1,6 +1,10 @@
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
+import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/button.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'constants.dart';
 
 class HeaderCell extends StatelessWidget {
@@ -9,10 +13,16 @@ class HeaderCell extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Text(
-      field.name,
-      style: const TextStyle(fontSize: 15.0, color: Colors.black),
+    final theme = context.watch<AppTheme>();
+    return FlowyButton(
+      text: FlowyText.medium(field.name),
+      hoverColor: theme.hover,
+      onTap: () {},
     );
+    // return Text(
+    //   field.name,
+    //   style: const TextStyle(fontSize: 15.0, color: Colors.black),
+    // );
   }
 }
 
@@ -23,18 +33,15 @@ class HeaderCellContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      behavior: HitTestBehavior.translucent,
-      onTap: () {},
-      child: Container(
-        width: width,
-        decoration: BoxDecoration(
-          border: Border.all(color: Colors.black26, width: 0.5),
-          color: GridHeaderConstants.backgroundColor,
-        ),
-        padding: EdgeInsets.symmetric(vertical: GridInsets.vertical, horizontal: GridInsets.horizontal),
-        child: child,
+    final theme = context.watch<AppTheme>();
+    final borderSide = BorderSide(color: theme.shader4, width: 0.4);
+    return Container(
+      width: width,
+      decoration: BoxDecoration(
+        border: Border(top: borderSide, right: borderSide, bottom: borderSide),
       ),
+      padding: EdgeInsets.symmetric(vertical: GridInsets.vertical, horizontal: GridInsets.horizontal),
+      child: child,
     );
   }
 }
@@ -44,9 +51,8 @@ class HeaderCellLeading extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return SizedBox(
       width: GridSize.startHeaderPadding,
-      color: GridHeaderConstants.backgroundColor,
     );
   }
 }