chore: popover offsets (#1960)

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,

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

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(

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(

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)),

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(

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/filter_button.dart

@@ -30,20 +30,23 @@ class _FilterButtonState extends State<FilterButton> {
 
         return _wrapPopover(
           context,
-          FlowyTextButton(
+          SizedBox(
-            LocaleKeys.grid_settings_filter.tr(),
+            height: 26,
-            fontColor: textColor,
+            child: FlowyTextButton(
-            fillColor: Colors.transparent,
+              LocaleKeys.grid_settings_filter.tr(),
-            hoverColor: AFThemeExtension.of(context).lightGreyHover,
+              fontColor: textColor,
-            padding: GridSize.typeOptionContentInsets,
+              fillColor: Colors.transparent,
-            onPressed: () {
+              hoverColor: AFThemeExtension.of(context).lightGreyHover,
-              final bloc = context.read<GridFilterMenuBloc>();
+              padding: GridSize.typeOptionContentInsets,
-              if (bloc.state.filters.isEmpty) {
+              onPressed: () {
-                _popoverController.show();
+                final bloc = context.read<GridFilterMenuBloc>();
-              } else {
+                if (bloc.state.filters.isEmpty) {
-                bloc.add(const GridFilterMenuEvent.toggleMenu());
+                  _popoverController.show();
-              }
+                } else {
-            },
+                  bloc.add(const GridFilterMenuEvent.toggleMenu());
+                }
+              },
+            ),
           ),
         );
       },
@@ -55,7 +58,7 @@ class _FilterButtonState extends State<FilterButton> {
       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) {

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,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/setting_button.dart

@@ -41,23 +41,26 @@ class _SettingButtonState extends State<SettingButton> {
         );
       },
       builder: (context, settingContext) {
-        return AppFlowyPopover(
+        return SizedBox(
-          controller: _popoverController,
+          height: 26,
-          constraints: BoxConstraints.loose(const Size(260, 400)),
+          child: AppFlowyPopover(
-          direction: PopoverDirection.bottomWithLeftAligned,
+            controller: _popoverController,
-          offset: const Offset(0, 10),
+            constraints: BoxConstraints.loose(const Size(260, 400)),
-          margin: EdgeInsets.zero,
+            direction: PopoverDirection.bottomWithLeftAligned,
-          triggerActions: PopoverTriggerFlags.none,
+            offset: const Offset(0, 8),
-          child: FlowyTextButton(
+            margin: EdgeInsets.zero,
-            LocaleKeys.settings_title.tr(),
+            triggerActions: PopoverTriggerFlags.none,
-            fillColor: Colors.transparent,
+            child: FlowyTextButton(
-            hoverColor: AFThemeExtension.of(context).lightGreyHover,
+              LocaleKeys.settings_title.tr(),
-            padding: GridSize.typeOptionContentInsets,
+              fillColor: Colors.transparent,
-            onPressed: () => _popoverController.show(),
+              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);
-          },
         );
       },
     );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart

@@ -58,7 +58,7 @@ class _SortButtonState extends State<SortButton> {
       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,

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,

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,

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)),

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart

@@ -127,7 +127,7 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
             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,

frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart

@@ -82,6 +82,7 @@ class ShareActionList extends StatelessWidget {
     final docShareBloc = context.read<DocShareBloc>();
     return PopoverActionList<ShareActionWrapper>(
       direction: PopoverDirection.bottomWithCenterAligned,
+      offset: const Offset(0, 8),
       actions: ShareAction.values
           .map((action) => ShareActionWrapper(action))
           .toList(),

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart

@@ -48,6 +48,7 @@ class AddButton extends StatelessWidget {
     return PopoverActionList<PopoverAction>(
       direction: PopoverDirection.bottomWithLeftAligned,
       actions: actions,
+      offset: const Offset(0, 8),
       buildChild: (controller) {
         return FlowyIconButton(
           width: 22,

frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart

@@ -42,6 +42,7 @@ class BubbleActionList extends StatelessWidget {
     return PopoverActionList<PopoverAction>(
       direction: PopoverDirection.topWithRightAligned,
       actions: actions,
+      offset: const Offset(0, -8),
       buildChild: (controller) {
         return FlowyTextButton(
           '?',

frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart

@@ -13,6 +13,7 @@ class PopoverActionList<T extends PopoverAction> 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<T extends PopoverAction> 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<T extends PopoverAction>
       constraints: widget.constraints,
       direction: widget.direction,
       mutex: widget.mutex,
+      offset: widget.offset,
       triggerActions: PopoverTriggerFlags.none,
       onClose: widget.onClosed,
       popupBuilder: (BuildContext popoverContext) {