chore: popover offsets (#1960)

2024-08-30 18:12:39 +00:00 · 2023-03-17 08:35:11 +08:00 · 2023-03-17 08:35:11 +08:00 · 0630dc10b7
commit 0630dc10b7
parent 888c7977eb
18 changed files with 59 additions and 46 deletions
--- 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,
--- 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
--- 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(
--- 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(
--- 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)),
--- 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(
--- 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<FilterButton> {

        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<GridFilterMenuBloc>();
-              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<GridFilterMenuBloc>();
+                if (bloc.state.filters.isEmpty) {
+                  _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) {
--- 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,
--- 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<SettingButton> {
        );
      },
      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);
-          },
        );
      },
    );
--- 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<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,
--- 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,
--- 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,
--- 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)),
--- 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<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,
--- 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<DocShareBloc>();
    return PopoverActionList<ShareActionWrapper>(
      direction: PopoverDirection.bottomWithCenterAligned,
+      offset: const Offset(0, 8),
      actions: ShareAction.values
          .map((action) => ShareActionWrapper(action))
          .toList(),
--- 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<PopoverAction>(
      direction: PopoverDirection.bottomWithLeftAligned,
      actions: actions,
+      offset: const Offset(0, 8),
      buildChild: (controller) {
        return FlowyIconButton(
          width: 22,
--- 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<PopoverAction>(
      direction: PopoverDirection.topWithRightAligned,
      actions: actions,
+      offset: const Offset(0, -8),
      buildChild: (controller) {
        return FlowyTextButton(
          '?',
--- 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<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) {