From d1737d35fe135d4d383c0111281c0b772352512f Mon Sep 17 00:00:00 2001 From: appflowy Date: Mon, 19 Sep 2022 18:12:41 +0800 Subject: [PATCH 1/3] chore: add src folder --- .../card/board_select_option_cell.dart | 2 +- .../plugins/board/presentation/card/card.dart | 2 +- .../presentation/toolbar/board_setting.dart | 2 +- .../presentation/toolbar/board_toolbar.dart | 4 +- .../widgets/cell/date_cell/date_cell.dart | 2 +- .../widgets/cell/date_cell/date_editor.dart | 11 +- .../select_option_cell.dart | 2 +- .../select_option_editor.dart | 2 +- .../widgets/cell/url_cell/url_cell.dart | 4 +- .../widgets/header/field_cell.dart | 4 +- .../header/field_cell_action_sheet.dart | 2 +- .../widgets/header/field_editor.dart | 4 +- .../widgets/header/field_type_list.dart | 2 +- .../header/field_type_option_editor.dart | 5 +- .../widgets/header/grid_header.dart | 4 +- .../widgets/header/type_option/builder.dart | 2 +- .../widgets/header/type_option/date.dart | 8 +- .../header/type_option/multi_select.dart | 2 +- .../widgets/header/type_option/number.dart | 6 +- .../header/type_option/select_option.dart | 2 +- .../header/type_option/single_select.dart | 2 +- .../presentation/widgets/row/grid_row.dart | 2 +- .../presentation/widgets/row/row_detail.dart | 4 +- .../widgets/toolbar/grid_property.dart | 4 +- .../widgets/toolbar/grid_toolbar.dart | 4 +- .../example/lib/example_button.dart | 12 +- .../appflowy_popover/example/lib/main.dart | 2 +- .../lib/appflowy_popover.dart | 5 + .../lib/{ => src}/follower.dart | 0 .../lib/{ => src}/layout.dart | 0 .../appflowy_popover/lib/src/mask.dart | 54 ++++++ .../appflowy_popover/lib/src/mutex.dart | 44 +++++ .../lib/{ => src}/popover.dart | 165 ++++-------------- .../flowy_overlay/appflowy_stype_popover.dart | 2 +- 34 files changed, 188 insertions(+), 184 deletions(-) create mode 100644 frontend/app_flowy/packages/appflowy_popover/lib/appflowy_popover.dart rename frontend/app_flowy/packages/appflowy_popover/lib/{ => src}/follower.dart (100%) rename frontend/app_flowy/packages/appflowy_popover/lib/{ => src}/layout.dart (100%) create mode 100644 frontend/app_flowy/packages/appflowy_popover/lib/src/mask.dart create mode 100644 frontend/app_flowy/packages/appflowy_popover/lib/src/mutex.dart rename frontend/app_flowy/packages/appflowy_popover/lib/{ => src}/popover.dart (60%) diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/board_select_option_cell.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/board_select_option_cell.dart index 01fc64a494..65a16a1732 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/card/board_select_option_cell.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/card/board_select_option_cell.dart @@ -2,7 +2,7 @@ import 'package:app_flowy/plugins/board/application/card/board_select_option_cel import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart'; import 'package:app_flowy/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart'; import 'package:app_flowy/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart index ab5a5efbbe..3430cacec6 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart @@ -1,7 +1,7 @@ import 'package:app_flowy/plugins/board/application/card/card_bloc.dart'; import 'package:app_flowy/plugins/board/application/card/card_data_controller.dart'; import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_action_sheet.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; diff --git a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart index dad2b042d5..b45db13cf2 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart @@ -4,7 +4,7 @@ import 'package:app_flowy/plugins/grid/application/field/field_controller.dart'; import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart'; import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_group.dart'; import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_property.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; diff --git a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart index 3c6b3fa818..726abdcc6d 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart @@ -1,5 +1,5 @@ import 'package:app_flowy/plugins/grid/application/field/field_controller.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -65,7 +65,7 @@ class _SettingButtonState extends State<_SettingButton> { return AppFlowyPopover( controller: popoverController, constraints: BoxConstraints.loose(const Size(260, 400)), - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, child: FlowyIconButton( hoverColor: theme.hover, width: 22, diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart index 1120294430..e1b9dbcbd8 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart @@ -4,7 +4,7 @@ import 'package:flutter/widgets.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/plugins/grid/application/prelude.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import '../cell_builder.dart'; import 'date_editor.dart'; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart index cc502f9cf9..3385c83560 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart @@ -1,7 +1,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:app_flowy/plugins/grid/application/cell/date_cal_bloc.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; @@ -300,8 +300,7 @@ class _DateTypeOptionButton extends StatelessWidget { selector: (state) => state.dateTypeOptionPB, builder: (context, dateTypeOptionPB) { return AppFlowyPopover( - triggerActions: - PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), constraints: BoxConstraints.loose(const Size(140, 100)), child: FlowyButton( @@ -342,8 +341,7 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { List children = [ Popover( mutex: _popoverMutex, - triggerActions: - PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), popupBuilder: (BuildContext context) { return OverlayContainer( @@ -359,8 +357,7 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { ), Popover( mutex: _popoverMutex, - triggerActions: - PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), popupBuilder: (BuildContext context) { return OverlayContainer( diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart index fe98b847ed..6ed04c8b04 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart @@ -1,6 +1,6 @@ import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/plugins/grid/application/prelude.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart index a1fec9dc2c..6648008957 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart @@ -1,7 +1,7 @@ import 'dart:collection'; import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart'; import 'package:app_flowy/plugins/grid/application/cell/select_option_editor_bloc.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart index ea7d38d15c..f20ffb5681 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart @@ -2,7 +2,7 @@ import 'dart:async'; import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:app_flowy/plugins/grid/application/cell/url_cell_bloc.dart'; import 'package:app_flowy/workspace/presentation/home/toast.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; @@ -220,7 +220,7 @@ class _EditURLAccessoryState extends State<_EditURLAccessory> constraints: BoxConstraints.loose(const Size(300, 160)), controller: _popoverController, direction: PopoverDirection.bottomWithLeftAligned, - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, offset: const Offset(0, 20), child: svgWidget("editor/edit", color: theme.iconColor), popupBuilder: (BuildContext popoverContext) { 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 a5b54021cf..eec63e1be0 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 @@ -1,6 +1,6 @@ import 'package:app_flowy/plugins/grid/application/field/field_cell_bloc.dart'; import 'package:app_flowy/plugins/grid/application/field/field_service.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -33,7 +33,7 @@ class GridFieldCell extends StatelessWidget { final button = AppFlowyPopover( constraints: BoxConstraints.loose(const Size(240, 840)), direction: PopoverDirection.bottomWithLeftAligned, - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, offset: const Offset(0, 10), popupBuilder: (BuildContext context) { return GridFieldCellActionSheet( diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell_action_sheet.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell_action_sheet.dart index 6f3e583e35..398a2206ae 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell_action_sheet.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell_action_sheet.dart @@ -3,7 +3,7 @@ import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_editor. import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/plugins/grid/application/prelude.dart'; import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/style_widget/button.dart'; 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 2008530dea..c7837accc9 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,6 +1,6 @@ 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/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart'; import 'package:flowy_infra/theme.dart'; @@ -244,7 +244,7 @@ class _DeleteFieldButton extends StatelessWidget { Widget _wrapPopover(Widget widget) { return AppFlowyPopover( - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, constraints: BoxConstraints.loose(const Size(400, 240)), mutex: popoverMutex, direction: PopoverDirection.center, diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_list.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_list.dart index 2c6f262180..e504c0ab4f 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_list.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_list.dart @@ -1,4 +1,4 @@ -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; 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 e2dce9f6ea..fc403fc20b 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 @@ -1,6 +1,6 @@ import 'dart:typed_data'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_data_controller.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:dartz/dartz.dart' show Either; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; @@ -66,8 +66,7 @@ class FieldTypeOptionEditor extends StatelessWidget { height: GridSize.typeOptionItemHeight, child: AppFlowyPopover( constraints: BoxConstraints.loose(const Size(460, 440)), - triggerActions: - PopoverTriggerActionFlags.click | PopoverTriggerActionFlags.hover, + triggerActions: PopoverTriggerFlags.click | PopoverTriggerFlags.hover, mutex: popoverMutex, offset: const Offset(20, 0), popupBuilder: (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 d4774dfd47..7e9138c88d 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 @@ -4,7 +4,7 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/type_option import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/plugins/grid/application/prelude.dart'; import 'package:easy_localization/easy_localization.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -177,7 +177,7 @@ class CreateFieldButton extends StatelessWidget { final theme = context.watch(); return AppFlowyPopover( - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, direction: PopoverDirection.bottomWithRightAligned, constraints: BoxConstraints.loose(const Size(240, 200)), child: FlowyButton( diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/builder.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/builder.dart index e00eda5ec0..e6d47a06c0 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/builder.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/builder.dart @@ -3,7 +3,7 @@ import 'dart:typed_data'; import 'package:app_flowy/plugins/grid/application/field/field_controller.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_data_controller.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_sdk/protobuf/flowy-grid/checkbox_type_option.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-grid/multi_select_type_option.pb.dart'; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart index a4ab3b55c0..d95406dcb2 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart @@ -11,7 +11,7 @@ import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option_entities.pb.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import '../../../layout/sizes.dart'; import '../field_type_option_editor.dart'; import 'builder.dart'; @@ -64,8 +64,7 @@ class DateTypeOptionWidget extends TypeOptionWidget { Widget _renderDateFormatButton(BuildContext context, DateFormat dataFormat) { return AppFlowyPopover( mutex: popoverMutex, - triggerActions: - PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), constraints: BoxConstraints.loose(const Size(460, 440)), popupBuilder: (popoverContext) { @@ -86,8 +85,7 @@ class DateTypeOptionWidget extends TypeOptionWidget { Widget _renderTimeFormatButton(BuildContext context, TimeFormat timeFormat) { return AppFlowyPopover( mutex: popoverMutex, - triggerActions: - PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), constraints: BoxConstraints.loose(const Size(460, 440)), popupBuilder: (BuildContext popoverContext) { diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart index 2dc804111d..a3982e6331 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart @@ -1,7 +1,7 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/multi_select_type_option.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; import 'package:flutter/material.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import '../field_type_option_editor.dart'; import 'builder.dart'; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart index f8c6fac88b..bf82aecabc 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart @@ -1,7 +1,7 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/number_bloc.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/number_format_bloc.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -57,8 +57,8 @@ class NumberTypeOptionWidget extends TypeOptionWidget { builder: (context, state) { return AppFlowyPopover( mutex: popoverMutex, - triggerActions: PopoverTriggerActionFlags.hover | - PopoverTriggerActionFlags.click, + triggerActions: + PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), constraints: BoxConstraints.loose(const Size(460, 440)), child: FlowyButton( diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart index 90e4e22df1..eb98495d2b 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart @@ -1,5 +1,5 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/select_option_type_option_bloc.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart index 477e573ff2..37431128ea 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart @@ -2,7 +2,7 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/single_sele import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; import 'package:flutter/material.dart'; import '../field_type_option_editor.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'builder.dart'; import 'select_option.dart'; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/grid_row.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/grid_row.dart index b43a3a50ef..6ef6946df5 100755 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/grid_row.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/grid_row.dart @@ -1,7 +1,7 @@ import 'package:app_flowy/plugins/grid/application/prelude.dart'; import 'package:app_flowy/plugins/grid/application/row/row_cache.dart'; import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; 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 432b9a5de4..69b561f625 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 @@ -15,7 +15,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 'package:appflowy_popover/appflowy_popover.dart'; import '../../layout/sizes.dart'; import '../cell/cell_accessory.dart'; @@ -197,7 +197,7 @@ class _CreateFieldButtonState extends State<_CreateFieldButton> { return AppFlowyPopover( constraints: BoxConstraints.loose(const Size(240, 200)), controller: popoverController, - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, direction: PopoverDirection.topWithLeftAligned, onClose: widget.onClosed, child: Container( 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 0399670504..1f44a4fb88 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 @@ -3,7 +3,7 @@ import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_editor. import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/plugins/grid/application/setting/property_bloc.dart'; import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_type_extension.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -118,7 +118,7 @@ class _GridPropertyCell extends StatelessWidget { Widget _editFieldButton(AppTheme theme, BuildContext context) { return AppFlowyPopover( mutex: popoverMutex, - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, offset: const Offset(20, 0), constraints: BoxConstraints.loose(const Size(240, 200)), child: FlowyButton( diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart index ba8f22fe31..39c5240db7 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart @@ -1,4 +1,4 @@ -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:app_flowy/plugins/grid/application/setting/setting_bloc.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; @@ -55,7 +55,7 @@ class _SettingButton extends StatelessWidget { final theme = context.watch(); return AppFlowyPopover( constraints: BoxConstraints.loose(const Size(260, 400)), - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, offset: const Offset(0, 10), child: FlowyIconButton( width: 22, diff --git a/frontend/app_flowy/packages/appflowy_popover/example/lib/example_button.dart b/frontend/app_flowy/packages/appflowy_popover/example/lib/example_button.dart index 357941dc7f..74f1645bd0 100644 --- a/frontend/app_flowy/packages/appflowy_popover/example/lib/example_button.dart +++ b/frontend/app_flowy/packages/appflowy_popover/example/lib/example_button.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; class PopoverMenu extends StatefulWidget { const PopoverMenu({Key? key}) : super(key: key); @@ -41,8 +41,8 @@ class _PopoverMenuState extends State { decoration: null)), ), Popover( - triggerActions: PopoverTriggerActionFlags.hover | - PopoverTriggerActionFlags.click, + triggerActions: + PopoverTriggerFlags.hover | PopoverTriggerFlags.click, mutex: popOverMutex, offset: const Offset(10, 0), popupBuilder: (BuildContext context) { @@ -54,8 +54,8 @@ class _PopoverMenuState extends State { ), ), Popover( - triggerActions: PopoverTriggerActionFlags.hover | - PopoverTriggerActionFlags.click, + triggerActions: + PopoverTriggerFlags.hover | PopoverTriggerFlags.click, mutex: popOverMutex, offset: const Offset(10, 0), popupBuilder: (BuildContext context) { @@ -86,7 +86,7 @@ class ExampleButton extends StatelessWidget { @override Widget build(BuildContext context) { return Popover( - triggerActions: PopoverTriggerActionFlags.click, + triggerActions: PopoverTriggerFlags.click, offset: offset, direction: direction ?? PopoverDirection.rightWithTopAligned, child: TextButton(child: Text(label), onPressed: () {}), diff --git a/frontend/app_flowy/packages/appflowy_popover/example/lib/main.dart b/frontend/app_flowy/packages/appflowy_popover/example/lib/main.dart index 178b075ee6..a6b09bb4d3 100644 --- a/frontend/app_flowy/packages/appflowy_popover/example/lib/main.dart +++ b/frontend/app_flowy/packages/appflowy_popover/example/lib/main.dart @@ -1,4 +1,4 @@ -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flutter/material.dart'; import "./example_button.dart"; diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/appflowy_popover.dart b/frontend/app_flowy/packages/appflowy_popover/lib/appflowy_popover.dart new file mode 100644 index 0000000000..925b9cad02 --- /dev/null +++ b/frontend/app_flowy/packages/appflowy_popover/lib/appflowy_popover.dart @@ -0,0 +1,5 @@ +/// AppFlowyBoard library +library appflowy_popover; + +export 'src/mutex.dart'; +export 'src/popover.dart'; diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/follower.dart b/frontend/app_flowy/packages/appflowy_popover/lib/src/follower.dart similarity index 100% rename from frontend/app_flowy/packages/appflowy_popover/lib/follower.dart rename to frontend/app_flowy/packages/appflowy_popover/lib/src/follower.dart diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/layout.dart b/frontend/app_flowy/packages/appflowy_popover/lib/src/layout.dart similarity index 100% rename from frontend/app_flowy/packages/appflowy_popover/lib/layout.dart rename to frontend/app_flowy/packages/appflowy_popover/lib/src/layout.dart diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/src/mask.dart b/frontend/app_flowy/packages/appflowy_popover/lib/src/mask.dart new file mode 100644 index 0000000000..8ced8a0739 --- /dev/null +++ b/frontend/app_flowy/packages/appflowy_popover/lib/src/mask.dart @@ -0,0 +1,54 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; + +class _PopoverMask extends StatefulWidget { + final void Function() onTap; + final void Function()? onExit; + final Decoration? decoration; + + const _PopoverMask( + {Key? key, + required this.onTap, + this.onExit, + this.decoration = + const BoxDecoration(color: Color.fromARGB(0, 244, 67, 54))}) + : super(key: key); + + @override + State createState() => _PopoverMaskState(); +} + +class _PopoverMaskState extends State<_PopoverMask> { + @override + void initState() { + HardwareKeyboard.instance.addHandler(_handleGlobalKeyEvent); + super.initState(); + } + + bool _handleGlobalKeyEvent(KeyEvent event) { + if (event.logicalKey == LogicalKeyboardKey.escape) { + if (widget.onExit != null) { + widget.onExit!(); + } + + return true; + } + return false; + } + + @override + void deactivate() { + HardwareKeyboard.instance.removeHandler(_handleGlobalKeyEvent); + super.deactivate(); + } + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: widget.onTap, + child: Container( + decoration: widget.decoration, + ), + ); + } +} diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/src/mutex.dart b/frontend/app_flowy/packages/appflowy_popover/lib/src/mutex.dart new file mode 100644 index 0000000000..2c6db3100a --- /dev/null +++ b/frontend/app_flowy/packages/appflowy_popover/lib/src/mutex.dart @@ -0,0 +1,44 @@ +import 'package:flutter/material.dart'; + +import 'popover.dart'; + +/// If multiple popovers are exclusive, +/// pass the same mutex to them. +class PopoverMutex { + final ValueNotifier _stateNotifier = ValueNotifier(null); + PopoverMutex(); + + void removePopoverStateListener(VoidCallback listener) { + _stateNotifier.removeListener(listener); + } + + VoidCallback listenOnPopoverStateChanged(VoidCallback callback) { + listenerCallback() { + callback(); + } + + _stateNotifier.addListener(listenerCallback); + return listenerCallback; + } + + void close() { + _stateNotifier.value?.close(); + } + + PopoverState? get state => _stateNotifier.value; + + set state(PopoverState? newState) { + if (_stateNotifier.value != null && _stateNotifier.value != newState) { + _stateNotifier.value?.close(); + } + _stateNotifier.value = newState; + } + + void removeState() { + _stateNotifier.value = null; + } + + void dispose() { + _stateNotifier.dispose(); + } +} diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/popover.dart b/frontend/app_flowy/packages/appflowy_popover/lib/src/popover.dart similarity index 60% rename from frontend/app_flowy/packages/appflowy_popover/lib/popover.dart rename to frontend/app_flowy/packages/appflowy_popover/lib/src/popover.dart index c10e23ecce..3277d29890 100644 --- a/frontend/app_flowy/packages/appflowy_popover/lib/popover.dart +++ b/frontend/app_flowy/packages/appflowy_popover/lib/src/popover.dart @@ -1,62 +1,23 @@ -import 'package:appflowy_popover/layout.dart'; +import 'package:appflowy_popover/src/layout.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; -/// If multiple popovers are exclusive, -/// pass the same mutex to them. -class PopoverMutex { - final ValueNotifier _stateNotifier = ValueNotifier(null); - PopoverMutex(); - - void removePopoverStateListener(VoidCallback listener) { - _stateNotifier.removeListener(listener); - } - - VoidCallback listenOnPopoverStateChanged(VoidCallback callback) { - listenerCallback() { - callback(); - } - - _stateNotifier.addListener(listenerCallback); - return listenerCallback; - } - - void close() { - _stateNotifier.value?.close(); - } - - PopoverState? get state => _stateNotifier.value; - - set state(PopoverState? newState) { - if (_stateNotifier.value != null && _stateNotifier.value != newState) { - _stateNotifier.value?.close(); - } - _stateNotifier.value = newState; - } - - void _removeState() { - _stateNotifier.value = null; - } - - void dispose() { - _stateNotifier.dispose(); - } -} +import 'mask.dart'; +import 'mutex.dart'; class PopoverController { - PopoverState? state; + PopoverState? _state; close() { - state?.close(); + _state?.close(); } show() { - state?.showOverlay(); + _state?.showOverlay(); } } -class PopoverTriggerActionFlags { +class PopoverTriggerFlags { static int click = 0x01; static int hover = 0x02; } @@ -136,11 +97,11 @@ class PopoverState extends State { @override void initState() { - widget.controller?.state = this; + widget.controller?._state = this; super.initState(); } - showOverlay() { + void showOverlay() { close(); if (widget.mutex != null) { @@ -150,14 +111,14 @@ class PopoverState extends State { if (_popoverWithMask == null) { _popoverWithMask = this; } else { - hasMask = false; + // hasMask = false; } final newEntry = OverlayEntry(builder: (context) { final children = []; if (hasMask) { - children.add(_PopoverMask( + children.add(PopoverMask( decoration: widget.maskDecoration, onTap: () => close(), onExit: () => close(), @@ -178,27 +139,29 @@ class PopoverState extends State { _overlayEntry = newEntry; + final OverlayState s = Overlay.of(context)!; + Overlay.of(context)?.insert(newEntry); } - close() { + void close() { if (_overlayEntry != null) { _overlayEntry!.remove(); _overlayEntry = null; + if (_popoverWithMask == this) { _popoverWithMask = null; } - if (widget.onClose != null) { - widget.onClose!(); - } + + widget.onClose?.call(); } if (widget.mutex?.state == this) { - widget.mutex?._removeState(); + widget.mutex?.removeState(); } } - closeAll() { + void closeAll() { _popoverWithMask?.close(); } @@ -208,88 +171,32 @@ class PopoverState extends State { super.deactivate(); } - _handleTargetPointerDown(PointerDownEvent event) { - if (widget.triggerActions & PopoverTriggerActionFlags.click != 0) { - showOverlay(); - } + @override + Widget build(BuildContext context) { + return PopoverTarget( + link: popoverLink, + child: _buildChild(context), + ); } - _handleTargetPointerEnter(PointerEnterEvent event) { - if (widget.triggerActions & PopoverTriggerActionFlags.hover != 0) { - showOverlay(); - } - } - - _buildContent(BuildContext context) { + Widget _buildChild(BuildContext context) { if (widget.triggerActions == 0) { return widget.child; } return MouseRegion( - onEnter: _handleTargetPointerEnter, + onEnter: (PointerEnterEvent event) { + if (widget.triggerActions & PopoverTriggerFlags.hover != 0) { + showOverlay(); + } + }, child: Listener( - onPointerDown: _handleTargetPointerDown, child: widget.child, - ), - ); - } - - @override - Widget build(BuildContext context) { - return PopoverTarget( - link: popoverLink, - child: _buildContent(context), - ); - } -} - -class _PopoverMask extends StatefulWidget { - final void Function() onTap; - final void Function()? onExit; - final Decoration? decoration; - - const _PopoverMask( - {Key? key, required this.onTap, this.onExit, this.decoration}) - : super(key: key); - - @override - State createState() => _PopoverMaskState(); -} - -class _PopoverMaskState extends State<_PopoverMask> { - @override - void initState() { - HardwareKeyboard.instance.addHandler(_handleGlobalKeyEvent); - super.initState(); - } - - bool _handleGlobalKeyEvent(KeyEvent event) { - if (event.logicalKey == LogicalKeyboardKey.escape) { - if (widget.onExit != null) { - widget.onExit!(); - } - - return true; - } - return false; - } - - @override - void deactivate() { - HardwareKeyboard.instance.removeHandler(_handleGlobalKeyEvent); - super.deactivate(); - } - - @override - Widget build(BuildContext context) { - return GestureDetector( - onTap: widget.onTap, - child: Container( - // decoration: widget.decoration, - decoration: widget.decoration ?? - const BoxDecoration( - color: Color.fromARGB(0, 244, 67, 54), - ), + onPointerDown: (PointerDownEvent event) { + if (widget.triggerActions & PopoverTriggerFlags.click != 0) { + showOverlay(); + } + }, ), ); } diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart index 3ef06389cc..6c92271e88 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart @@ -1,5 +1,5 @@ import 'package:flowy_infra_ui/flowy_infra_ui_web.dart'; -import 'package:appflowy_popover/popover.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flutter/material.dart'; class AppFlowyPopover extends StatelessWidget { From 723b34a736f21e445266efa09b57c0a7e3f71e92 Mon Sep 17 00:00:00 2001 From: appflowy Date: Tue, 20 Sep 2022 10:53:47 +0800 Subject: [PATCH 2/3] feat: enable remove one layer when click the empty space --- .../widgets/cell/date_cell/date_editor.dart | 2 + .../appflowy_popover/lib/src/mask.dart | 82 ++++++++++++++-- .../appflowy_popover/lib/src/popover.dart | 96 +++++++++---------- 3 files changed, 120 insertions(+), 60 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart index 3385c83560..e1c9a3618c 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart @@ -341,6 +341,7 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { List children = [ Popover( mutex: _popoverMutex, + asBarrier: true, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), popupBuilder: (BuildContext context) { @@ -357,6 +358,7 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { ), Popover( mutex: _popoverMutex, + asBarrier: true, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), popupBuilder: (BuildContext context) { diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/src/mask.dart b/frontend/app_flowy/packages/appflowy_popover/lib/src/mask.dart index 8ced8a0739..815321774f 100644 --- a/frontend/app_flowy/packages/appflowy_popover/lib/src/mask.dart +++ b/frontend/app_flowy/packages/appflowy_popover/lib/src/mask.dart @@ -1,24 +1,86 @@ +import 'dart:collection'; + +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -class _PopoverMask extends StatefulWidget { +typedef EntryMap = LinkedHashMap; + +class RootOverlayEntry { + final EntryMap _entries = EntryMap(); + RootOverlayEntry(); + + void addEntry( + BuildContext context, + PopoverState newState, + OverlayEntry entry, + bool asBarrier, + ) { + _entries[newState] = OverlayEntryContext(entry, newState, asBarrier); + Overlay.of(context)?.insert(entry); + } + + bool contains(PopoverState oldState) { + return _entries.containsKey(oldState); + } + + void removeEntry(PopoverState oldState) { + if (_entries.isEmpty) return; + + final removedEntry = _entries.remove(oldState); + removedEntry?.overlayEntry.remove(); + } + + bool get isEmpty => _entries.isEmpty; + + bool get isNotEmpty => _entries.isNotEmpty; + + bool hasEntry() { + return _entries.isNotEmpty; + } + + PopoverState? popEntry() { + if (_entries.isEmpty) return null; + + final lastEntry = _entries.values.last; + _entries.remove(lastEntry.popoverState); + lastEntry.overlayEntry.remove(); + lastEntry.popoverState.widget.onClose?.call(); + + if (lastEntry.asBarrier) { + return lastEntry.popoverState; + } else { + return popEntry(); + } + } +} + +class OverlayEntryContext { + final bool asBarrier; + final PopoverState popoverState; + final OverlayEntry overlayEntry; + + OverlayEntryContext( + this.overlayEntry, + this.popoverState, + this.asBarrier, + ); +} + +class PopoverMask extends StatefulWidget { final void Function() onTap; final void Function()? onExit; final Decoration? decoration; - const _PopoverMask( - {Key? key, - required this.onTap, - this.onExit, - this.decoration = - const BoxDecoration(color: Color.fromARGB(0, 244, 67, 54))}) + const PopoverMask( + {Key? key, required this.onTap, this.onExit, this.decoration}) : super(key: key); @override State createState() => _PopoverMaskState(); } -class _PopoverMaskState extends State<_PopoverMask> { +class _PopoverMaskState extends State { @override void initState() { HardwareKeyboard.instance.addHandler(_handleGlobalKeyEvent); @@ -30,10 +92,10 @@ class _PopoverMaskState extends State<_PopoverMask> { if (widget.onExit != null) { widget.onExit!(); } - return true; + } else { + return false; } - return false; } @override diff --git a/frontend/app_flowy/packages/appflowy_popover/lib/src/popover.dart b/frontend/app_flowy/packages/appflowy_popover/lib/src/popover.dart index 3277d29890..e1e9481816 100644 --- a/frontend/app_flowy/packages/appflowy_popover/lib/src/popover.dart +++ b/frontend/app_flowy/packages/appflowy_popover/lib/src/popover.dart @@ -1,7 +1,6 @@ +import 'dart:async'; import 'package:appflowy_popover/src/layout.dart'; -import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; - import 'mask.dart'; import 'mutex.dart'; @@ -68,6 +67,8 @@ class Popover extends StatefulWidget { final void Function()? onClose; + final bool asBarrier; + /// The content area of the popover. final Widget child; @@ -77,11 +78,14 @@ class Popover extends StatefulWidget { required this.popupBuilder, this.controller, this.offset, - this.maskDecoration, + this.maskDecoration = const BoxDecoration( + color: Color.fromARGB(0, 244, 67, 54), + ), this.triggerActions = 0, this.direction = PopoverDirection.rightWithTopAligned, this.mutex, this.onClose, + this.asBarrier = false, }) : super(key: key); @override @@ -89,11 +93,9 @@ class Popover extends StatefulWidget { } class PopoverState extends State { + static final RootOverlayEntry _rootEntry = RootOverlayEntry(); final PopoverLink popoverLink = PopoverLink(); - OverlayEntry? _overlayEntry; - bool hasMask = true; - - static PopoverState? _popoverWithMask; + Timer? _debounceEnterRegionAction; @override void initState() { @@ -107,64 +109,51 @@ class PopoverState extends State { if (widget.mutex != null) { widget.mutex?.state = this; } - - if (_popoverWithMask == null) { - _popoverWithMask = this; - } else { - // hasMask = false; - } - + final shouldAddMask = _rootEntry.isEmpty; final newEntry = OverlayEntry(builder: (context) { final children = []; - - if (hasMask) { - children.add(PopoverMask( - decoration: widget.maskDecoration, - onTap: () => close(), - onExit: () => close(), - )); + if (shouldAddMask) { + children.add( + PopoverMask( + decoration: widget.maskDecoration, + onTap: () => _removeRootOverlay(), + onExit: () => _removeRootOverlay(), + ), + ); } - children.add(PopoverContainer( - direction: widget.direction, - popoverLink: popoverLink, - offset: widget.offset ?? Offset.zero, - popupBuilder: widget.popupBuilder, - onClose: () => close(), - onCloseAll: () => closeAll(), - )); + children.add( + PopoverContainer( + direction: widget.direction, + popoverLink: popoverLink, + offset: widget.offset ?? Offset.zero, + popupBuilder: widget.popupBuilder, + onClose: () => close(), + onCloseAll: () => _removeRootOverlay(), + ), + ); return Stack(children: children); }); - _overlayEntry = newEntry; - - final OverlayState s = Overlay.of(context)!; - - Overlay.of(context)?.insert(newEntry); + _rootEntry.addEntry(context, this, newEntry, widget.asBarrier); } void close() { - if (_overlayEntry != null) { - _overlayEntry!.remove(); - _overlayEntry = null; - - if (_popoverWithMask == this) { - _popoverWithMask = null; - } - + if (_rootEntry.contains(this)) { + _rootEntry.removeEntry(this); widget.onClose?.call(); } + } + + void _removeRootOverlay() { + _rootEntry.popEntry(); if (widget.mutex?.state == this) { widget.mutex?.removeState(); } } - void closeAll() { - _popoverWithMask?.close(); - } - @override void deactivate() { close(); @@ -185,10 +174,17 @@ class PopoverState extends State { } return MouseRegion( - onEnter: (PointerEnterEvent event) { - if (widget.triggerActions & PopoverTriggerFlags.hover != 0) { - showOverlay(); - } + onEnter: (event) { + _debounceEnterRegionAction = + Timer(const Duration(milliseconds: 200), () { + if (widget.triggerActions & PopoverTriggerFlags.hover != 0) { + showOverlay(); + } + }); + }, + onExit: (event) { + _debounceEnterRegionAction?.cancel(); + _debounceEnterRegionAction = null; }, child: Listener( child: widget.child, From d35727b93c9bbaaedc0176738838e8e05c68f2dd Mon Sep 17 00:00:00 2001 From: appflowy Date: Tue, 20 Sep 2022 11:09:25 +0800 Subject: [PATCH 3/3] chore: make some overlay as barrier --- .../widgets/cell/date_cell/date_editor.dart | 26 +++++++------------ .../select_option_editor.dart | 1 + .../header/field_type_option_editor.dart | 1 + .../widgets/header/grid_header.dart | 3 ++- .../header/type_option/select_option.dart | 1 + .../presentation/widgets/row/row_detail.dart | 2 +- .../flowy_overlay/appflowy_stype_popover.dart | 3 +++ 7 files changed, 19 insertions(+), 18 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart index e1c9a3618c..35eb78e38d 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart @@ -339,36 +339,30 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { @override Widget build(BuildContext context) { List children = [ - Popover( + AppFlowyPopover( mutex: _popoverMutex, asBarrier: true, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), popupBuilder: (BuildContext context) { - return OverlayContainer( - constraints: BoxConstraints.loose(const Size(460, 440)), - child: DateFormatList( - selectedFormat: widget.dateTypeOptionPB.dateFormat, - onSelected: (format) => - widget.onEvent(DateCalEvent.setDateFormat(format)), - ), + return DateFormatList( + selectedFormat: widget.dateTypeOptionPB.dateFormat, + onSelected: (format) => + widget.onEvent(DateCalEvent.setDateFormat(format)), ); }, child: const DateFormatButton(), ), - Popover( + AppFlowyPopover( mutex: _popoverMutex, asBarrier: true, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), popupBuilder: (BuildContext context) { - return OverlayContainer( - constraints: BoxConstraints.loose(const Size(460, 440)), - child: TimeFormatList( - selectedFormat: widget.dateTypeOptionPB.timeFormat, - onSelected: (format) => - widget.onEvent(DateCalEvent.setTimeFormat(format)), - ), + return TimeFormatList( + selectedFormat: widget.dateTypeOptionPB.timeFormat, + onSelected: (format) => + widget.onEvent(DateCalEvent.setTimeFormat(format)), ); }, child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat), diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart index 6648008957..9a0252e009 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart @@ -243,6 +243,7 @@ class _SelectOptionCellState extends State<_SelectOptionCell> { return AppFlowyPopover( controller: _popoverController, offset: const Offset(20, 0), + asBarrier: true, constraints: BoxConstraints.loose(const Size(200, 300)), mutex: widget.popoverMutex, child: SizedBox( 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 fc403fc20b..047dd43ea1 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 @@ -66,6 +66,7 @@ class FieldTypeOptionEditor extends StatelessWidget { height: GridSize.typeOptionItemHeight, child: AppFlowyPopover( constraints: BoxConstraints.loose(const Size(460, 440)), + asBarrier: true, triggerActions: PopoverTriggerFlags.click | PopoverTriggerFlags.hover, mutex: popoverMutex, offset: const Offset(20, 0), 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 7e9138c88d..c600f89688 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 @@ -179,7 +179,8 @@ class CreateFieldButton extends StatelessWidget { return AppFlowyPopover( triggerActions: PopoverTriggerFlags.click, direction: PopoverDirection.bottomWithRightAligned, - constraints: BoxConstraints.loose(const Size(240, 200)), + asBarrier: true, + constraints: BoxConstraints.loose(const Size(240, 600)), child: FlowyButton( text: FlowyText.medium( LocaleKeys.grid_field_newColumn.tr(), diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart index eb98495d2b..06a9cd84b6 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart @@ -184,6 +184,7 @@ class _OptionCellState extends State<_OptionCell> { controller: _popoverController, mutex: widget.popoverMutex, offset: const Offset(20, 0), + asBarrier: true, constraints: BoxConstraints.loose(const Size(460, 440)), child: SizedBox( height: GridSize.typeOptionItemHeight, 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 69b561f625..a68ac63984 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 @@ -274,7 +274,7 @@ class _RowDetailCellState extends State<_RowDetailCell> { offset: const Offset(20, 0), popupBuilder: (popoverContext) { return OverlayContainer( - constraints: BoxConstraints.loose(const Size(240, 200)), + constraints: BoxConstraints.loose(const Size(240, 600)), child: FieldEditor( gridId: widget.cellId.gridId, fieldName: widget.cellId.fieldContext.field.name, diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart index 6c92271e88..fb13ce2df5 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart @@ -12,6 +12,7 @@ class AppFlowyPopover extends StatelessWidget { final void Function()? onClose; final PopoverMutex? mutex; final Offset? offset; + final bool asBarrier; const AppFlowyPopover({ Key? key, @@ -24,6 +25,7 @@ class AppFlowyPopover extends StatelessWidget { this.triggerActions = 0, this.offset, this.controller, + this.asBarrier = false, }) : super(key: key); @override @@ -33,6 +35,7 @@ class AppFlowyPopover extends StatelessWidget { onClose: onClose, direction: direction, mutex: mutex, + asBarrier: asBarrier, triggerActions: triggerActions, popupBuilder: (context) { final child = popupBuilder(context);