From 01a79c69c334361d2e774f9eb1df0f1d584d251a Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Tue, 30 Aug 2022 14:51:25 +0800 Subject: [PATCH] feat: use popover in detail page --- .../widgets/header/field_editor.dart | 23 -------- .../header/field_type_option_editor.dart | 20 +++---- .../widgets/header/grid_header.dart | 16 +++--- .../presentation/widgets/row/row_detail.dart | 52 ++++++++++++------- .../widgets/toolbar/grid_property.dart | 14 ++--- .../lib/src/flowy_overlay/flowy_popover.dart | 44 ---------------- 6 files changed, 60 insertions(+), 109 deletions(-) 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 835568fa88..7e40ea1ea7 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 @@ -116,26 +116,3 @@ class _FieldNameCell extends StatelessWidget { ); } } - -class FieldEditorPopOver { - 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( - gridId: gridId, - fieldName: fieldName, - typeOptionLoader: typeOptionLoader, - key: key); - }, - ); - } -} diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart index 2a67af114d..ee33e06601 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart @@ -128,16 +128,16 @@ class _FieldTypeOptionEditorState extends State { void _showOverlay(BuildContext context, Widget child, {VoidCallback? onRemoved}) { - FlowyPopover.show( - context, - constraints: BoxConstraints.loose(const Size(460, 440)), - anchorContext: context, - anchorDirection: AnchorDirection.rightWithCenterAligned, - anchorOffset: const Offset(20, 0), - builder: (BuildContext context) { - return child; - }, - ); + // FlowyPopover.show( + // context, + // constraints: BoxConstraints.loose(const Size(460, 440)), + // anchorContext: context, + // anchorDirection: AnchorDirection.rightWithCenterAligned, + // anchorOffset: const Offset(20, 0), + // builder: (BuildContext context) { + // return child; + // }, + // ); } void _hideOverlay(BuildContext context) { 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 7e2466173f..3b7410f61d 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,13 +157,15 @@ class CreateFieldButton extends StatelessWidget { return FlowyButton( text: const FlowyText.medium('New column', fontSize: 12), hoverColor: theme.shader6, - onTap: () => FieldEditorPopOver.show( - context, - anchorContext: context, - gridId: gridId, - fieldName: "", - typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId), - ), + onTap: () { + // FieldEditorPopOver.show( + // context, + // anchorContext: context, + // gridId: gridId, + // fieldName: "", + // typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId), + // ) + }, 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 ae5ec03031..bba80ab865 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 @@ -13,6 +13,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:appflowy_popover/popover.dart'; import '../../layout/sizes.dart'; import '../cell/cell_accessory.dart'; @@ -123,7 +124,7 @@ class _PropertyList extends StatelessWidget { } } -class _RowDetailCell extends StatelessWidget { +class _RowDetailCell extends StatefulWidget { final GridCellIdentifier cellId; final GridCellBuilder cellBuilder; const _RowDetailCell({ @@ -132,11 +133,18 @@ class _RowDetailCell extends StatelessWidget { Key? key, }) : super(key: key); + @override + State createState() => _RowDetailCellState(); +} + +class _RowDetailCellState extends State<_RowDetailCell> { + final PopoverController popover = PopoverController(); + @override Widget build(BuildContext context) { final theme = context.watch(); - final style = _customCellStyle(theme, cellId.fieldType); - final cell = cellBuilder.build(cellId, style: style); + final style = _customCellStyle(theme, widget.cellId.fieldType); + final cell = widget.cellBuilder.build(widget.cellId, style: style); final gesture = GestureDetector( behavior: HitTestBehavior.translucent, @@ -157,8 +165,29 @@ class _RowDetailCell extends StatelessWidget { children: [ SizedBox( width: 150, - child: FieldCellButton( - field: cellId.field, onTap: () => _showFieldEditor(context)), + child: Popover( + controller: popover, + targetAnchor: Alignment.topRight, + followerAnchor: Alignment.topLeft, + offset: const Offset(20, 0), + popupBuilder: (context) { + return OverlayContainer( + constraints: BoxConstraints.loose(const Size(240, 200)), + child: FieldEditor( + gridId: widget.cellId.gridId, + fieldName: widget.cellId.field.name, + typeOptionLoader: FieldTypeOptionLoader( + gridId: widget.cellId.gridId, + field: widget.cellId.field, + ), + ), + ); + }, + child: FieldCellButton( + field: widget.cellId.field, + onTap: () => popover.show(), + ), + ), ), const HSpace(10), Expanded(child: gesture), @@ -167,19 +196,6 @@ class _RowDetailCell extends StatelessWidget { ), ); } - - void _showFieldEditor(BuildContext context) { - FieldEditorPopOver.show( - context, - anchorContext: context, - gridId: cellId.gridId, - fieldName: cellId.field.name, - typeOptionLoader: FieldTypeOptionLoader( - gridId: cellId.gridId, - field: cellId.field, - ), - ); - } } GridCellStyle? _customCellStyle(AppTheme theme, FieldType fieldType) { 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 3cef420a53..6320855cca 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,13 +119,13 @@ class _GridPropertyCell extends StatelessWidget { hoverColor: theme.hover, leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor), onTap: () { - FieldEditorPopOver.show( - context, - anchorContext: context, - gridId: gridId, - fieldName: field.name, - typeOptionLoader: FieldTypeOptionLoader(gridId: gridId, field: field), - ); + // 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 6a773799cf..361486d00b 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 @@ -25,50 +25,6 @@ class FlowyPopover extends StatefulWidget { this.constraints, }) : super(key: key); - static show( - BuildContext context, { - required Widget Function(BuildContext context) builder, - BuildContext? anchorContext, - Offset? anchorPosition, - AnchorDirection? anchorDirection, - Size? anchorSize, - Offset? anchorOffset, - BoxConstraints? constraints, - }) { - 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: (BuildContext context) { - return FlowyPopover( - anchorRect: anchorRect, - anchorDirection: anchorDirection, - constraints: constraints, - builder: (BuildContext context) { - return builder(context); - }); - }); - } - @override State createState() => _FlowyPopoverState(); }