chore: add spacing between a popover and the edge of the window (#1625)

Author: richardshiue

frontend/app_flowy/packages/appflowy_popover/lib/src/layout.dart

@@ -7,11 +7,13 @@ class PopoverLayoutDelegate extends SingleChildLayoutDelegate {
   PopoverLink link;
   PopoverDirection direction;
   final Offset offset;
+  final EdgeInsets windowPadding;
 
   PopoverLayoutDelegate({
     required this.link,
     required this.direction,
     required this.offset,
+    required this.windowPadding,
   });
 
   @override
@@ -35,9 +37,21 @@ class PopoverLayoutDelegate extends SingleChildLayoutDelegate {
     return false;
   }
 
+  @override
+  Size getSize(BoxConstraints constraints) {
+    return Size(
+      constraints.maxWidth - windowPadding.left - windowPadding.right,
+      constraints.maxHeight - windowPadding.top - windowPadding.bottom,
+    );
+  }
+
   @override
   BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
-    return constraints.loosen();
+    return BoxConstraints(
+      maxWidth: constraints.maxWidth - windowPadding.left - windowPadding.right,
+      maxHeight:
+          constraints.maxHeight - windowPadding.top - windowPadding.bottom,
+    );
     // assert(link.leaderSize != null);
     // // if (link.leaderSize == null) {
     // //   return constraints.loosen();
@@ -274,8 +288,14 @@ class PopoverLayoutDelegate extends SingleChildLayoutDelegate {
         throw UnimplementedError();
     }
     return Offset(
-      math.max(0.0, math.min(size.width - childSize.width, position.dx)),
-      math.max(0.0, math.min(size.height - childSize.height, position.dy)),
+      math.max(
+          windowPadding.left,
+          math.min(
+              windowPadding.left + size.width - childSize.width, position.dx)),
+      math.max(
+          windowPadding.top,
+          math.min(
+              windowPadding.top + size.height - childSize.height, position.dy)),
     );
   }
 }

frontend/app_flowy/packages/appflowy_popover/lib/src/popover.dart

@@ -49,13 +49,19 @@ enum PopoverDirection {
 class Popover extends StatefulWidget {
   final PopoverController? controller;
 
+  /// The offset from the [child] where the popover will be drawn
   final Offset? offset;
 
+  /// Amount of padding between the edges of the window and the popover
+  final EdgeInsets? windowPadding;
+
   final Decoration? maskDecoration;
 
   /// The function used to build the popover.
   final Widget? Function(BuildContext context) popupBuilder;
 
+  /// Specify how the popover can be triggered when interacting with the child
+  /// by supplying a bitwise-OR combination of one or more [PopoverTriggerFlags]
   final int triggerActions;
 
   /// If multiple popovers are exclusive,
@@ -84,6 +90,7 @@ class Popover extends StatefulWidget {
     this.triggerActions = 0,
     this.direction = PopoverDirection.rightWithTopAligned,
     this.mutex,
+    this.windowPadding,
     this.onClose,
     this.asBarrier = false,
   }) : super(key: key);
@@ -126,6 +133,7 @@ class PopoverState extends State<Popover> {
           direction: widget.direction,
           popoverLink: popoverLink,
           offset: widget.offset ?? Offset.zero,
+          windowPadding: widget.windowPadding ?? EdgeInsets.zero,
           popupBuilder: widget.popupBuilder,
           onClose: () => close(),
           onCloseAll: () => _removeRootOverlay(),
@@ -194,6 +202,7 @@ class PopoverContainer extends StatefulWidget {
   final PopoverDirection direction;
   final PopoverLink popoverLink;
   final Offset offset;
+  final EdgeInsets windowPadding;
   final void Function() onClose;
   final void Function() onCloseAll;
 
@@ -203,6 +212,7 @@ class PopoverContainer extends StatefulWidget {
     required this.direction,
     required this.popoverLink,
     required this.offset,
+    required this.windowPadding,
     required this.onClose,
     required this.onCloseAll,
   }) : super(key: key);
@@ -228,6 +238,7 @@ class PopoverContainerState extends State<PopoverContainer> {
         direction: widget.direction,
         link: widget.popoverLink,
         offset: widget.offset,
+        windowPadding: widget.windowPadding,
       ),
       child: widget.popupBuilder(context),
     );

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart

@@ -15,6 +15,7 @@ class AppFlowyPopover extends StatelessWidget {
   final Offset? offset;
   final bool asBarrier;
   final EdgeInsets margin;
+  final EdgeInsets windowPadding;
 
   const AppFlowyPopover({
     Key? key,
@@ -29,6 +30,7 @@ class AppFlowyPopover extends StatelessWidget {
     this.controller,
     this.asBarrier = false,
     this.margin = const EdgeInsets.all(6),
+    this.windowPadding = const EdgeInsets.all(8.0),
   }) : super(key: key);
 
   @override
@@ -40,6 +42,7 @@ class AppFlowyPopover extends StatelessWidget {
       mutex: mutex,
       asBarrier: asBarrier,
       triggerActions: triggerActions,
+      windowPadding: windowPadding,
       popupBuilder: (context) {
         final child = popupBuilder(context);
         return _PopoverContainer(