Merge pull request #1155 from AppFlowy-IO/fix/1126

fix: auto resize Action list

Author: appflowy

frontend/app_flowy/lib/plugins/doc/document.dart

@@ -195,9 +195,6 @@ class ShareActions with ActionList<ShareActionWrapper>, FlowyOverlayDelegate {
 
   ShareActions({required this.onSelected});
 
-  @override
-  double get maxWidth => 130;
-
   @override
   double get itemHeight => 22;
 

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

@@ -61,8 +61,7 @@ class ActionList {
       itemBuilder: (context, index) => items[index],
       anchorContext: anchorContext,
       anchorDirection: AnchorDirection.bottomRight,
-      width: 120,
-      height: 80,
+      constraints: BoxConstraints.tight(const Size(120, 80)),
     );
   }
 }

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

@@ -111,9 +111,6 @@ class QuestionBubbleActionSheet
     required this.onSelected,
   });
 
-  @override
-  double get maxWidth => 170;
-
   @override
   double get itemHeight => 22;
 
@@ -142,7 +139,7 @@ class QuestionBubbleActionSheet
   @override
   ListOverlayFooter? get footer => ListOverlayFooter(
         widget: const FlowyVersionDescription(),
-        height: 30,
+        height: 40,
         padding: const EdgeInsets.only(top: 6),
       );
 }
@@ -174,8 +171,11 @@ class FlowyVersionDescription extends StatelessWidget {
             children: [
               Divider(height: 1, color: theme.shader6, thickness: 1.0),
               const VSpace(6),
-              FlowyText("$appName $version.$buildNumber",
-                  fontSize: 12, color: theme.shader4),
+              FlowyText(
+                "$appName $version.$buildNumber",
+                fontSize: 12,
+                color: theme.shader4,
+              ),
             ],
           ).padding(
             horizontal: ActionListSizes.itemHPadding + ActionListSizes.padding,

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

@@ -13,7 +13,9 @@ abstract class ActionList<T extends ActionItem> {
 
   String get identifier => toString();
 
-  double get maxWidth => 162;
+  double get maxWidth => 300;
+
+  double get minWidth => 120;
 
   double get itemHeight => ActionListSizes.itemHeight;
 
@@ -29,28 +31,29 @@ abstract class ActionList<T extends ActionItem> {
     AnchorDirection anchorDirection = AnchorDirection.bottomRight,
     Offset? anchorOffset,
   }) {
-    final widgets = items
-        .map(
-          (action) => ActionCell<T>(
-            action: action,
-            itemHeight: itemHeight,
-            onSelected: (action) {
-              FlowyOverlay.of(buildContext).remove(identifier);
-              selectCallback(dartz.some(action));
-            },
-          ),
-        )
-        .toList();
-
     ListOverlay.showWithAnchor(
       buildContext,
       identifier: identifier,
-      itemCount: widgets.length,
-      itemBuilder: (context, index) => widgets[index],
+      itemCount: items.length,
+      itemBuilder: (context, index) {
+        final action = items[index];
+        return ActionCell<T>(
+          action: action,
+          itemHeight: itemHeight,
+          onSelected: (action) {
+            FlowyOverlay.of(buildContext).remove(identifier);
+            selectCallback(dartz.some(action));
+          },
+        );
+      },
       anchorContext: anchorContext ?? buildContext,
       anchorDirection: anchorDirection,
-      width: maxWidth,
-      height: widgets.length * (itemHeight + ActionListSizes.padding * 2),
+      constraints: BoxConstraints(
+        minHeight: items.length * (itemHeight + ActionListSizes.padding * 2),
+        maxHeight: items.length * (itemHeight + ActionListSizes.padding * 2),
+        maxWidth: maxWidth,
+        minWidth: minWidth,
+      ),
       delegate: delegate,
       anchorOffset: anchorOffset,
       footer: footer,
@@ -93,7 +96,7 @@ class ActionCell<T extends ActionItem> extends StatelessWidget {
         child: SizedBox(
           height: itemHeight,
           child: Row(
-            crossAxisAlignment: CrossAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               if (icon != null) icon,
               HSpace(ActionListSizes.itemHPadding),

frontend/app_flowy/packages/flowy_infra_ui/example/lib/overlay/overlay_screen.dart

@@ -218,8 +218,8 @@ class OverlayScreen extends StatelessWidget {
                           overlapBehaviour: providerContext
                               .read<OverlayDemoConfiguration>()
                               .overlapBehaviour,
-                          width: 200.0,
-                          height: 200.0,
+                          constraints:
+                              BoxConstraints.tight(const Size(200, 200)),
                         );
                       },
                       child: const Text('Show List Overlay'),

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

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/theme.dart';
@@ -19,46 +21,55 @@ class ListOverlay extends StatelessWidget {
   const ListOverlay({
     Key? key,
     required this.itemBuilder,
-    this.itemCount,
+    this.itemCount = 0,
     this.controller,
-    this.width = double.infinity,
-    this.height = double.infinity,
+    this.constraints = const BoxConstraints(),
     this.footer,
   }) : super(key: key);
 
   final IndexedWidgetBuilder itemBuilder;
-  final int? itemCount;
+  final int itemCount;
   final ScrollController? controller;
-  final double width;
-  final double height;
+  final BoxConstraints constraints;
   final ListOverlayFooter? footer;
 
   @override
   Widget build(BuildContext context) {
     const padding = EdgeInsets.symmetric(horizontal: 6, vertical: 6);
-    double totalHeight = height + padding.vertical;
+    double totalHeight = constraints.minHeight + padding.vertical;
     if (footer != null) {
       totalHeight = totalHeight + footer!.height + footer!.padding.vertical;
     }
 
+    final innerConstraints = BoxConstraints(
+      minHeight: totalHeight,
+      maxHeight: max(constraints.maxHeight, totalHeight),
+      minWidth: constraints.minWidth,
+      maxWidth: constraints.maxWidth,
+    );
+
+    List<Widget> children = [];
+    for (var i = 0; i < itemCount; i++) {
+      children.add(itemBuilder(context, i));
+    }
+
     return OverlayContainer(
-      constraints: BoxConstraints.tight(Size(width, totalHeight)),
+      constraints: innerConstraints,
       padding: padding,
       child: SingleChildScrollView(
-        child: Column(
-          children: [
-            ListView.builder(
-              shrinkWrap: true,
-              itemBuilder: itemBuilder,
-              itemCount: itemCount,
-              controller: controller,
-            ),
-            if (footer != null)
-              Padding(
-                padding: footer!.padding,
-                child: footer!.widget,
-              ),
-          ],
+        scrollDirection: Axis.horizontal,
+        child: IntrinsicWidth(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              ...children,
+              if (footer != null)
+                Padding(
+                  padding: footer!.padding,
+                  child: footer!.widget,
+                ),
+            ],
+          ),
         ),
       ),
     );
@@ -68,10 +79,9 @@ class ListOverlay extends StatelessWidget {
     BuildContext context, {
     required String identifier,
     required IndexedWidgetBuilder itemBuilder,
-    int? itemCount,
+    int itemCount = 0,
     ScrollController? controller,
-    double width = double.infinity,
-    double height = double.infinity,
+    BoxConstraints constraints = const BoxConstraints(),
     required BuildContext anchorContext,
     AnchorDirection? anchorDirection,
     FlowyOverlayDelegate? delegate,
@@ -85,8 +95,7 @@ class ListOverlay extends StatelessWidget {
         itemBuilder: itemBuilder,
         itemCount: itemCount,
         controller: controller,
-        width: width,
-        height: height,
+        constraints: constraints,
         footer: footer,
       ),
       identifier: identifier,
@@ -122,7 +131,9 @@ class OverlayContainer extends StatelessWidget {
       child: Container(
         padding: padding,
         decoration: FlowyDecoration.decoration(
-            theme.surface, theme.shadowColor.withOpacity(0.15)),
+          theme.surface,
+          theme.shadowColor.withOpacity(0.15),
+        ),
         constraints: constraints,
         child: child,
       ),