From 893b6e041d11a6576ef0f3794624db527f5a1b6c Mon Sep 17 00:00:00 2001 From: appflowy Date: Tue, 20 Sep 2022 16:15:05 +0800 Subject: [PATCH] fix: show multi-line in row detail page --- .../application/field/field_editor_bloc.dart | 6 +- .../widgets/header/field_cell.dart | 8 +- .../widgets/header/field_editor.dart | 110 ++++++++---------- .../presentation/widgets/row/row_detail.dart | 1 + .../flowy_infra_ui/lib/style_widget/text.dart | 39 +++++-- 5 files changed, 88 insertions(+), 76 deletions(-) diff --git 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 index af50f47d67..1a4fe17405 100644 --- 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 { 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( diff --git 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 index eec63e1be0..155dd251d9 100755 --- 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, ); } diff --git 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 index c7837accc9..d1a749b18b 100644 --- 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 { isGroupField: widget.isGroupField, loader: widget.typeOptionLoader, )..add(const FieldEditorEvent.initial()), - child: BlocBuilder( - 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 _addDeleteFieldButton(FieldEditorState state) { + List _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( + 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(); - - controller.text = context.read().state.name; - return BlocListener( - listenWhen: (previous, current) => previous.name != current.name, - listener: (context, state) { - controller.text = state.name; - }, + return MultiBlocListener( + listeners: [ + BlocListener( + listenWhen: (p, c) => p.field == none(), + listener: (context, state) { + focusNode.requestFocus(); + }, + ), + BlocListener( + listenWhen: (p, c) => controller.text != c.name, + listener: (context, state) { + controller.text = state.name; + }, + ), + ], child: BlocBuilder( + 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, - ); - } } diff --git 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 index 6ee22cce98..31d595c0cd 100644 --- 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(); diff --git 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 index 4b285a9137..46bf5eea14 100644 --- 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(); return Text( title, + maxLines: maxLines, textAlign: textAlign, overflow: overflow ?? TextOverflow.clip, style: TextStyle(