Merge pull request #1102 from AppFlowy-IO/fix/ui_bugs

Fix/UI bugs

Author: appflowy

frontend/app_flowy/lib/plugins/grid/application/field/field_editor_bloc.dart

@@ -33,8 +33,10 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
             await dataController.loadTypeOptionData();
           },
           updateName: (name) {
-            dataController.fieldName = name;
-            emit(state.copyWith(name: name));
+            if (state.name != name) {
+              dataController.fieldName = name;
+              emit(state.copyWith(name: name));
+            }
           },
           didReceiveFieldChanged: (FieldPB field) {
             emit(state.copyWith(

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart

@@ -58,7 +58,7 @@ class _DateCellState extends GridCellState<GridDateCell> {
   Widget build(BuildContext context) {
     final alignment = widget.cellStyle != null
         ? widget.cellStyle!.alignment
-        : Alignment.center;
+        : Alignment.centerLeft;
     return BlocProvider.value(
       value: _cellBloc,
       child: BlocBuilder<DateCellBloc, DateCellState>(
@@ -77,7 +77,10 @@ class _DateCellState extends GridCellState<GridDateCell> {
                   cursor: SystemMouseCursors.click,
                   child: Align(
                     alignment: alignment,
-                    child: FlowyText.medium(state.dateStr, fontSize: 12),
+                    child: FlowyText.medium(
+                      state.dateStr,
+                      fontSize: 12,
+                    ),
                   ),
                 ),
               ),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart

@@ -11,20 +11,17 @@ import 'package:textfield_tags/textfield_tags.dart';
 
 import 'extension.dart';
 
-class SelectOptionTextField extends StatelessWidget {
-  final FocusNode _focusNode;
-  final TextEditingController _controller;
+class SelectOptionTextField extends StatefulWidget {
   final TextfieldTagsController tagController;
   final List<SelectOptionPB> options;
   final LinkedHashMap<String, SelectOptionPB> selectedOptionMap;
-
   final double distanceToText;
 
   final Function(String) onNewTag;
   final Function(String) newText;
   final VoidCallback? onClick;
 
-  SelectOptionTextField({
+  const SelectOptionTextField({
     required this.options,
     required this.selectedOptionMap,
     required this.distanceToText,
@@ -35,41 +32,63 @@ class SelectOptionTextField extends StatelessWidget {
     TextEditingController? textController,
     FocusNode? focusNode,
     Key? key,
-  })  : _controller = textController ?? TextEditingController(),
-        _focusNode = focusNode ?? FocusNode(),
-        super(key: key);
+  }) : super(key: key);
+
+  @override
+  State<SelectOptionTextField> createState() => _SelectOptionTextFieldState();
+}
+
+class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
+  late FocusNode focusNode;
+  late TextEditingController controller;
+
+  @override
+  void initState() {
+    focusNode = FocusNode();
+    controller = TextEditingController();
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      focusNode.requestFocus();
+    });
+    super.initState();
+  }
 
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
 
     return TextFieldTags(
-      textEditingController: _controller,
-      textfieldTagsController: tagController,
-      initialTags: selectedOptionMap.keys.toList(),
-      focusNode: _focusNode,
+      textEditingController: controller,
+      textfieldTagsController: widget.tagController,
+      initialTags: widget.selectedOptionMap.keys.toList(),
+      focusNode: focusNode,
       textSeparators: const [','],
-      inputfieldBuilder: (BuildContext context, editController, focusNode,
-          error, onChanged, onSubmitted) {
+      inputfieldBuilder: (
+        BuildContext context,
+        editController,
+        focusNode,
+        error,
+        onChanged,
+        onSubmitted,
+      ) {
         return ((context, sc, tags, onTagDelegate) {
           return TextField(
-            autofocus: true,
             controller: editController,
             focusNode: focusNode,
-            onTap: onClick,
+            onTap: widget.onClick,
             onChanged: (text) {
               if (onChanged != null) {
                 onChanged(text);
               }
-              newText(text);
+              widget.newText(text);
             },
             onSubmitted: (text) {
               if (onSubmitted != null) {
                 onSubmitted(text);
               }
 
               if (text.isNotEmpty) {
-                onNewTag(text);
+                widget.onNewTag(text);
                 focusNode.requestFocus();
               }
             },
@@ -83,7 +102,8 @@ class SelectOptionTextField extends StatelessWidget {
               isDense: true,
               prefixIcon: _renderTags(context, sc),
               hintText: LocaleKeys.grid_selectOption_searchOption.tr(),
-              prefixIconConstraints: BoxConstraints(maxWidth: distanceToText),
+              prefixIconConstraints:
+                  BoxConstraints(maxWidth: widget.distanceToText),
               focusedBorder: OutlineInputBorder(
                 borderSide: BorderSide(color: theme.main1, width: 1.0),
                 borderRadius: Corners.s10Border,
@@ -96,11 +116,11 @@ class SelectOptionTextField extends StatelessWidget {
   }
 
   Widget? _renderTags(BuildContext context, ScrollController sc) {
-    if (selectedOptionMap.isEmpty) {
+    if (widget.selectedOptionMap.isEmpty) {
       return null;
     }
 
-    final children = selectedOptionMap.values
+    final children = widget.selectedOptionMap.values
         .map((option) =>
             SelectOptionTag.fromOption(context: context, option: option))
         .toList();

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart

@@ -137,9 +137,11 @@ class _DragToExpandLine extends StatelessWidget {
 class FieldCellButton extends StatelessWidget {
   final VoidCallback onTap;
   final FieldPB field;
+  final int? maxLines;
   const FieldCellButton({
     required this.field,
     required this.onTap,
+    this.maxLines = 1,
     Key? key,
   }) : super(key: key);
 
@@ -150,7 +152,11 @@ class FieldCellButton extends StatelessWidget {
       hoverColor: theme.shader6,
       onTap: onTap,
       leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
-      text: FlowyText.medium(field.name, fontSize: 12),
+      text: FlowyText.medium(
+        field.name,
+        fontSize: 12,
+        maxLines: maxLines,
+      ),
       margin: GridSize.cellContentInsets,
     );
   }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart

@@ -1,10 +1,9 @@
 import 'package:app_flowy/plugins/grid/application/field/field_editor_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:dartz/dartz.dart' show none;
 import 'package:easy_localization/easy_localization.dart';
-import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:flowy_infra/theme.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
@@ -59,38 +58,38 @@ class _FieldEditorState extends State<FieldEditor> {
         isGroupField: widget.isGroupField,
         loader: widget.typeOptionLoader,
       )..add(const FieldEditorEvent.initial()),
-      child: BlocBuilder<FieldEditorBloc, FieldEditorState>(
-        builder: (context, state) {
-          return ListView(
-            shrinkWrap: true,
-            children: [
-              FlowyText.medium(
-                LocaleKeys.grid_field_editProperty.tr(),
-                fontSize: 12,
-              ),
-              const VSpace(10),
-              _FieldNameTextField(popoverMutex: popoverMutex),
-              const VSpace(10),
-              ..._addDeleteFieldButton(state),
-              _FieldTypeOptionCell(popoverMutex: popoverMutex),
-            ],
-          );
-        },
+      child: ListView(
+        shrinkWrap: true,
+        children: [
+          FlowyText.medium(
+            LocaleKeys.grid_field_editProperty.tr(),
+            fontSize: 12,
+          ),
+          const VSpace(10),
+          _FieldNameTextField(popoverMutex: popoverMutex),
+          const VSpace(10),
+          ..._addDeleteFieldButton(),
+          _FieldTypeOptionCell(popoverMutex: popoverMutex),
+        ],
       ),
     );
   }
 
-  List<Widget> _addDeleteFieldButton(FieldEditorState state) {
+  List<Widget> _addDeleteFieldButton() {
     if (widget.onDeleted == null) {
       return [];
     }
     return [
-      _DeleteFieldButton(
-        popoverMutex: popoverMutex,
-        onDeleted: () {
-          state.field.fold(
-            () => Log.error('Can not delete the field'),
-            (field) => widget.onDeleted?.call(field.id),
+      BlocBuilder<FieldEditorBloc, FieldEditorState>(
+        builder: (context, state) {
+          return _DeleteFieldButton(
+            popoverMutex: popoverMutex,
+            onDeleted: () {
+              state.field.fold(
+                () => Log.error('Can not delete the field'),
+                (field) => widget.onDeleted?.call(field.id),
+              );
+            },
           );
         },
       ),
@@ -139,13 +138,13 @@ class _FieldNameTextField extends StatefulWidget {
 }
 
 class _FieldNameTextFieldState extends State<_FieldNameTextField> {
-  late String name;
   FocusNode focusNode = FocusNode();
   VoidCallback? _popoverCallback;
-  TextEditingController controller = TextEditingController();
+  late TextEditingController controller;
 
   @override
   void initState() {
+    controller = TextEditingController();
     focusNode.addListener(() {
       if (focusNode.hasFocus) {
         widget.popoverMutex.close();
@@ -158,20 +157,29 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-
-    controller.text = context.read<FieldEditorBloc>().state.name;
-    return BlocListener<FieldEditorBloc, FieldEditorState>(
-      listenWhen: (previous, current) => previous.name != current.name,
-      listener: (context, state) {
-        controller.text = state.name;
-      },
+    return MultiBlocListener(
+      listeners: [
+        BlocListener<FieldEditorBloc, FieldEditorState>(
+          listenWhen: (p, c) => p.field == none(),
+          listener: (context, state) {
+            focusNode.requestFocus();
+          },
+        ),
+        BlocListener<FieldEditorBloc, FieldEditorState>(
+          listenWhen: (p, c) => controller.text != c.name,
+          listener: (context, state) {
+            controller.text = state.name;
+          },
+        ),
+      ],
       child: BlocBuilder<FieldEditorBloc, FieldEditorState>(
+        buildWhen: (previous, current) =>
+            previous.errorText != current.errorText,
         builder: (context, state) {
           listenOnPopoverChanged(context);
 
           return RoundedInputField(
             height: 36,
-            autoFocus: true,
             focusNode: focusNode,
             style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
             controller: controller,
@@ -193,23 +201,15 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
 
   void listenOnPopoverChanged(BuildContext context) {
     if (_popoverCallback != null) {
-      widget.popoverMutex.removePopoverStateListener(_popoverCallback!);
+      widget.popoverMutex.removePopoverListener(_popoverCallback!);
     }
-    _popoverCallback = widget.popoverMutex.listenOnPopoverStateChanged(() {
+    _popoverCallback = widget.popoverMutex.listenOnPopoverChanged(() {
       if (focusNode.hasFocus) {
         final node = FocusScope.of(context);
         node.unfocus();
       }
     });
   }
-
-  @override
-  void didUpdateWidget(covariant _FieldNameTextField oldWidget) {
-    controller.selection = TextSelection.fromPosition(
-        TextPosition(offset: controller.text.length));
-
-    super.didUpdateWidget(oldWidget);
-  }
 }
 
 class _DeleteFieldButton extends StatelessWidget {
@@ -235,29 +235,11 @@ class _DeleteFieldButton extends StatelessWidget {
             fontSize: 12,
             color: enable ? null : theme.shader4,
           ),
+          onTap: () => onDeleted?.call(),
         );
-        if (enable) button = _wrapPopover(button);
+        // if (enable) button = button;
         return button;
       },
     );
   }
-
-  Widget _wrapPopover(Widget widget) {
-    return AppFlowyPopover(
-      triggerActions: PopoverTriggerFlags.click,
-      constraints: BoxConstraints.loose(const Size(400, 240)),
-      mutex: popoverMutex,
-      direction: PopoverDirection.center,
-      popupBuilder: (popupContext) {
-        return PopoverAlertView(
-          title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
-          cancel: () {},
-          confirm: () {
-            onDeleted?.call();
-          },
-        );
-      },
-      child: widget,
-    );
-  }
 }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart

@@ -65,7 +65,7 @@ class FieldTypeOptionEditor extends StatelessWidget {
     return SizedBox(
       height: GridSize.typeOptionItemHeight,
       child: AppFlowyPopover(
-        constraints: BoxConstraints.loose(const Size(460, 440)),
+        constraints: BoxConstraints.loose(const Size(460, 540)),
         asBarrier: true,
         triggerActions: PopoverTriggerFlags.click | PopoverTriggerFlags.hover,
         mutex: popoverMutex,

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart

@@ -64,6 +64,7 @@ class DateTypeOptionWidget extends TypeOptionWidget {
   Widget _renderDateFormatButton(BuildContext context, DateFormat dataFormat) {
     return AppFlowyPopover(
       mutex: popoverMutex,
+      asBarrier: true,
       triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
       offset: const Offset(20, 0),
       constraints: BoxConstraints.loose(const Size(460, 440)),
@@ -85,6 +86,7 @@ class DateTypeOptionWidget extends TypeOptionWidget {
   Widget _renderTimeFormatButton(BuildContext context, TimeFormat timeFormat) {
     return AppFlowyPopover(
       mutex: popoverMutex,
+      asBarrier: true,
       triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
       offset: const Offset(20, 0),
       constraints: BoxConstraints.loose(const Size(460, 440)),