Merge pull request #901 from AppFlowy-IO/feat/board_ui_adjust

feat: Adjust UI details

frontend/app_flowy/lib/plugins/board/presentation/board_page.dart

@@ -9,6 +9,9 @@ import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart'
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_detail.dart';
 import 'package:appflowy_board/appflowy_board.dart';
+import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/block_entities.pb.dart';
@@ -81,21 +84,47 @@ class BoardContent extends StatelessWidget {
   Widget _buildHeader(
       BuildContext context, AFBoardColumnHeaderData headerData) {
     return AppFlowyColumnHeader(
-      icon: const Icon(Icons.lightbulb_circle),
-      title: Text(headerData.columnName),
-      addIcon: const Icon(Icons.add, size: 20),
-      moreIcon: const Icon(Icons.more_horiz, size: 20),
+      // icon: const Icon(Icons.lightbulb_circle),
+      title: Flexible(
+        fit: FlexFit.tight,
+        child: FlowyText.medium(
+          headerData.columnName,
+          fontSize: 14,
+          overflow: TextOverflow.clip,
+          color: context.read<AppTheme>().textColor,
+        ),
+      ),
+      // addIcon: const Icon(Icons.add, size: 20),
+      moreIcon: SizedBox(
+        width: 20,
+        height: 20,
+        child: svgWidget(
+          'grid/details',
+          color: context.read<AppTheme>().iconColor,
+        ),
+      ),
       height: 50,
-      margin: config.columnItemPadding,
+      margin: config.headerPadding,
     );
   }
 
   Widget _buildFooter(BuildContext context, AFBoardColumnData columnData) {
     return AppFlowyColumnFooter(
-        icon: const Icon(Icons.add, size: 20),
-        title: const Text('New'),
+        icon: SizedBox(
+          height: 20,
+          width: 20,
+          child: svgWidget(
+            "home/add",
+            color: context.read<AppTheme>().iconColor,
+          ),
+        ),
+        title: FlowyText.medium(
+          "New",
+          fontSize: 14,
+          color: context.read<AppTheme>().textColor,
+        ),
         height: 50,
-        margin: config.columnItemPadding,
+        margin: config.footerPadding,
         onAddButtonClick: () {
           context.read<BoardBloc>().add(BoardEvent.createRow(columnData.id));
         });
@@ -124,6 +153,8 @@ class BoardContent extends StatelessWidget {
 
     return AppFlowyColumnItemCard(
       key: ObjectKey(item),
+      margin: config.cardPadding,
+      decoration: _makeBoxDecoration(context),
       child: BoardCard(
         gridId: gridId,
         isEditing: isEditing,
@@ -143,6 +174,16 @@ class BoardContent extends StatelessWidget {
     );
   }
 
+  BoxDecoration _makeBoxDecoration(BuildContext context) {
+    final theme = context.read<AppTheme>();
+    final borderSide = BorderSide(color: theme.shader6, width: 1.0);
+    return BoxDecoration(
+      color: theme.surface,
+      border: Border.fromBorderSide(borderSide),
+      borderRadius: const BorderRadius.all(Radius.circular(6)),
+    );
+  }
+
   void _openCard(String gridId, GridFieldCache fieldCache, RowPB rowPB,
       GridRowCache rowCache, BuildContext context) {
     final rowInfo = RowInfo(

frontend/app_flowy/lib/plugins/board/presentation/card/board_checkbox_cell.dart

@@ -5,6 +5,8 @@ import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import 'define.dart';
+
 class BoardCheckboxCell extends StatefulWidget {
   final GridCellControllerBuilder cellControllerBuilder;
 
@@ -38,12 +40,17 @@ class _BoardCheckboxCellState extends State<BoardCheckboxCell> {
           final icon = state.isSelected
               ? svgWidget('editor/editor_check')
               : svgWidget('editor/editor_uncheck');
-          return Align(
-            alignment: Alignment.centerLeft,
-            child: FlowyIconButton(
-              iconPadding: EdgeInsets.zero,
-              icon: icon,
-              width: 20,
+          return Padding(
+            padding: EdgeInsets.symmetric(
+              vertical: BoardSizes.cardCellVPading,
+            ),
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: FlowyIconButton(
+                iconPadding: EdgeInsets.zero,
+                icon: icon,
+                width: 20,
+              ),
             ),
           );
         },

frontend/app_flowy/lib/plugins/board/presentation/card/board_date_cell.dart

@@ -1,9 +1,12 @@
 import 'package:app_flowy/plugins/board/application/card/board_date_cell_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import 'define.dart';
+
 class BoardDateCell extends StatefulWidget {
   final GridCellControllerBuilder cellControllerBuilder;
 
@@ -40,9 +43,15 @@ class _BoardDateCellState extends State<BoardDateCell> {
           } else {
             return Align(
               alignment: Alignment.centerLeft,
-              child: FlowyText.regular(
-                state.dateStr,
-                fontSize: 14,
+              child: Padding(
+                padding: EdgeInsets.symmetric(
+                  vertical: BoardSizes.cardCellVPading,
+                ),
+                child: FlowyText.regular(
+                  state.dateStr,
+                  fontSize: 13,
+                  color: context.read<AppTheme>().shader3,
+                ),
               ),
             );
           }

frontend/app_flowy/lib/plugins/board/presentation/card/board_number_cell.dart

@@ -4,6 +4,8 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import 'define.dart';
+
 class BoardNumberCell extends StatefulWidget {
   final GridCellControllerBuilder cellControllerBuilder;
 
@@ -38,11 +40,15 @@ class _BoardNumberCellState extends State<BoardNumberCell> {
           if (state.content.isEmpty) {
             return const SizedBox();
           } else {
-            return Align(
-              alignment: Alignment.centerLeft,
-              child: FlowyText.regular(
-                state.content,
-                fontSize: 14,
+            return Padding(
+              padding:
+                  EdgeInsets.symmetric(vertical: BoardSizes.cardCellVPading),
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: FlowyText.medium(
+                  state.content,
+                  fontSize: 14,
+                ),
               ),
             );
           }

frontend/app_flowy/lib/plugins/board/presentation/card/board_select_option_cell.dart

@@ -4,6 +4,8 @@ import 'package:app_flowy/plugins/grid/presentation/widgets/cell/select_option_c
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import 'define.dart';
+
 class BoardSelectOptionCell extends StatefulWidget {
   final GridCellControllerBuilder cellControllerBuilder;
 
@@ -42,10 +44,13 @@ class _BoardSelectOptionCellState extends State<BoardSelectOptionCell> {
                 ),
               )
               .toList();
-          return Align(
-            alignment: Alignment.centerLeft,
-            child: AbsorbPointer(
-              child: Wrap(children: children, spacing: 4, runSpacing: 2),
+          return Padding(
+            padding: EdgeInsets.symmetric(vertical: BoardSizes.cardCellVPading),
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: AbsorbPointer(
+                child: Wrap(children: children, spacing: 4, runSpacing: 2),
+              ),
             ),
           );
         },

frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart

@@ -4,6 +4,8 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import 'define.dart';
+
 class BoardTextCell extends StatefulWidget {
   final GridCellControllerBuilder cellControllerBuilder;
   const BoardTextCell({required this.cellControllerBuilder, Key? key})
@@ -37,11 +39,10 @@ class _BoardTextCellState extends State<BoardTextCell> {
           } else {
             return Align(
               alignment: Alignment.centerLeft,
-              child: ConstrainedBox(
-                constraints: BoxConstraints.loose(
-                  const Size(double.infinity, 100),
-                ),
-                child: FlowyText.regular(
+              child: Padding(
+                padding:
+                    EdgeInsets.symmetric(vertical: BoardSizes.cardCellVPading),
+                child: FlowyText.medium(
                   state.content,
                   fontSize: 14,
                 ),

frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart

@@ -4,6 +4,8 @@ import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import 'define.dart';
+
 class BoardUrlCell extends StatefulWidget {
   final GridCellControllerBuilder cellControllerBuilder;
 
@@ -38,16 +40,20 @@ class _BoardUrlCellState extends State<BoardUrlCell> {
           if (state.content.isEmpty) {
             return const SizedBox();
           } else {
-            return Align(
-              alignment: Alignment.centerLeft,
-              child: RichText(
-                textAlign: TextAlign.left,
-                text: TextSpan(
-                  text: state.content,
-                  style: TextStyle(
-                    color: theme.main2,
-                    fontSize: 14,
-                    decoration: TextDecoration.underline,
+            return Padding(
+              padding:
+                  EdgeInsets.symmetric(vertical: BoardSizes.cardCellVPading),
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: RichText(
+                  textAlign: TextAlign.left,
+                  text: TextSpan(
+                    text: state.content,
+                    style: TextStyle(
+                      color: theme.main2,
+                      fontSize: 14,
+                      decoration: TextDecoration.underline,
+                    ),
                   ),
                 ),
               ),

frontend/app_flowy/lib/plugins/board/presentation/card/card.dart

@@ -73,7 +73,7 @@ class _BoardCardState extends State<BoardCard> {
       (cellId) {
         final child = widget.cellBuilder.buildCell(cellId);
         return Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
+          padding: const EdgeInsets.symmetric(horizontal: 6),
           child: child,
         );
       },
@@ -92,7 +92,7 @@ class _CardMoreOption extends StatelessWidget with CardAccessory {
 
   @override
   Widget build(BuildContext context) {
-    return svgWidget('home/details', color: context.read<AppTheme>().iconColor);
+    return svgWidget('grid/details', color: context.read<AppTheme>().iconColor);
   }
 
   @override

frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart

@@ -116,7 +116,7 @@ class _CardEnterRegion extends StatelessWidget {
                   .onEnter = false,
           child: IntrinsicHeight(
               child: Stack(
-            alignment: AlignmentDirectional.center,
+            alignment: AlignmentDirectional.topEnd,
             fit: StackFit.expand,
             children: children,
           )),

frontend/app_flowy/lib/plugins/board/presentation/card/define.dart

@@ -0,0 +1,3 @@
+class BoardSizes {
+  static double get cardCellVPading => 4;
+}

frontend/app_flowy/lib/plugins/grid/application/cell/cell_service/context_builder.dart

@@ -279,7 +279,6 @@ class IGridCellController<T, D> extends Equatable {
     _loadDataOperation?.cancel();
     _loadDataOperation = Timer(const Duration(milliseconds: 10), () {
       _cellDataLoader.loadData().then((data) {
-        Log.debug('$fieldId CellData: Did Get cell data');
         _cellsCache.insert(_cacheKey, GridCell(object: data));
         _cellDataNotifier?.value = data;
       });

frontend/app_flowy/packages/appflowy_board/example/lib/multi_board_list_example.dart

@@ -114,7 +114,7 @@ class _MultiBoardListExampleState extends State<MultiBoardListExample> {
       return Align(
         alignment: Alignment.centerLeft,
         child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40),
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 60),
           child: Text(item.s),
         ),
       );
@@ -124,7 +124,7 @@ class _MultiBoardListExampleState extends State<MultiBoardListExample> {
       return Align(
         alignment: Alignment.centerLeft,
         child: Padding(
-          padding: const EdgeInsets.all(20),
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 60),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [

frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart

@@ -12,12 +12,18 @@ class AFBoardConfig {
   final double cornerRadius;
   final EdgeInsets columnPadding;
   final EdgeInsets columnItemPadding;
+  final EdgeInsets footerPadding;
+  final EdgeInsets headerPadding;
+  final EdgeInsets cardPadding;
   final Color columnBackgroundColor;
 
   const AFBoardConfig({
     this.cornerRadius = 6.0,
     this.columnPadding = const EdgeInsets.symmetric(horizontal: 8),
-    this.columnItemPadding = const EdgeInsets.symmetric(horizontal: 10),
+    this.columnItemPadding = const EdgeInsets.symmetric(horizontal: 12),
+    this.footerPadding = const EdgeInsets.symmetric(horizontal: 12),
+    this.headerPadding = const EdgeInsets.symmetric(horizontal: 16),
+    this.cardPadding = const EdgeInsets.symmetric(horizontal: 3, vertical: 4),
     this.columnBackgroundColor = Colors.transparent,
   });
 }

frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/card.dart

@@ -2,16 +2,17 @@ import 'package:flutter/material.dart';
 
 class AppFlowyColumnItemCard extends StatefulWidget {
   final Widget? child;
-  final Color backgroundColor;
-  final double cornerRadius;
   final EdgeInsets margin;
   final BoxConstraints boxConstraints;
+  final BoxDecoration decoration;
 
   const AppFlowyColumnItemCard({
     this.child,
-    this.cornerRadius = 0.0,
     this.margin = const EdgeInsets.all(4),
-    this.backgroundColor = Colors.white,
+    this.decoration = const BoxDecoration(
+      color: Colors.white,
+      borderRadius: BorderRadius.zero,
+    ),
     this.boxConstraints = const BoxConstraints(minHeight: 40),
     Key? key,
   }) : super(key: key);
@@ -24,14 +25,11 @@ class _AppFlowyColumnItemCardState extends State<AppFlowyColumnItemCard> {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.all(4),
+      padding: widget.margin,
       child: Container(
         clipBehavior: Clip.hardEdge,
         constraints: widget.boxConstraints,
-        decoration: BoxDecoration(
-          color: widget.backgroundColor,
-          borderRadius: BorderRadius.circular(widget.cornerRadius),
-        ),
+        decoration: widget.decoration,
         child: widget.child,
       ),
     );

frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/footer.dart

@@ -12,7 +12,7 @@ class AppFlowyColumnFooter extends StatefulWidget {
   const AppFlowyColumnFooter({
     this.icon,
     this.title,
-    this.margin = EdgeInsets.zero,
+    this.margin = const EdgeInsets.symmetric(horizontal: 12),
     required this.height,
     this.onAddButtonClick,
     Key? key,
@@ -30,12 +30,13 @@ class _AppFlowyColumnFooterState extends State<AppFlowyColumnFooter> {
       child: SizedBox(
         height: widget.height,
         child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 10),
+          padding: widget.margin,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.start,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               if (widget.icon != null) widget.icon!,
+              const SizedBox(width: 8),
               if (widget.title != null) widget.title!,
             ],
           ),

frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/header.dart

@@ -45,15 +45,25 @@ class _AppFlowyColumnHeaderState extends State<AppFlowyColumnHeader> {
     }
 
     if (widget.moreIcon != null) {
-      children.add(const Spacer());
+      // children.add(const Spacer());
       children.add(
-        IconButton(onPressed: widget.onMoreButtonClick, icon: widget.moreIcon!),
+        IconButton(
+          onPressed: widget.onMoreButtonClick,
+          icon: widget.moreIcon!,
+          padding: const EdgeInsets.all(4),
+          constraints: const BoxConstraints(),
+        ),
       );
     }
 
     if (widget.addIcon != null) {
       children.add(
-        IconButton(onPressed: widget.onAddButtonClick, icon: widget.addIcon!),
+        IconButton(
+          onPressed: widget.onAddButtonClick,
+          icon: widget.addIcon!,
+          padding: const EdgeInsets.all(4),
+          constraints: const BoxConstraints(),
+        ),
       );
     }
 
@@ -61,9 +71,7 @@ class _AppFlowyColumnHeaderState extends State<AppFlowyColumnHeader> {
       height: widget.height,
       child: Padding(
         padding: widget.margin,
-        child: Row(
-          children: children,
-        ),
+        child: Row(children: children),
       ),
     );
   }

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart

@@ -20,18 +20,31 @@ class FlowyText extends StatelessWidget {
   }) : super(key: key);
 
   const FlowyText.semibold(this.title,
-      {Key? key, this.fontSize = 16, TextOverflow? overflow, this.color, this.textAlign})
+      {Key? key,
+      this.fontSize = 16,
+      TextOverflow? overflow,
+      this.color,
+      this.textAlign})
       : fontWeight = FontWeight.w600,
         overflow = overflow ?? TextOverflow.ellipsis,
         super(key: key);
 
-  const FlowyText.medium(this.title, {Key? key, this.fontSize = 16, TextOverflow? overflow, this.color, this.textAlign})
+  const FlowyText.medium(this.title,
+      {Key? key,
+      this.fontSize = 16,
+      TextOverflow? overflow,
+      this.color,
+      this.textAlign})
       : fontWeight = FontWeight.w500,
         overflow = overflow ?? TextOverflow.ellipsis,
         super(key: key);
 
   const FlowyText.regular(this.title,
-      {Key? key, this.fontSize = 16, TextOverflow? overflow, this.color, this.textAlign})
+      {Key? key,
+      this.fontSize = 16,
+      TextOverflow? overflow,
+      this.color,
+      this.textAlign})
       : fontWeight = FontWeight.w400,
         overflow = overflow ?? TextOverflow.ellipsis,
         super(key: key);
@@ -40,9 +53,9 @@ class FlowyText extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return Text(title,
-        overflow: overflow,
         softWrap: false,
         textAlign: textAlign,
+        overflow: overflow,
         style: TextStyle(
           color: color ?? theme.textColor,
           fontWeight: fontWeight,

frontend/rust-lib/flowy-grid/tests/grid/group_test/test.rs

@@ -319,7 +319,7 @@ async fn group_move_group_test() {
 #[tokio::test]
 async fn group_update_field_test() {
     let mut test = GridGroupTest::new().await;
-    let mut group = test.group_at_index(0).await;
+    let group = test.group_at_index(0).await;
     let changeset = FieldChangesetParams {
         field_id: group.field_id.clone(),
         grid_id: test.grid_id.clone(),