From 42995b6bafa14c7a811e4df2ca5e6d29d8db1f9a Mon Sep 17 00:00:00 2001 From: nathan Date: Sun, 25 Sep 2022 14:56:54 +0800 Subject: [PATCH] fix: auto resize Action list --- .../app_flowy/lib/plugins/doc/document.dart | 3 - .../home/menu/app/header/add_button.dart | 3 +- .../widgets/float_bubble/question_bubble.dart | 12 ++-- .../presentation/widgets/pop_up_action.dart | 41 ++++++------ .../example/lib/overlay/overlay_screen.dart | 4 +- .../lib/src/flowy_overlay/list_overlay.dart | 67 +++++++++++-------- 6 files changed, 70 insertions(+), 60 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/doc/document.dart b/frontend/app_flowy/lib/plugins/doc/document.dart index 9ef30f037e..b9cd952bd8 100644 --- a/frontend/app_flowy/lib/plugins/doc/document.dart +++ b/frontend/app_flowy/lib/plugins/doc/document.dart @@ -195,9 +195,6 @@ class ShareActions with ActionList, FlowyOverlayDelegate { ShareActions({required this.onSelected}); - @override - double get maxWidth => 130; - @override double get itemHeight => 22; diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart index 5b06d2c3a2..57e0395d8a 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart +++ b/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)), ); } } diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart index 67e5f4ba25..732c05325f 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart +++ b/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, diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart index 64f29036e0..2e43bd4b9d 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart @@ -13,7 +13,9 @@ abstract class ActionList { 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 { AnchorDirection anchorDirection = AnchorDirection.bottomRight, Offset? anchorOffset, }) { - final widgets = items - .map( - (action) => ActionCell( - 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( + 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 extends StatelessWidget { child: SizedBox( height: itemHeight, child: Row( - crossAxisAlignment: CrossAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, children: [ if (icon != null) icon, HSpace(ActionListSizes.itemHPadding), diff --git a/frontend/app_flowy/packages/flowy_infra_ui/example/lib/overlay/overlay_screen.dart b/frontend/app_flowy/packages/flowy_infra_ui/example/lib/overlay/overlay_screen.dart index cea870a017..ae5cf7ef67 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/example/lib/overlay/overlay_screen.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/example/lib/overlay/overlay_screen.dart @@ -218,8 +218,8 @@ class OverlayScreen extends StatelessWidget { overlapBehaviour: providerContext .read() .overlapBehaviour, - width: 200.0, - height: 200.0, + constraints: + BoxConstraints.tight(const Size(200, 200)), ); }, child: const Text('Show List Overlay'), diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart index 24483a149f..85e60926c7 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart +++ b/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 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, ),