From e9b215ebbd9f972961d8dadabc22fc0b76abc577 Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Fri, 26 Aug 2022 14:26:07 +0800 Subject: [PATCH] feat: poover anchor on the object --- .../widgets/header/field_cell.dart | 1 + .../widgets/header/field_editor.dart | 37 +++++++-------- .../widgets/header/grid_header.dart | 1 + .../presentation/widgets/row/row_detail.dart | 1 + .../widgets/toolbar/grid_property.dart | 1 + .../lib/src/flowy_overlay/flowy_popover.dart | 45 +++++++++++++++++-- 6 files changed, 65 insertions(+), 21 deletions(-) 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 20bf490a41..86f67b73ef 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 @@ -67,6 +67,7 @@ class GridFieldCell extends StatelessWidget { FieldEditorPopOver.show( context, + anchorContext: context, gridId: state.gridId, fieldName: field.name, typeOptionLoader: FieldTypeOptionLoader( 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 5289fe6d89..7da896547a 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 @@ -113,9 +113,26 @@ class FieldEditorPopOver extends StatelessWidget { @override Widget build(BuildContext context) { - return FlowyPopover( + return FieldEditor( + gridId: gridId, + fieldName: fieldName, + typeOptionLoader: typeOptionLoader, + key: key); + } + + static show( + BuildContext context, { + required BuildContext anchorContext, + required String gridId, + required String fieldName, + required IFieldTypeOptionLoader typeOptionLoader, + Key? key, + }) { + FlowyPopover.show( + context, + anchorContext: anchorContext, builder: (BuildContext context) { - return FieldEditor( + return FieldEditorPopOver( gridId: gridId, fieldName: fieldName, typeOptionLoader: typeOptionLoader, @@ -123,20 +140,4 @@ class FieldEditorPopOver extends StatelessWidget { }, ); } - - 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 8ae11330b4..7e2466173f 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 @@ -159,6 +159,7 @@ class CreateFieldButton extends StatelessWidget { hoverColor: theme.shader6, onTap: () => FieldEditorPopOver.show( context, + anchorContext: context, gridId: gridId, fieldName: "", typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId), 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 cd9d93026a..ae5ec03031 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 @@ -171,6 +171,7 @@ class _RowDetailCell extends StatelessWidget { void _showFieldEditor(BuildContext context) { FieldEditorPopOver.show( context, + anchorContext: context, gridId: cellId.gridId, fieldName: cellId.field.name, typeOptionLoader: FieldTypeOptionLoader( 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 81cf019d9c..3cef420a53 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 @@ -121,6 +121,7 @@ class _GridPropertyCell extends StatelessWidget { onTap: () { FieldEditorPopOver.show( context, + anchorContext: context, gridId: gridId, fieldName: field.name, typeOptionLoader: FieldTypeOptionLoader(gridId: gridId, field: field), 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 index 4d512fda40..9b8c9d74e6 100644 --- 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 @@ -10,21 +10,59 @@ const _overlayContainerPadding = EdgeInsets.all(12); class FlowyPopover extends StatefulWidget { final Widget Function(BuildContext context) builder; final ShapeBorder? shape; + final Rect anchorRect; + final AnchorDirection? anchorDirection; final EdgeInsets padding; FlowyPopover({ Key? key, required this.builder, + required this.anchorRect, this.shape, this.padding = _overlayContainerPadding, + this.anchorDirection, }) : super(key: key); static show( BuildContext context, { required Widget Function(BuildContext context) builder, + BuildContext? anchorContext, + Offset? anchorPosition, + AnchorDirection? anchorDirection, + Size? anchorSize, + Offset? anchorOffset, }) { + final offset = anchorOffset ?? Offset.zero; + Offset targetAnchorPosition = anchorPosition ?? Offset.zero; + Size targetAnchorSize = anchorSize ?? Size.zero; + if (anchorContext != null) { + RenderObject renderObject = anchorContext.findRenderObject()!; + assert( + renderObject is RenderBox, + 'Unexpected non-RenderBox render object caught.', + ); + final renderBox = renderObject as RenderBox; + targetAnchorPosition = renderBox.localToGlobal(Offset.zero); + targetAnchorSize = renderBox.size; + } + final anchorRect = Rect.fromLTWH( + targetAnchorPosition.dx + offset.dx, + targetAnchorPosition.dy + offset.dy, + targetAnchorSize.width, + targetAnchorSize.height, + ); + showDialog( - barrierColor: Colors.transparent, context: context, builder: builder); + barrierColor: Colors.transparent, + context: context, + builder: (BuildContext context) { + return FlowyPopover( + anchorRect: anchorRect, + anchorDirection: anchorDirection, + builder: (BuildContext context) { + return builder(context); + }); + }); } @override @@ -43,8 +81,9 @@ class _FlowyPopoverState extends State { type: MaterialType.transparency, child: CustomSingleChildLayout( delegate: PopoverLayoutDelegate( - anchorRect: const Rect.fromLTWH(0, 0, 280, 400), - anchorDirection: AnchorDirection.rightWithTopAligned, + anchorRect: widget.anchorRect, + anchorDirection: + widget.anchorDirection ?? AnchorDirection.rightWithTopAligned, overlapBehaviour: OverlapBehaviour.stretch, ), child: Container(