From b2d2e071bd359ea0f3a5294f144c225df602fef4 Mon Sep 17 00:00:00 2001 From: nathan Date: Sun, 25 Sep 2022 22:05:22 +0800 Subject: [PATCH] fix: auto width for view action --- .../presentation/toolbar/board_setting.dart | 7 +++-- .../home/menu/app/header/add_button.dart | 29 +++++++++++++++---- .../home/menu/app/section/item.dart | 17 +++++++---- .../widgets/float_bubble/question_bubble.dart | 2 +- .../presentation/widgets/pop_up_action.dart | 11 +++---- .../src/flowy_overlay/appflowy_popover.dart | 2 +- .../lib/src/flowy_overlay/list_overlay.dart | 2 +- 7 files changed, 48 insertions(+), 22 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart index b45db13cf2..b02cd0fc95 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart +++ b/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 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 57e0395d8a..80dd484dcb 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,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), + ), + ), ), ); } diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart index e66e69e414..083f7b55db 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart +++ b/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().state.view), child: FlowyHover( @@ -73,13 +73,18 @@ class ViewSectionItem extends StatelessWidget { BuildContext context, bool onHover, ViewState state, Color iconColor) { List 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) { 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 732c05325f..f824908ae0 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 @@ -178,7 +178,7 @@ class FlowyVersionDescription extends StatelessWidget { ), ], ).padding( - horizontal: ActionListSizes.itemHPadding + ActionListSizes.padding, + horizontal: ActionListSizes.itemHPadding + ActionListSizes.hPadding, ); } else { return const CircularProgressIndicator(); 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 2e43bd4b9d..f6aa316f29 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 @@ -49,8 +49,8 @@ abstract class ActionList { 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 extends StatelessWidget { @@ -104,8 +105,8 @@ class ActionCell extends StatelessWidget { ], ), ).padding( - horizontal: ActionListSizes.padding, - vertical: ActionListSizes.padding, + horizontal: ActionListSizes.hPadding, + vertical: ActionListSizes.vPadding, ), ), ); diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart index 7885cbb01d..54a7b1941d 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart +++ b/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 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 85e60926c7..a7e7523dd9 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 @@ -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)