From ca8be6ab10e6b755b3a8d7fa90af3976f481cf1d Mon Sep 17 00:00:00 2001 From: "Nathan.fooo" <86001920+appflowy@users.noreply.github.com> Date: Sat, 8 Oct 2022 17:10:04 +0800 Subject: [PATCH] chore: replace overlay with popover (#1250) --- .../presentation/toolbar/board_toolbar.dart | 1 - .../app_flowy/lib/plugins/doc/document.dart | 81 +++------ .../home/menu/app/header/header.dart | 120 +++++++----- .../menu/app/header/right_click_action.dart | 51 ------ .../menu/app/section/disclosure_action.dart | 130 ------------- .../home/menu/app/section/item.dart | 156 ++++++++++------ .../widgets/float_bubble/question_bubble.dart | 171 ++++++++---------- .../presentation/widgets/pop_up_action.dart | 124 ++++++++----- .../src/flowy_overlay/appflowy_popover.dart | 15 +- .../lib/style_widget/button.dart | 2 +- .../lib/style_widget/hover.dart | 46 +++-- 11 files changed, 393 insertions(+), 504 deletions(-) delete mode 100644 frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/right_click_action.dart delete mode 100644 frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart diff --git a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart index e4de7e3113..f20dcd6aa0 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart @@ -68,7 +68,6 @@ class _SettingButtonState extends State<_SettingButton> { child: FlowyIconButton( hoverColor: theme.hover, width: 22, - onPressed: () {}, icon: Padding( padding: const EdgeInsets.symmetric(vertical: 3.0, horizontal: 3.0), child: svgWidget("grid/setting/setting", color: theme.iconColor), diff --git a/frontend/app_flowy/lib/plugins/doc/document.dart b/frontend/app_flowy/lib/plugins/doc/document.dart index b2c75a08fe..ee8d572158 100644 --- a/frontend/app_flowy/lib/plugins/doc/document.dart +++ b/frontend/app_flowy/lib/plugins/doc/document.dart @@ -11,12 +11,11 @@ import 'package:app_flowy/workspace/presentation/home/toast.dart'; import 'package:app_flowy/workspace/presentation/widgets/left_bar_item.dart'; import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart'; import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:clipboard/clipboard.dart'; -import 'package:dartz/dartz.dart' as dartz; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/size.dart'; import 'package:flowy_infra/theme.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/widget/rounded_button.dart'; import 'package:flowy_sdk/log.dart'; import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart'; @@ -130,7 +129,6 @@ class DocumentShareButton extends StatelessWidget { }, child: BlocBuilder( builder: (context, state) { - final theme = context.watch(); return ChangeNotifierProvider.value( value: Provider.of(context, listen: true), child: Selector( @@ -140,14 +138,7 @@ class DocumentShareButton extends StatelessWidget { height: 30, width: 100, ), - child: RoundedTextButton( - title: LocaleKeys.shareAction_buttonText.tr(), - fontSize: 12, - borderRadius: Corners.s6Border, - color: theme.main1, - onPressed: () => - _showActionList(context, const Offset(0, 10)), - ), + child: const ShareActionList(), ), ), ); @@ -171,11 +162,30 @@ class DocumentShareButton extends StatelessWidget { } void _handleExportError(FlowyError error) {} +} - void _showActionList(BuildContext context, Offset offset) { - final actionList = ShareActions(onSelected: (result) { - result.fold(() {}, (action) { - switch (action) { +class ShareActionList extends StatelessWidget { + const ShareActionList({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final theme = context.watch(); + return PopoverActionList( + direction: PopoverDirection.bottomWithCenterAligned, + actions: ShareAction.values + .map((action) => ShareActionWrapper(action)) + .toList(), + withChild: (controller) { + return RoundedTextButton( + title: LocaleKeys.shareAction_buttonText.tr(), + fontSize: 12, + borderRadius: Corners.s6Border, + color: theme.main1, + onPressed: () => controller.show(), + ); + }, + onSelected: (action, controller) { + switch (action.inner) { case ShareAction.markdown: context .read() @@ -189,53 +199,18 @@ class DocumentShareButton extends StatelessWidget { .show(context); break; } - }); - }); - actionList.show( - context, - anchorDirection: AnchorDirection.bottomWithRightAligned, - anchorOffset: offset, + controller.close(); + }, ); } } -class ShareActions with ActionList, FlowyOverlayDelegate { - final Function(dartz.Option) onSelected; - final _items = - ShareAction.values.map((action) => ShareActionWrapper(action)).toList(); - - ShareActions({required this.onSelected}); - - @override - double get itemHeight => 22; - - @override - List get items => _items; - - @override - void Function(dartz.Option p1) get selectCallback => - (result) { - result.fold( - () => onSelected(dartz.none()), - (wrapper) => onSelected( - dartz.some(wrapper.inner), - ), - ); - }; - - @override - FlowyOverlayDelegate? get delegate => this; - - @override - void didRemove() => onSelected(dartz.none()); -} - enum ShareAction { markdown, copyLink, } -class ShareActionWrapper extends ActionItem { +class ShareActionWrapper extends ActionCell { final ShareAction inner; ShareActionWrapper(this.inner); diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart index 5724262aa5..689db8db71 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart @@ -1,22 +1,21 @@ import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart'; +import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:expandable/expandable.dart'; import 'package:flowy_infra/icon_data.dart'; import 'package:flowy_infra/theme.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_sdk/protobuf/flowy-folder/app.pb.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:app_flowy/workspace/application/app/app_bloc.dart'; import 'package:styled_widget/styled_widget.dart'; -import 'package:dartz/dartz.dart'; import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:flowy_infra/image.dart'; import '../menu_app.dart'; import 'add_button.dart'; -import 'right_click_action.dart'; class MenuAppHeader extends StatelessWidget { final AppPB app; @@ -79,30 +78,23 @@ class MenuAppHeader extends StatelessWidget { expandableController.toggle(); } }, - child: GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: () => ExpandableController.of(context, - rebuildOnChange: false, required: true) - ?.toggle(), - onSecondaryTap: () { - final actionList = AppDisclosureActionSheet( - onSelected: (action) => _handleAction(context, action), - ); - actionList.show( - context, - anchorDirection: AnchorDirection.bottomWithCenterAligned, - ); - }, - child: BlocSelector( - selector: (state) => state.app, - builder: (context, app) => FlowyText.medium( - app.name, - fontSize: 12, - color: theme.textColor, - overflow: TextOverflow.ellipsis, - ), - ), - ), + child: AppActionList(onSelected: (action) { + switch (action) { + case AppDisclosureAction.rename: + NavigatorTextFieldDialog( + title: LocaleKeys.menuAppHeader_renameDialog.tr(), + value: context.read().state.app.name, + confirm: (newValue) { + context.read().add(AppEvent.rename(newValue)); + }, + ).show(context); + + break; + case AppDisclosureAction.delete: + context.read().add(const AppEvent.delete()); + break; + } + }), ), ); } @@ -123,26 +115,6 @@ class MenuAppHeader extends StatelessWidget { ).padding(right: MenuAppSizes.headerPadding), ); } - - void _handleAction(BuildContext context, Option action) { - action.fold(() {}, (action) { - switch (action) { - case AppDisclosureAction.rename: - NavigatorTextFieldDialog( - title: LocaleKeys.menuAppHeader_renameDialog.tr(), - value: context.read().state.app.name, - confirm: (newValue) { - context.read().add(AppEvent.rename(newValue)); - }, - ).show(context); - - break; - case AppDisclosureAction.delete: - context.read().add(const AppEvent.delete()); - break; - } - }); - } } enum AppDisclosureAction { @@ -169,3 +141,57 @@ extension AppDisclosureExtension on AppDisclosureAction { } } } + +class AppActionList extends StatelessWidget { + final Function(AppDisclosureAction) onSelected; + const AppActionList({ + required this.onSelected, + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + final theme = context.read(); + return PopoverActionList( + direction: PopoverDirection.bottomWithCenterAligned, + actions: AppDisclosureAction.values + .map((action) => DisclosureActionWrapper(action)) + .toList(), + withChild: (controller) { + return GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: () => ExpandableController.of(context, + rebuildOnChange: false, required: true) + ?.toggle(), + onSecondaryTap: () { + controller.show(); + }, + child: BlocSelector( + selector: (state) => state.app, + builder: (context, app) => FlowyText.medium( + app.name, + fontSize: 12, + color: theme.textColor, + overflow: TextOverflow.ellipsis, + ), + ), + ); + }, + onSelected: (action, controller) { + onSelected(action.inner); + controller.close(); + }, + ); + } +} + +class DisclosureActionWrapper extends ActionCell { + final AppDisclosureAction inner; + + DisclosureActionWrapper(this.inner); + @override + Widget? icon(Color iconColor) => inner.icon(iconColor); + + @override + String get name => inner.name; +} diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/right_click_action.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/right_click_action.dart deleted file mode 100644 index 387f161732..0000000000 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/right_click_action.dart +++ /dev/null @@ -1,51 +0,0 @@ -import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart'; -import 'package:dartz/dartz.dart' as dartz; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; -import 'package:flutter/material.dart'; - -import 'header.dart'; - -class AppDisclosureActionSheet - with ActionList, FlowyOverlayDelegate { - final Function(dartz.Option) onSelected; - final _items = AppDisclosureAction.values - .map((action) => DisclosureActionWrapper(action)) - .toList(); - - AppDisclosureActionSheet({ - required this.onSelected, - }); - - @override - List get items => _items; - - @override - void Function(dartz.Option p1) get selectCallback => - (result) { - result.fold( - () => onSelected(dartz.none()), - (wrapper) => onSelected( - dartz.some(wrapper.inner), - ), - ); - }; - - @override - FlowyOverlayDelegate? get delegate => this; - - @override - void didRemove() { - onSelected(dartz.none()); - } -} - -class DisclosureActionWrapper extends ActionItem { - final AppDisclosureAction inner; - - DisclosureActionWrapper(this.inner); - @override - Widget? icon(Color iconColor) => inner.icon(iconColor); - - @override - String get name => inner.name; -} diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart deleted file mode 100644 index f420ec30e6..0000000000 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart +++ /dev/null @@ -1,130 +0,0 @@ -import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart'; -import 'package:dartz/dartz.dart' as dartz; -import 'package:flowy_infra/image.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; -import 'package:flowy_infra_ui/style_widget/icon_button.dart'; -import 'package:flutter/gestures.dart'; -import 'package:flutter/material.dart'; -import 'package:flowy_infra/theme.dart'; -import 'package:provider/provider.dart'; - -import 'item.dart'; - -// [[Widget: LifeCycle]] -// https://flutterbyexample.com/lesson/stateful-widget-lifecycle -class ViewDisclosureButton extends StatelessWidget - with ActionList, FlowyOverlayDelegate { - final Function() onTap; - final Function(dartz.Option) onSelected; - final _items = ViewDisclosureAction.values - .map((action) => ViewDisclosureActionWrapper(action)) - .toList(); - - ViewDisclosureButton({ - Key? key, - required this.onTap, - required this.onSelected, - }) : super(key: key); - - @override - Widget build(BuildContext context) { - final theme = context.watch(); - return FlowyIconButton( - iconPadding: const EdgeInsets.all(5), - width: 26, - onPressed: () { - onTap(); - show(context); - }, - icon: svgWidget("editor/details", color: theme.iconColor), - ); - } - - @override - List get items => _items; - - @override - void Function(dartz.Option p1) - get selectCallback => (result) { - result.fold( - () => onSelected(dartz.none()), - (wrapper) => onSelected(dartz.some(wrapper.inner)), - ); - }; - - @override - FlowyOverlayDelegate? get delegate => this; - - @override - void didRemove() { - onSelected(dartz.none()); - } -} - -class ViewDisclosureRegion extends StatelessWidget - with ActionList, FlowyOverlayDelegate { - final Widget child; - final Function() onTap; - final Function(dartz.Option) onSelected; - final _items = ViewDisclosureAction.values - .map((action) => ViewDisclosureActionWrapper(action)) - .toList(); - - ViewDisclosureRegion( - {Key? key, - required this.onSelected, - required this.onTap, - required this.child}) - : super(key: key); - - @override - Widget build(BuildContext context) { - return Listener( - onPointerDown: (event) => _handleClick(event, context), - child: child, - ); - } - - @override - FlowyOverlayDelegate? get delegate => this; - - @override - List get items => _items; - - @override - void Function(dartz.Option p1) - get selectCallback => (result) { - result.fold( - () => onSelected(dartz.none()), - (wrapper) => onSelected(dartz.some(wrapper.inner)), - ); - }; - - @override - void didRemove() { - onSelected(dartz.none()); - } - - void _handleClick(PointerDownEvent event, BuildContext context) { - if (event.kind == PointerDeviceKind.mouse && - event.buttons == kSecondaryMouseButton) { - RenderBox box = context.findRenderObject() as RenderBox; - Offset position = box.localToGlobal(Offset.zero); - double x = event.position.dx - position.dx - box.size.width; - double y = event.position.dy - position.dy - box.size.height; - onTap(); - show(context, anchorOffset: Offset(x, y)); - } - } -} - -class ViewDisclosureActionWrapper extends ActionItem { - final ViewDisclosureAction inner; - - ViewDisclosureActionWrapper(this.inner); - @override - Widget? icon(Color iconColor) => inner.icon(iconColor); - - @override - String get name => inner.name; -} 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 195c82adcd..8587cfcdaf 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 @@ -3,7 +3,6 @@ import 'package:app_flowy/workspace/application/view/view_bloc.dart'; import 'package:app_flowy/workspace/application/view/view_ext.dart'; import 'package:app_flowy/workspace/presentation/home/menu/menu.dart'; import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart'; -import 'package:dartz/dartz.dart' as dartz; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart'; @@ -16,7 +15,9 @@ import 'package:styled_widget/styled_widget.dart'; import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:flowy_infra/image.dart'; -import 'disclosure_action.dart'; +import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; +import 'package:flowy_infra_ui/style_widget/icon_button.dart'; // ignore: must_be_immutable class ViewSectionItem extends StatelessWidget { @@ -37,40 +38,41 @@ class ViewSectionItem extends StatelessWidget { return MultiBlocProvider( providers: [ BlocProvider( - create: (ctx) => - getIt(param1: view)..add(const ViewEvent.initial())), + create: (ctx) => getIt(param1: view) + ..add( + const ViewEvent.initial(), + )), ], child: BlocBuilder( - builder: (context, state) { - return ViewDisclosureRegion( - onTap: () => context - .read() - .add(const ViewEvent.setIsEditing(true)), - onSelected: (action) { - context - .read() - .add(const ViewEvent.setIsEditing(false)); - _handleAction(context, action); - }, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 2), - child: InkWell( - onTap: () => onSelected(context.read().state.view), - child: FlowyHover( - style: HoverStyle(hoverColor: theme.bg3), - builder: (_, onHover) => - _render(context, onHover, state, theme.iconColor), - setSelected: () => state.isEditing || isSelected, - ), + builder: (blocContext, state) { + return Padding( + padding: const EdgeInsets.symmetric(vertical: 2), + child: InkWell( + onTap: () => onSelected(blocContext.read().state.view), + child: FlowyHover( + style: HoverStyle(hoverColor: theme.bg3), + buildWhen: () => !state.isEditing, + builder: (_, onHover) => _render( + blocContext, + onHover, + state, + theme.iconColor, ), - )); + isSelected: () => state.isEditing || isSelected, + ), + ), + ); }, ), ); } Widget _render( - BuildContext context, bool onHover, ViewState state, Color iconColor) { + BuildContext blocContext, + bool onHover, + ViewState state, + Color iconColor, + ) { List children = [ SizedBox( width: 16, @@ -90,11 +92,29 @@ class ViewSectionItem extends StatelessWidget { if (onHover || state.isEditing) { children.add( ViewDisclosureButton( - onTap: () => - context.read().add(const ViewEvent.setIsEditing(true)), - onSelected: (action) { - context.read().add(const ViewEvent.setIsEditing(false)); - _handleAction(context, action); + onEdit: (isEdit) => + blocContext.read().add(ViewEvent.setIsEditing(isEdit)), + onAction: (action) { + switch (action) { + case ViewDisclosureAction.rename: + NavigatorTextFieldDialog( + title: LocaleKeys.disclosureAction_rename.tr(), + value: blocContext.read().state.view.name, + confirm: (newValue) { + blocContext + .read() + .add(ViewEvent.rename(newValue)); + }, + ).show(blocContext); + + break; + case ViewDisclosureAction.delete: + blocContext.read().add(const ViewEvent.delete()); + break; + case ViewDisclosureAction.duplicate: + blocContext.read().add(const ViewEvent.duplicate()); + break; + } }, ), ); @@ -108,30 +128,6 @@ class ViewSectionItem extends StatelessWidget { ), ); } - - void _handleAction( - BuildContext context, dartz.Option action) { - action.foldRight({}, (action, previous) { - switch (action) { - case ViewDisclosureAction.rename: - NavigatorTextFieldDialog( - title: LocaleKeys.disclosureAction_rename.tr(), - value: context.read().state.view.name, - confirm: (newValue) { - context.read().add(ViewEvent.rename(newValue)); - }, - ).show(context); - - break; - case ViewDisclosureAction.delete: - context.read().add(const ViewEvent.delete()); - break; - case ViewDisclosureAction.duplicate: - context.read().add(const ViewEvent.duplicate()); - break; - } - }); - } } enum ViewDisclosureAction { @@ -163,3 +159,51 @@ extension ViewDisclosureExtension on ViewDisclosureAction { } } } + +class ViewDisclosureButton extends StatelessWidget { + final Function(bool) onEdit; + final Function(ViewDisclosureAction) onAction; + const ViewDisclosureButton({ + required this.onEdit, + required this.onAction, + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + final theme = context.watch(); + return PopoverActionList( + direction: PopoverDirection.bottomWithCenterAligned, + actions: ViewDisclosureAction.values + .map((action) => ViewDisclosureActionWrapper(action)) + .toList(), + withChild: (controller) { + return FlowyIconButton( + iconPadding: const EdgeInsets.all(5), + width: 26, + icon: svgWidget("editor/details", color: theme.iconColor), + onPressed: () { + onEdit(true); + controller.show(); + }, + ); + }, + onSelected: (action, controller) { + onEdit(false); + onAction(action.inner); + controller.close(); + }, + ); + } +} + +class ViewDisclosureActionWrapper extends ActionCell { + final ViewDisclosureAction inner; + + ViewDisclosureActionWrapper(this.inner); + @override + Widget? icon(Color iconColor) => inner.icon(iconColor); + + @override + String get name => inner.name; +} 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 f824908ae0..8cd18084b8 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 @@ -1,16 +1,15 @@ import 'package:app_flowy/startup/tasks/rust_sdk.dart'; import 'package:app_flowy/workspace/presentation/home/toast.dart'; import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart'; +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/theme.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/button.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:provider/provider.dart'; -import 'package:dartz/dartz.dart' as dartz; import 'package:styled_widget/styled_widget.dart'; import 'package:package_info_plus/package_info_plus.dart'; import 'package:url_launcher/url_launcher.dart'; @@ -22,41 +21,59 @@ class QuestionBubble extends StatelessWidget { @override Widget build(BuildContext context) { - final theme = context.watch(); - return SizedBox( + return const SizedBox( width: 30, height: 30, - child: FlowyTextButton( - '?', - tooltip: LocaleKeys.questionBubble_help.tr(), - fontSize: 12, - fontWeight: FontWeight.w600, - fillColor: theme.selector, - mainAxisAlignment: MainAxisAlignment.center, - radius: BorderRadius.circular(10), - onPressed: () { - final actionList = QuestionBubbleActionSheet(onSelected: (result) { - result.fold(() {}, (action) { - switch (action) { - case BubbleAction.whatsNews: - _launchURL("https://www.appflowy.io/whatsnew"); - break; - case BubbleAction.help: - _launchURL("https://discord.gg/9Q2xaN37tV"); - break; - case BubbleAction.debug: - _DebugToast().show(); - break; - } - }); - }); - actionList.show( - context, - anchorDirection: AnchorDirection.topWithRightAligned, - anchorOffset: const Offset(0, -10), - ); - }, - ), + child: BubbleActionList(), + ); + } +} + +class BubbleActionList extends StatelessWidget { + const BubbleActionList({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final theme = context.watch(); + + final List actions = []; + actions.addAll( + BubbleAction.values.map((action) => BubbleActionWrapper(action)), + ); + actions.add(FlowyVersionDescription()); + + return PopoverActionList( + direction: PopoverDirection.topWithRightAligned, + actions: actions, + withChild: (controller) { + return FlowyTextButton( + '?', + tooltip: LocaleKeys.questionBubble_help.tr(), + fontSize: 12, + fontWeight: FontWeight.w600, + fillColor: theme.selector, + mainAxisAlignment: MainAxisAlignment.center, + radius: BorderRadius.circular(10), + onPressed: () => controller.show(), + ); + }, + onSelected: (action, controller) { + if (action is BubbleActionWrapper) { + switch (action.inner) { + case BubbleAction.whatsNews: + _launchURL("https://www.appflowy.io/whatsnew"); + break; + case BubbleAction.help: + _launchURL("https://discord.gg/9Q2xaN37tV"); + break; + case BubbleAction.debug: + _DebugToast().show(); + break; + } + } + + controller.close(); + }, ); } @@ -101,54 +118,9 @@ class _DebugToast { } } -class QuestionBubbleActionSheet - with ActionList, FlowyOverlayDelegate { - final Function(dartz.Option) onSelected; - final _items = - BubbleAction.values.map((action) => BubbleActionWrapper(action)).toList(); - - QuestionBubbleActionSheet({ - required this.onSelected, - }); - +class FlowyVersionDescription extends CustomActionCell { @override - double get itemHeight => 22; - - @override - List get items => _items; - - @override - void Function(dartz.Option p1) get selectCallback => - (result) { - result.fold( - () => onSelected(dartz.none()), - (wrapper) => onSelected( - dartz.some(wrapper.inner), - ), - ); - }; - - @override - FlowyOverlayDelegate? get delegate => this; - - @override - void didRemove() { - onSelected(dartz.none()); - } - - @override - ListOverlayFooter? get footer => ListOverlayFooter( - widget: const FlowyVersionDescription(), - height: 40, - padding: const EdgeInsets.only(top: 6), - ); -} - -class FlowyVersionDescription extends StatelessWidget { - const FlowyVersionDescription({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { + Widget buildWithContext(BuildContext context) { final theme = context.watch(); return FutureBuilder( @@ -165,23 +137,26 @@ class FlowyVersionDescription extends StatelessWidget { String version = packageInfo.version; String buildNumber = packageInfo.buildNumber; - return Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Divider(height: 1, color: theme.shader6, thickness: 1.0), - const VSpace(6), - FlowyText( - "$appName $version.$buildNumber", - fontSize: 12, - color: theme.shader4, - ), - ], - ).padding( - horizontal: ActionListSizes.itemHPadding + ActionListSizes.hPadding, + return SizedBox( + height: 30, + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Divider(height: 1, color: theme.shader6, thickness: 1.0), + const VSpace(6), + FlowyText( + "$appName $version.$buildNumber", + fontSize: 12, + color: theme.shader4, + ), + ], + ).padding( + horizontal: ActionListSizes.itemHPadding, + ), ); } else { - return const CircularProgressIndicator(); + return const SizedBox(height: 30); } }, ); @@ -190,7 +165,7 @@ class FlowyVersionDescription extends StatelessWidget { enum BubbleAction { whatsNews, help, debug } -class BubbleActionWrapper extends ActionItem { +class BubbleActionWrapper extends ActionCell { final BubbleAction inner; BubbleActionWrapper(this.inner); 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 2c48cec9d5..08d9ff4a40 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 @@ -1,3 +1,4 @@ +import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart'; @@ -6,66 +7,90 @@ import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:styled_widget/styled_widget.dart'; -import 'package:dartz/dartz.dart' as dartz; -abstract class ActionList { - List get items; +class PopoverActionList extends StatefulWidget { + final List actions; + final Function(T, PopoverController) onSelected; + final BoxConstraints constraints; + final PopoverDirection direction; + final Widget Function(PopoverController) withChild; - String get identifier => toString(); + const PopoverActionList({ + required this.actions, + required this.withChild, + required this.onSelected, + this.direction = PopoverDirection.rightWithTopAligned, + this.constraints = const BoxConstraints( + minWidth: 120, + maxWidth: 360, + maxHeight: 300, + ), + Key? key, + }) : super(key: key); - double get maxWidth => 300; + @override + State> createState() => _PopoverActionListState(); +} - double get minWidth => 120; +class _PopoverActionListState + extends State> { + late PopoverController popoverController; - double get itemHeight => ActionListSizes.itemHeight; + @override + void initState() { + popoverController = PopoverController(); + super.initState(); + } - ListOverlayFooter? get footer => null; + @override + Widget build(BuildContext context) { + final child = widget.withChild(popoverController); - void Function(dartz.Option) get selectCallback; + return AppFlowyPopover( + controller: popoverController, + constraints: widget.constraints, + direction: widget.direction, + triggerActions: PopoverTriggerFlags.none, + popupBuilder: (BuildContext popoverContext) { + final List children = widget.actions.map((action) { + if (action is ActionCell) { + return ActionCellWidget( + action: action, + itemHeight: ActionListSizes.itemHeight, + onSelected: (action) { + widget.onSelected(action, popoverController); + }, + ); + } else { + final custom = action as CustomActionCell; + return custom.buildWithContext(context); + } + }).toList(); - FlowyOverlayDelegate? get delegate; - - void show( - BuildContext buildContext, { - BuildContext? anchorContext, - AnchorDirection anchorDirection = AnchorDirection.bottomRight, - Offset? anchorOffset, - }) { - ListOverlay.showWithAnchor( - buildContext, - identifier: identifier, - 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)); - }, + return IntrinsicHeight( + child: IntrinsicWidth( + child: Column( + children: children, + ), + ), ); }, - anchorContext: anchorContext ?? buildContext, - anchorDirection: anchorDirection, - constraints: BoxConstraints( - minHeight: items.length * (itemHeight + ActionListSizes.vPadding * 2), - maxHeight: items.length * (itemHeight + ActionListSizes.vPadding * 2), - maxWidth: maxWidth, - minWidth: minWidth, - ), - delegate: delegate, - anchorOffset: anchorOffset, - footer: footer, + child: child, ); } } -abstract class ActionItem { +abstract class ActionCell extends PopoverAction { Widget? icon(Color iconColor); String get name; } +abstract class CustomActionCell extends PopoverAction { + Widget buildWithContext(BuildContext context); +} + +abstract class PopoverAction {} + class ActionListSizes { static double itemHPadding = 10; static double itemHeight = 20; @@ -73,11 +98,11 @@ class ActionListSizes { static double hPadding = 10; } -class ActionCell extends StatelessWidget { +class ActionCellWidget extends StatelessWidget { final T action; final Function(T) onSelected; final double itemHeight; - const ActionCell({ + const ActionCellWidget({ Key? key, required this.action, required this.onSelected, @@ -86,8 +111,9 @@ class ActionCell extends StatelessWidget { @override Widget build(BuildContext context) { + final actionCell = action as ActionCell; final theme = context.watch(); - final icon = action.icon(theme.iconColor); + final icon = actionCell.icon(theme.iconColor); return FlowyHover( style: HoverStyle(hoverColor: theme.hover), @@ -99,7 +125,13 @@ class ActionCell extends StatelessWidget { child: Row( children: [ if (icon != null) ...[icon, HSpace(ActionListSizes.itemHPadding)], - FlowyText.medium(action.name, fontSize: 12), + Expanded( + child: FlowyText.medium( + actionCell.name, + fontSize: 12, + overflow: TextOverflow.visible, + ), + ), ], ), ).padding( 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 54a7b1941d..a98ac0c855 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 @@ -11,7 +11,7 @@ class AppFlowyPopover extends StatelessWidget { final Widget Function(BuildContext context) popupBuilder; final PopoverDirection direction; final int triggerActions; - final BoxConstraints? constraints; + final BoxConstraints constraints; final void Function()? onClose; final PopoverMutex? mutex; final Offset? offset; @@ -58,12 +58,12 @@ class AppFlowyPopover extends StatelessWidget { class _PopoverContainer extends StatelessWidget { final Widget child; - final BoxConstraints? constraints; + final BoxConstraints constraints; final EdgeInsets margin; const _PopoverContainer({ required this.child, required this.margin, - this.constraints, + required this.constraints, Key? key, }) : super(key: key); @@ -74,6 +74,7 @@ class _PopoverContainer extends StatelessWidget { theme.surface, theme.shadowColor.withOpacity(0.15), ); + return Material( type: MaterialType.transparency, child: Container( @@ -81,6 +82,14 @@ class _PopoverContainer extends StatelessWidget { decoration: decoration, constraints: constraints, child: child, + + // SingleChildScrollView( + // scrollDirection: Axis.horizontal, + // child: ConstrainedBox( + // constraints: constraints, + // child: child, + // ), + // ), ), ); } diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart index 159513dd49..616a012940 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart @@ -37,7 +37,7 @@ class FlowyButton extends StatelessWidget { hoverColor: hoverColor, ), onHover: onHover, - setSelected: () => isSelected, + isSelected: () => isSelected, builder: (context, onHover) => _render(), ), ); diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart index 00e0bb1b3a..7307e35d7e 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart @@ -8,19 +8,21 @@ class FlowyHover extends StatefulWidget { final HoverStyle style; final HoverBuilder? builder; final Widget? child; - final bool Function()? setSelected; + final bool Function()? isSelected; final void Function(bool)? onHover; final MouseCursor? cursor; + final bool Function()? buildWhen; - const FlowyHover( - {Key? key, - this.builder, - this.child, - required this.style, - this.setSelected, - this.onHover, - this.cursor}) - : super(key: key); + const FlowyHover({ + Key? key, + this.builder, + this.child, + required this.style, + this.isSelected, + this.onHover, + this.cursor, + this.buildWhen, + }) : super(key: key); @override State createState() => _FlowyHoverState(); @@ -35,15 +37,23 @@ class _FlowyHoverState extends State { cursor: widget.cursor != null ? widget.cursor! : SystemMouseCursors.click, opaque: false, onEnter: (p) { - setState(() => _onHover = true); - if (widget.onHover != null) { - widget.onHover!(true); + if (_onHover) return; + + if (widget.buildWhen?.call() ?? true) { + setState(() => _onHover = true); + if (widget.onHover != null) { + widget.onHover!(true); + } } }, onExit: (p) { - setState(() => _onHover = false); - if (widget.onHover != null) { - widget.onHover!(false); + if (_onHover == false) return; + + if (widget.buildWhen?.call() ?? true) { + setState(() => _onHover = false); + if (widget.onHover != null) { + widget.onHover!(false); + } } }, child: renderWidget(), @@ -52,8 +62,8 @@ class _FlowyHoverState extends State { Widget renderWidget() { var showHover = _onHover; - if (!showHover && widget.setSelected != null) { - showHover = widget.setSelected!(); + if (!showHover && widget.isSelected != null) { + showHover = widget.isSelected!(); } final child = widget.child ?? widget.builder!(context, _onHover);