From ddc394fcd73d4fbcd6c0b72ceaccdf0dd5f238ac Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Thu, 25 Aug 2022 16:58:03 +0800 Subject: [PATCH] feat: introduce popover widget --- .../widgets/header/field_cell.dart | 5 +- .../widgets/header/field_editor.dart | 62 +++++++++++++------ .../widgets/header/grid_header.dart | 5 +- .../presentation/widgets/row/row_detail.dart | 5 +- .../widgets/toolbar/grid_property.dart | 5 +- .../flowy_infra_ui/lib/flowy_infra_ui.dart | 1 + .../lib/src/flowy_overlay/flowy_popover.dart | 27 ++++++++ 7 files changed, 84 insertions(+), 26 deletions(-) create mode 100644 frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_popover.dart 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 c1de0eca31..20bf490a41 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 @@ -65,14 +65,15 @@ class GridFieldCell extends StatelessWidget { final state = context.read().state; final field = state.field; - FieldEditor( + FieldEditorPopOver.show( + context, gridId: state.gridId, fieldName: field.name, typeOptionLoader: FieldTypeOptionLoader( gridId: state.gridId, field: field, ), - ).show(context); + ); } } 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 efa70bb81a..655975d2f7 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 @@ -49,24 +49,6 @@ class FieldEditor extends StatelessWidget with FlowyOverlayDelegate { ); } - void show( - BuildContext context, { - AnchorDirection anchorDirection = AnchorDirection.bottomWithLeftAligned, - }) { - FlowyOverlay.of(context).remove(identifier()); - FlowyOverlay.of(context).insertWithAnchor( - widget: OverlayContainer( - child: this, - constraints: BoxConstraints.loose(const Size(280, 400)), - ), - identifier: identifier(), - anchorContext: context, - anchorDirection: anchorDirection, - style: FlowyOverlayStyle(blur: false), - delegate: this, - ); - } - static String identifier() { return (FieldEditor).toString(); } @@ -116,3 +98,47 @@ class _FieldNameCell extends StatelessWidget { ); } } + +class FieldEditorPopOver extends StatelessWidget { + final String gridId; + final String fieldName; + + final IFieldTypeOptionLoader typeOptionLoader; + const FieldEditorPopOver({ + required this.gridId, + required this.fieldName, + required this.typeOptionLoader, + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return FlowyPopover( + child: Container( + constraints: BoxConstraints.loose(const Size(280, 400)), + width: 280, + height: 400, + child: FieldEditor( + gridId: gridId, + fieldName: fieldName, + typeOptionLoader: typeOptionLoader, + key: key), + )); + } + + static show( + BuildContext context, { + required String gridId, + required String fieldName, + required IFieldTypeOptionLoader typeOptionLoader, + Key? key, + }) { + FlowyPopover.show(context, builder: (BuildContext context) { + return FieldEditorPopOver( + gridId: gridId, + fieldName: fieldName, + typeOptionLoader: typeOptionLoader, + key: key); + }); + } +} diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart index 9d33768e65..8ae11330b4 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart @@ -157,11 +157,12 @@ class CreateFieldButton extends StatelessWidget { return FlowyButton( text: const FlowyText.medium('New column', fontSize: 12), hoverColor: theme.shader6, - onTap: () => FieldEditor( + onTap: () => FieldEditorPopOver.show( + context, gridId: gridId, fieldName: "", typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId), - ).show(context), + ), leftIcon: svgWidget("home/add"), ); } 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 a2cba8b2fb..cd9d93026a 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 @@ -169,14 +169,15 @@ class _RowDetailCell extends StatelessWidget { } void _showFieldEditor(BuildContext context) { - FieldEditor( + FieldEditorPopOver.show( + context, gridId: cellId.gridId, fieldName: cellId.field.name, typeOptionLoader: FieldTypeOptionLoader( gridId: cellId.gridId, field: cellId.field, ), - ).show(context); + ); } } diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart index 02230e5139..81cf019d9c 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart @@ -119,11 +119,12 @@ class _GridPropertyCell extends StatelessWidget { hoverColor: theme.hover, leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor), onTap: () { - FieldEditor( + FieldEditorPopOver.show( + context, gridId: gridId, fieldName: field.name, typeOptionLoader: FieldTypeOptionLoader(gridId: gridId, field: field), - ).show(context, anchorDirection: AnchorDirection.bottomRight); + ); }, ); } diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/flowy_infra_ui.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/flowy_infra_ui.dart index 6ec4b64a51..a656077eb5 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/flowy_infra_ui.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/flowy_infra_ui.dart @@ -9,3 +9,4 @@ export 'src/flowy_overlay/flowy_overlay.dart'; export 'src/flowy_overlay/list_overlay.dart'; export 'src/flowy_overlay/option_overlay.dart'; export 'src/flowy_overlay/flowy_dialog.dart'; +export 'src/flowy_overlay/flowy_popover.dart'; diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_popover.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_popover.dart new file mode 100644 index 0000000000..f5bee6b492 --- /dev/null +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_popover.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; + +const _overlayContainerPadding = EdgeInsets.all(12); + +class FlowyPopover extends StatelessWidget { + final Widget child; + final ShapeBorder? shape; + + FlowyPopover({Key? key, required this.child, this.shape}) : super(key: key); + + @override + Widget build(BuildContext context) { + return SimpleDialog( + shape: shape ?? + RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), + children: [Container(padding: _overlayContainerPadding, child: child)], + ); + } + + static show( + BuildContext context, { + required Widget Function(BuildContext context) builder, + }) { + showDialog( + barrierColor: Colors.transparent, context: context, builder: builder); + } +}