Merge pull request #962 from AppFlowy-IO/fix/board_ui_bugs

fix: board ui bugs

Author: appflowy

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

@@ -80,23 +80,7 @@ class _BoardContentState extends State<BoardContent> {
   @override
   Widget build(BuildContext context) {
     return BlocListener<BoardBloc, BoardState>(
-      listener: (context, state) {
-        state.editingRow.fold(
-          () => null,
-          (editingRow) {
-            WidgetsBinding.instance.addPostFrameCallback((_) {
-              if (editingRow.index != null) {
-              } else {
-                scrollManager.scrollToBottom(editingRow.columnId, () {
-                  context
-                      .read<BoardBloc>()
-                      .add(BoardEvent.endEditRow(editingRow.row.id));
-                });
-              }
-            });
-          },
-        );
-      },
+      listener: (context, state) => _handleEditState(state, context),
       child: BlocBuilder<BoardBloc, BoardState>(
         buildWhen: (previous, current) =>
             previous.groupIds.length != current.groupIds.length,
@@ -137,6 +121,27 @@ class _BoardContentState extends State<BoardContent> {
     );
   }
 
+  void _handleEditState(BoardState state, BuildContext context) {
+    state.editingRow.fold(
+      () => null,
+      (editingRow) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (editingRow.index != null) {
+            context
+                .read<BoardBloc>()
+                .add(BoardEvent.endEditRow(editingRow.row.id));
+          } else {
+            scrollManager.scrollToBottom(editingRow.columnId, () {
+              context
+                  .read<BoardBloc>()
+                  .add(BoardEvent.endEditRow(editingRow.row.id));
+            });
+          }
+        });
+      },
+    );
+  }
+
   @override
   void dispose() {
     scrollController.dispose();

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

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'board_cell.dart';
+import 'define.dart';
 
 class BoardTextCell extends StatefulWidget with EditableCell {
   final String groupId;
@@ -29,6 +30,7 @@ class BoardTextCell extends StatefulWidget with EditableCell {
 class _BoardTextCellState extends State<BoardTextCell> {
   late BoardTextCellBloc _cellBloc;
   late TextEditingController _controller;
+  bool focusWhenInit = false;
   SingleListenerFocusNode focusNode = SingleListenerFocusNode();
 
   @override
@@ -38,6 +40,7 @@ class _BoardTextCellState extends State<BoardTextCell> {
     _cellBloc = BoardTextCellBloc(cellController: cellController)
       ..add(const BoardTextCellEvent.initial());
     _controller = TextEditingController(text: _cellBloc.state.content);
+    focusWhenInit = widget.isFocus;
 
     if (widget.isFocus) {
       focusNode.requestFocus();
@@ -46,6 +49,12 @@ class _BoardTextCellState extends State<BoardTextCell> {
     focusNode.addListener(() {
       if (!focusNode.hasFocus) {
         _cellBloc.add(const BoardTextCellEvent.enableEdit(false));
+
+        if (focusWhenInit) {
+          setState(() {
+            focusWhenInit = false;
+          });
+        }
       }
     });
 
@@ -77,38 +86,19 @@ class _BoardTextCellState extends State<BoardTextCell> {
         },
         child: BlocBuilder<BoardTextCellBloc, BoardTextCellState>(
           builder: (context, state) {
+            if (state.content.isEmpty &&
+                state.enableEdit == false &&
+                focusWhenInit == false) {
+              return const SizedBox();
+            }
+
+            //
             Widget child;
-            if (state.content.isEmpty && state.enableEdit == false) {
-              child = const SizedBox();
+            if (state.enableEdit || focusWhenInit) {
+              child = _buildTextField();
             } else {
-              if (state.enableEdit) {
-                child = TextField(
-                  controller: _controller,
-                  focusNode: focusNode,
-                  onChanged: (value) => focusChanged(),
-                  onEditingComplete: () => focusNode.unfocus(),
-                  maxLines: 1,
-                  style: const TextStyle(
-                    fontSize: 14,
-                    fontWeight: FontWeight.w500,
-                    fontFamily: 'Mulish',
-                  ),
-                  decoration: const InputDecoration(
-                    // Magic number 4 makes the textField take up the same space as FlowyText
-                    contentPadding: EdgeInsets.symmetric(vertical: 4),
-                    border: InputBorder.none,
-                    isDense: true,
-                  ),
-                );
-              } else {
-                child = FlowyText.medium(state.content, fontSize: 14);
-                child = Padding(
-                  padding: const EdgeInsets.symmetric(vertical: 6),
-                  child: child,
-                );
-              }
+              child = _buildText(state);
             }
-
             return Align(alignment: Alignment.centerLeft, child: child);
           },
         ),
@@ -127,4 +117,36 @@ class _BoardTextCellState extends State<BoardTextCell> {
     focusNode.dispose();
     super.dispose();
   }
+
+  Widget _buildText(BoardTextCellState state) {
+    return Padding(
+      padding: EdgeInsets.symmetric(
+        vertical: BoardSizes.cardCellVPadding,
+      ),
+      child: FlowyText.medium(state.content, fontSize: 14),
+    );
+  }
+
+  Widget _buildTextField() {
+    return TextField(
+      controller: _controller,
+      focusNode: focusNode,
+      onChanged: (value) => focusChanged(),
+      onEditingComplete: () => focusNode.unfocus(),
+      maxLines: 1,
+      style: const TextStyle(
+        fontSize: 14,
+        fontWeight: FontWeight.w500,
+        fontFamily: 'Mulish',
+      ),
+      decoration: InputDecoration(
+        // Magic number 4 makes the textField take up the same space as FlowyText
+        contentPadding: EdgeInsets.symmetric(
+          vertical: BoardSizes.cardCellVPadding + 4,
+        ),
+        border: InputBorder.none,
+        isDense: true,
+      ),
+    );
+  }
 }