From 0630dc10b706abf049c4c5f3757d2bf962cbafad Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Fri, 17 Mar 2023 08:35:11 +0800 Subject: [PATCH] chore: popover offsets (#1960) --- .../presentation/toolbar/board_toolbar.dart | 1 + .../header/field_type_option_editor.dart | 2 +- .../widgets/header/type_option/date.dart | 4 +-- .../widgets/header/type_option/number.dart | 2 +- .../header/type_option/select_option.dart | 2 +- .../widgets/sort/sort_editor.dart | 2 +- .../widgets/toolbar/filter_button.dart | 33 +++++++++-------- .../widgets/toolbar/grid_property.dart | 2 +- .../widgets/toolbar/setting_button.dart | 35 ++++++++++--------- .../widgets/toolbar/sort_button.dart | 2 +- .../checklist_cell/checklist_cell_editor.dart | 2 +- .../row/cells/date_cell/date_editor.dart | 6 ++-- .../select_option_editor.dart | 2 +- .../widgets/row/cells/url_cell/url_cell.dart | 4 +-- .../presentation/share/share_button.dart | 1 + .../home/menu/app/header/add_button.dart | 1 + .../widgets/float_bubble/question_bubble.dart | 1 + .../presentation/widgets/pop_up_action.dart | 3 ++ 18 files changed, 59 insertions(+), 46 deletions(-) diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_toolbar.dart b/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_toolbar.dart index 57f12e218f..c75456ac1d 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_toolbar.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_toolbar.dart @@ -65,6 +65,7 @@ class _SettingButtonState extends State<_SettingButton> { return AppFlowyPopover( controller: popoverController, direction: PopoverDirection.leftWithTopAligned, + offset: const Offset(-8, 0), triggerActions: PopoverTriggerFlags.none, constraints: BoxConstraints.loose(const Size(260, 400)), margin: EdgeInsets.zero, diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart index 29e6203dc3..4974490642 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart @@ -87,7 +87,7 @@ class _SwitchFieldButton extends StatelessWidget { asBarrier: true, triggerActions: PopoverTriggerFlags.click, mutex: popoverMutex, - offset: const Offset(20, 0), + offset: const Offset(8, 0), popupBuilder: (popOverContext) { return FieldTypeList(onSelectField: (newFieldType) { context diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart index 8e29b785e7..a92ba48fd8 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart @@ -80,7 +80,7 @@ class DateTypeOptionWidget extends TypeOptionWidget { mutex: popoverMutex, asBarrier: true, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, - offset: const Offset(20, 0), + offset: const Offset(8, 0), constraints: BoxConstraints.loose(const Size(460, 440)), popupBuilder: (popoverContext) { return DateFormatList( @@ -107,7 +107,7 @@ class DateTypeOptionWidget extends TypeOptionWidget { mutex: popoverMutex, asBarrier: true, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, - offset: const Offset(20, 0), + offset: const Offset(8, 0), constraints: BoxConstraints.loose(const Size(460, 440)), popupBuilder: (BuildContext popoverContext) { return TimeFormatList( diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart index 92018009af..fd5824a0d1 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart @@ -77,7 +77,7 @@ class NumberTypeOptionWidget extends TypeOptionWidget { mutex: popoverMutex, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, - offset: const Offset(20, 0), + offset: const Offset(8, 0), constraints: BoxConstraints.loose(const Size(460, 440)), margin: EdgeInsets.zero, child: Padding( diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart index 27965ca186..e30f460c16 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart @@ -203,7 +203,7 @@ class _OptionCellState extends State<_OptionCell> { return AppFlowyPopover( controller: _popoverController, mutex: widget.popoverMutex, - offset: const Offset(20, 0), + offset: const Offset(8, 0), margin: EdgeInsets.zero, asBarrier: true, constraints: BoxConstraints.loose(const Size(460, 460)), diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart index 0bcaee5175..4bd72caa07 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart @@ -176,7 +176,7 @@ class _AddSortButtonState extends State<_AddSortButton> { mutex: widget.popoverMutex, direction: PopoverDirection.bottomWithLeftAligned, constraints: BoxConstraints.loose(const Size(200, 300)), - offset: const Offset(0, 10), + offset: const Offset(0, 8), triggerActions: PopoverTriggerFlags.none, asBarrier: true, child: SizedBox( diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/filter_button.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/filter_button.dart index 453e277b1d..38dfc83818 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/filter_button.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/filter_button.dart @@ -30,20 +30,23 @@ class _FilterButtonState extends State { return _wrapPopover( context, - FlowyTextButton( - LocaleKeys.grid_settings_filter.tr(), - fontColor: textColor, - fillColor: Colors.transparent, - hoverColor: AFThemeExtension.of(context).lightGreyHover, - padding: GridSize.typeOptionContentInsets, - onPressed: () { - final bloc = context.read(); - if (bloc.state.filters.isEmpty) { - _popoverController.show(); - } else { - bloc.add(const GridFilterMenuEvent.toggleMenu()); - } - }, + SizedBox( + height: 26, + child: FlowyTextButton( + LocaleKeys.grid_settings_filter.tr(), + fontColor: textColor, + fillColor: Colors.transparent, + hoverColor: AFThemeExtension.of(context).lightGreyHover, + padding: GridSize.typeOptionContentInsets, + onPressed: () { + final bloc = context.read(); + if (bloc.state.filters.isEmpty) { + _popoverController.show(); + } else { + bloc.add(const GridFilterMenuEvent.toggleMenu()); + } + }, + ), ), ); }, @@ -55,7 +58,7 @@ class _FilterButtonState extends State { controller: _popoverController, direction: PopoverDirection.bottomWithLeftAligned, constraints: BoxConstraints.loose(const Size(200, 300)), - offset: const Offset(0, 10), + offset: const Offset(0, 8), triggerActions: PopoverTriggerFlags.none, child: child, popupBuilder: (BuildContext context) { diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart index 59cd2cb99b..9b65628f4f 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart @@ -109,7 +109,7 @@ class _GridPropertyCellState extends State<_GridPropertyCell> { return AppFlowyPopover( mutex: widget.popoverMutex, controller: _popoverController, - offset: const Offset(20, 0), + offset: const Offset(8, 0), direction: PopoverDirection.leftWithTopAligned, constraints: BoxConstraints.loose(const Size(240, 400)), triggerActions: PopoverTriggerFlags.none, diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/setting_button.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/setting_button.dart index 62a9bea883..93baeed518 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/setting_button.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/setting_button.dart @@ -41,23 +41,26 @@ class _SettingButtonState extends State { ); }, builder: (context, settingContext) { - return AppFlowyPopover( - controller: _popoverController, - constraints: BoxConstraints.loose(const Size(260, 400)), - direction: PopoverDirection.bottomWithLeftAligned, - offset: const Offset(0, 10), - margin: EdgeInsets.zero, - triggerActions: PopoverTriggerFlags.none, - child: FlowyTextButton( - LocaleKeys.settings_title.tr(), - fillColor: Colors.transparent, - hoverColor: AFThemeExtension.of(context).lightGreyHover, - padding: GridSize.typeOptionContentInsets, - onPressed: () => _popoverController.show(), + return SizedBox( + height: 26, + child: AppFlowyPopover( + controller: _popoverController, + constraints: BoxConstraints.loose(const Size(260, 400)), + direction: PopoverDirection.bottomWithLeftAligned, + offset: const Offset(0, 8), + margin: EdgeInsets.zero, + triggerActions: PopoverTriggerFlags.none, + child: FlowyTextButton( + LocaleKeys.settings_title.tr(), + fillColor: Colors.transparent, + hoverColor: AFThemeExtension.of(context).lightGreyHover, + padding: GridSize.typeOptionContentInsets, + onPressed: () => _popoverController.show(), + ), + popupBuilder: (BuildContext context) { + return _GridSettingListPopover(settingContext: settingContext); + }, ), - popupBuilder: (BuildContext context) { - return _GridSettingListPopover(settingContext: settingContext); - }, ); }, ); diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart index 8469383cf1..7a38b73d08 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart @@ -58,7 +58,7 @@ class _SortButtonState extends State { controller: _popoverController, direction: PopoverDirection.bottomWithLeftAligned, constraints: BoxConstraints.loose(const Size(200, 300)), - offset: const Offset(0, 10), + offset: const Offset(0, 8), margin: const EdgeInsets.all(6), triggerActions: PopoverTriggerFlags.none, child: child, diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart index 9d30b122a3..3e5d744e1e 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart @@ -145,7 +145,7 @@ class _ChecklistOptionCellState extends State<_ChecklistOptionCell> { Widget _wrapPopover(Widget child) { return AppFlowyPopover( controller: _popoverController, - offset: const Offset(20, 0), + offset: const Offset(8, 0), asBarrier: true, constraints: BoxConstraints.loose(const Size(200, 300)), mutex: widget.popoverMutex, diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart index 5a49415d4c..0c0313c9fe 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart @@ -376,7 +376,7 @@ class _DateTypeOptionButton extends StatelessWidget { return AppFlowyPopover( mutex: popoverMutex, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, - offset: const Offset(20, 0), + offset: const Offset(8, 0), margin: EdgeInsets.zero, constraints: BoxConstraints.loose(const Size(140, 100)), child: Padding( @@ -431,7 +431,7 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { AppFlowyPopover( mutex: timeSettingPopoverMutex, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, - offset: const Offset(20, 0), + offset: const Offset(8, 0), popupBuilder: (BuildContext context) { return DateFormatList( selectedFormat: widget.dateTypeOptionPB.dateFormat, @@ -449,7 +449,7 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { AppFlowyPopover( mutex: timeSettingPopoverMutex, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, - offset: const Offset(20, 0), + offset: const Offset(8, 0), popupBuilder: (BuildContext context) { return TimeFormatList( selectedFormat: widget.dateTypeOptionPB.timeFormat, diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart index f65566320d..024e88405c 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart @@ -285,7 +285,7 @@ class _SelectOptionCellState extends State<_SelectOptionCell> { ); return AppFlowyPopover( controller: _popoverController, - offset: const Offset(20, 0), + offset: const Offset(8, 0), margin: EdgeInsets.zero, asBarrier: true, constraints: BoxConstraints.loose(const Size(200, 460)), diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart index b3c0553846..9ab086e356 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart @@ -127,7 +127,7 @@ class _GridURLCellState extends GridCellState { constraints: BoxConstraints.loose(const Size(300, 160)), direction: PopoverDirection.bottomWithLeftAligned, triggerActions: PopoverTriggerFlags.none, - offset: const Offset(0, 20), + offset: const Offset(0, 8), child: SizedBox.expand( child: GestureDetector( child: Align(alignment: Alignment.centerLeft, child: richText), @@ -210,7 +210,7 @@ class _EditURLAccessoryState extends State<_EditURLAccessory> constraints: BoxConstraints.loose(const Size(300, 160)), controller: _popoverController, direction: PopoverDirection.bottomWithLeftAligned, - offset: const Offset(0, 20), + offset: const Offset(0, 8), child: svgWidget( "editor/edit", color: Theme.of(context).colorScheme.onSurface, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart index 042b9e9492..84e9b179cb 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart @@ -82,6 +82,7 @@ class ShareActionList extends StatelessWidget { final docShareBloc = context.read(); return PopoverActionList( direction: PopoverDirection.bottomWithCenterAligned, + offset: const Offset(0, 8), actions: ShareAction.values .map((action) => ShareActionWrapper(action)) .toList(), diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart index 642cc063da..351012bc38 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart @@ -48,6 +48,7 @@ class AddButton extends StatelessWidget { return PopoverActionList( direction: PopoverDirection.bottomWithLeftAligned, actions: actions, + offset: const Offset(0, 8), buildChild: (controller) { return FlowyIconButton( width: 22, diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart index 6f91748661..bce35021ef 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart @@ -42,6 +42,7 @@ class BubbleActionList extends StatelessWidget { return PopoverActionList( direction: PopoverDirection.topWithRightAligned, actions: actions, + offset: const Offset(0, -8), buildChild: (controller) { return FlowyTextButton( '?', diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart index df38504c4b..a9172256ba 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart @@ -13,6 +13,7 @@ class PopoverActionList extends StatefulWidget { final Widget Function(PopoverController) buildChild; final VoidCallback? onClosed; final bool asBarrier; + final Offset offset; const PopoverActionList({ required this.actions, @@ -22,6 +23,7 @@ class PopoverActionList extends StatefulWidget { this.onClosed, this.direction = PopoverDirection.rightWithTopAligned, this.asBarrier = false, + this.offset = Offset.zero, this.constraints = const BoxConstraints( minWidth: 120, maxWidth: 460, @@ -54,6 +56,7 @@ class _PopoverActionListState constraints: widget.constraints, direction: widget.direction, mutex: widget.mutex, + offset: widget.offset, triggerActions: PopoverTriggerFlags.none, onClose: widget.onClosed, popupBuilder: (BuildContext popoverContext) {