fix: refactor grid row count UI layout

Author: appflowy

frontend/app_flowy/assets/translations/en.json

@@ -197,7 +197,8 @@
       "duplicate": "Duplicate",
       "delete": "Delete",
       "textPlaceholder": "Empty",
-      "copyProperty": "Copied property to clipboard"
+      "copyProperty": "Copied property to clipboard",
+      "count": "Count"
     },
     "selectOption": {
       "create": "Create",

frontend/app_flowy/lib/plugins/grid/application/grid_bloc.dart

@@ -41,6 +41,7 @@ class GridBloc extends Bloc<GridEvent, GridState> {
           didReceiveRowUpdate: (newRowInfos, reason) {
             emit(state.copyWith(
               rowInfos: newRowInfos,
+              rowCount: newRowInfos.length,
               reason: reason,
             ));
           },
@@ -117,13 +118,15 @@ class GridState with _$GridState {
     required Option<GridPB> grid,
     required GridFieldEquatable fields,
     required List<RowInfo> rowInfos,
+    required int rowCount,
     required GridLoadingState loadingState,
     required RowsChangedReason reason,
   }) = _GridState;
 
   factory GridState.initial(String gridId) => GridState(
         fields: GridFieldEquatable(UnmodifiableListView([])),
         rowInfos: [],
+        rowCount: 0,
         grid: none(),
         gridId: gridId,
         loadingState: const _Loading(),

frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart

@@ -1,7 +1,9 @@
+import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
 import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/grid_bloc.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
@@ -118,6 +120,7 @@ class _FlowyGridState extends State<FlowyGrid> {
             const _GridToolbarAdaptor(),
             _gridHeader(context, state.gridId),
             Flexible(child: child),
+            const RowCountBadge(),
           ],
         );
       },
@@ -302,48 +305,48 @@ class _GridFooter extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final rowCount = context.watch<GridBloc>().state.rowInfos.length;
-    final theme = context.watch<AppTheme>();
     return SliverPadding(
       padding: const EdgeInsets.only(bottom: 200),
       sliver: SliverToBoxAdapter(
         child: SizedBox(
           height: GridSize.footerHeight,
           child: Padding(
-            padding: GridSize.headerContentInsets,
-            child: Row(
-              children: [
-                SizedBox(width: GridSize.leadingHeaderPadding),
-                Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    const SizedBox(width: 120, child: GridAddRowButton()),
-                    const SizedBox(height: 30),
-                    _rowCountTextWidget(theme: theme, count: rowCount)
-                  ],
-                ),
-              ],
+            padding: GridSize.footerContentInsets,
+            child: const Expanded(
+              child: SizedBox(height: 40, child: GridAddRowButton()),
             ),
           ),
         ),
       ),
     );
   }
+}
 
-  Widget _rowCountTextWidget({required AppTheme theme, required int count}) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.start,
-      children: [
-        FlowyText.regular(
-          'Count : ',
-          fontSize: 13,
-          color: theme.shader3,
-        ),
-        FlowyText.regular(
-          count.toString(),
-          fontSize: 13,
-        ),
-      ],
+class RowCountBadge extends StatelessWidget {
+  const RowCountBadge({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+
+    return BlocSelector<GridBloc, GridState, int>(
+      selector: (state) => state.rowCount,
+      builder: (context, rowCount) {
+        return Padding(
+          padding: GridSize.footerContentInsets,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              FlowyText.regular(
+                '${LocaleKeys.grid_row_count.tr()} : ',
+                fontSize: 13,
+                color: theme.shader3,
+              ),
+              FlowyText.regular(rowCount.toString(), fontSize: 13),
+            ],
+          ),
+        );
+      },
     );
   }
 }

frontend/app_flowy/lib/plugins/grid/presentation/layout/sizes.dart

@@ -5,7 +5,7 @@ class GridSize {
 
   static double get scrollBarSize => 12 * scale;
   static double get headerHeight => 40 * scale;
-  static double get footerHeight => 100 * scale;
+  static double get footerHeight => 40 * scale;
   static double get leadingHeaderPadding => 50 * scale;
   static double get trailHeaderPadding => 140 * scale;
   static double get headerContainerPadding => 0 * scale;
@@ -35,7 +35,7 @@ class GridSize {
       );
 
   static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
-        0,
+        GridSize.leadingHeaderPadding,
         GridSize.headerContainerPadding,
         GridSize.headerContainerPadding,
         GridSize.headerContainerPadding,

frontend/app_flowy/lib/plugins/grid/presentation/widgets/footer/grid_footer.dart

@@ -16,7 +16,7 @@ class GridAddRowButton extends StatelessWidget {
       text: const FlowyText.medium('New row', fontSize: 12),
       hoverColor: theme.shader6,
       onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
-      leftIcon: svgWidget("home/add"),
+      leftIcon: svgWidget("home/add", color: theme.iconColor),
     );
   }
 }