Merge pull request #1160 from AppFlowy-IO/fix/view_action_auto_width

fix: auto width for view action

Author: appflowy

frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart

@@ -106,8 +106,11 @@ class _SettingItem extends StatelessWidget {
       height: 30,
       child: FlowyButton(
         isSelected: isSelected,
-        text: FlowyText.medium(action.title(),
-            fontSize: 12, color: theme.textColor),
+        text: FlowyText.medium(
+          action.title(),
+          fontSize: 12,
+          color: theme.textColor,
+        ),
         hoverColor: theme.hover,
         onTap: () {
           context

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

@@ -61,12 +61,20 @@ class ActionList {
       itemBuilder: (context, index) => items[index],
       anchorContext: anchorContext,
       anchorDirection: AnchorDirection.bottomRight,
-      constraints: BoxConstraints.tight(const Size(120, 80)),
+      constraints: BoxConstraints(
+        minWidth: 120,
+        maxWidth: 280,
+        minHeight: items.length * (CreateItem.height),
+        maxHeight: items.length * (CreateItem.height),
+      ),
     );
   }
 }
 
 class CreateItem extends StatelessWidget {
+  static const double height = 30;
+  static const double verticalPadding = 6;
+
   final PluginBuilder pluginBuilder;
   final Function(PluginBuilder) onSelected;
   const CreateItem({
@@ -85,11 +93,20 @@ class CreateItem extends StatelessWidget {
       child: GestureDetector(
         behavior: HitTestBehavior.opaque,
         onTap: () => onSelected(pluginBuilder),
-        child: FlowyText.medium(
-          pluginBuilder.menuName,
-          color: theme.textColor,
-          fontSize: 12,
-        ).padding(horizontal: 10, vertical: 6),
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(
+            minWidth: 120,
+            minHeight: CreateItem.height,
+          ),
+          child: Align(
+            alignment: Alignment.centerLeft,
+            child: FlowyText.medium(
+              pluginBuilder.menuName,
+              color: theme.textColor,
+              fontSize: 12,
+            ).padding(horizontal: 10),
+          ),
+        ),
       ),
     );
   }

frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart

@@ -53,7 +53,7 @@ class ViewSectionItem extends StatelessWidget {
                 _handleAction(context, action);
               },
               child: Padding(
-                padding: const EdgeInsets.symmetric(vertical: 4),
+                padding: const EdgeInsets.symmetric(vertical: 2),
                 child: InkWell(
                   onTap: () => onSelected(context.read<ViewBloc>().state.view),
                   child: FlowyHover(
@@ -73,13 +73,18 @@ class ViewSectionItem extends StatelessWidget {
       BuildContext context, bool onHover, ViewState state, Color iconColor) {
     List<Widget> children = [
       SizedBox(
-          width: 16,
-          height: 16,
-          child: state.view.renderThumbnail(iconColor: iconColor)),
+        width: 16,
+        height: 16,
+        child: state.view.renderThumbnail(iconColor: iconColor),
+      ),
       const HSpace(2),
       Expanded(
-          child: FlowyText.regular(state.view.name,
-              fontSize: 12, overflow: TextOverflow.clip)),
+        child: FlowyText.regular(
+          state.view.name,
+          fontSize: 12,
+          overflow: TextOverflow.clip,
+        ),
+      ),
     ];
 
     if (onHover || state.isEditing) {

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

@@ -178,7 +178,7 @@ class FlowyVersionDescription extends StatelessWidget {
               ),
             ],
           ).padding(
-            horizontal: ActionListSizes.itemHPadding + ActionListSizes.padding,
+            horizontal: ActionListSizes.itemHPadding + ActionListSizes.hPadding,
           );
         } else {
           return const CircularProgressIndicator();

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

@@ -49,8 +49,8 @@ abstract class ActionList<T extends ActionItem> {
       anchorContext: anchorContext ?? buildContext,
       anchorDirection: anchorDirection,
       constraints: BoxConstraints(
-        minHeight: items.length * (itemHeight + ActionListSizes.padding * 2),
-        maxHeight: items.length * (itemHeight + ActionListSizes.padding * 2),
+        minHeight: items.length * (itemHeight + ActionListSizes.vPadding * 2),
+        maxHeight: items.length * (itemHeight + ActionListSizes.vPadding * 2),
         maxWidth: maxWidth,
         minWidth: minWidth,
       ),
@@ -69,7 +69,8 @@ abstract class ActionItem {
 class ActionListSizes {
   static double itemHPadding = 10;
   static double itemHeight = 20;
-  static double padding = 6;
+  static double vPadding = 6;
+  static double hPadding = 10;
 }
 
 class ActionCell<T extends ActionItem> extends StatelessWidget {
@@ -104,8 +105,8 @@ class ActionCell<T extends ActionItem> extends StatelessWidget {
             ],
           ),
         ).padding(
-          horizontal: ActionListSizes.padding,
-          vertical: ActionListSizes.padding,
+          horizontal: ActionListSizes.hPadding,
+          vertical: ActionListSizes.vPadding,
         ),
       ),
     );

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

@@ -30,7 +30,7 @@ class AppFlowyPopover extends StatelessWidget {
     this.offset,
     this.controller,
     this.asBarrier = false,
-    this.margin = const EdgeInsets.all(12),
+    this.margin = const EdgeInsets.all(6),
   }) : super(key: key);
 
   @override

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

@@ -60,7 +60,7 @@ class ListOverlay extends StatelessWidget {
         scrollDirection: Axis.horizontal,
         child: IntrinsicWidth(
           child: Column(
-            mainAxisSize: MainAxisSize.min,
+            mainAxisSize: MainAxisSize.max,
             children: [
               ...children,
               if (footer != null)