fix: show multi-line in row detail page

2024-08-30 18:12:39 +00:00 · 2022-09-20 16:15:05 +08:00 · 2022-09-20 16:15:05 +08:00 · 893b6e041d
commit 893b6e041d
parent 1f2b30abfb
5 changed files with 88 additions and 76 deletions
--- a/frontend/app_flowy/lib/plugins/grid/application/field/field_editor_bloc.dart
+++ b/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(
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart
+++ b/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,
    );
  }
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
+++ b/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,
@ -202,14 +210,6 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
      }
    });
  }
-
-  @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,
-    );
-  }
 }
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart
@ -285,6 +285,7 @@ class _RowDetailCellState extends State<_RowDetailCell> {
              child: SizedBox(
                width: 150,
                child: FieldCellButton(
+                  maxLines: null,
                  field: widget.cellId.fieldContext.field,
                  onTap: () {
                    popover.show();
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
@ -8,6 +8,7 @@ class FlowyText extends StatelessWidget {
  final double fontSize;
  final FontWeight fontWeight;
  final TextAlign? textAlign;
+  final int? maxLines;
  final Color? color;

  const FlowyText(
@ -18,21 +19,40 @@ class FlowyText extends StatelessWidget {
    this.fontWeight = FontWeight.w400,
    this.textAlign,
    this.color,
+    this.maxLines = 1,
  }) : super(key: key);

-  const FlowyText.semibold(this.title,
-      {Key? key, this.fontSize = 16, this.overflow, this.color, this.textAlign})
-      : fontWeight = FontWeight.w600,
+  const FlowyText.semibold(
+    this.title, {
+    Key? key,
+    this.fontSize = 16,
+    this.overflow,
+    this.color,
+    this.textAlign,
+    this.maxLines = 1,
+  })  : fontWeight = FontWeight.w600,
        super(key: key);

-  const FlowyText.medium(this.title,
-      {Key? key, this.fontSize = 16, this.overflow, this.color, this.textAlign})
-      : fontWeight = FontWeight.w500,
+  const FlowyText.medium(
+    this.title, {
+    Key? key,
+    this.fontSize = 16,
+    this.overflow,
+    this.color,
+    this.textAlign,
+    this.maxLines = 1,
+  })  : fontWeight = FontWeight.w500,
        super(key: key);

-  const FlowyText.regular(this.title,
-      {Key? key, this.fontSize = 16, this.overflow, this.color, this.textAlign})
-      : fontWeight = FontWeight.w400,
+  const FlowyText.regular(
+    this.title, {
+    Key? key,
+    this.fontSize = 16,
+    this.overflow,
+    this.color,
+    this.textAlign,
+    this.maxLines = 1,
+  })  : fontWeight = FontWeight.w400,
        super(key: key);

  @override
@ -40,6 +60,7 @@ class FlowyText extends StatelessWidget {
    final theme = context.watch<AppTheme>();
    return Text(
      title,
+      maxLines: maxLines,
      textAlign: textAlign,
      overflow: overflow ?? TextOverflow.clip,
      style: TextStyle(