From 58ad84b7df9c16d53aa71ec9f84a4e350c70ab42 Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Thu, 25 Aug 2022 10:16:41 +0800 Subject: [PATCH] feat: flowy overlay --- .../board/presentation/board_page.dart | 13 ++-- .../plugins/grid/presentation/grid_page.dart | 13 ++-- .../presentation/widgets/row/row_detail.dart | 63 ++++++++----------- .../lib/src/flowy_overlay/flowy_dialog.dart | 39 ++++++++++++ .../lib/src/flowy_overlay/flowy_overlay.dart | 13 ++++ .../src/flowy_overlay/overlay_container.dart | 6 +- frontend/app_flowy/pubspec.lock | 2 +- 7 files changed, 100 insertions(+), 49 deletions(-) create mode 100644 frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart diff --git a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart index e7202e0a6d..423a075867 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart @@ -9,6 +9,7 @@ import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart' import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.dart'; import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_detail.dart'; import 'package:appflowy_board/appflowy_board.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui_web.dart'; import 'package:flowy_infra_ui/widget/error_page.dart'; import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-grid/block_entities.pb.dart'; @@ -157,10 +158,14 @@ class BoardContent extends StatelessWidget { rowCache: rowCache, ); - RowDetailPage( - cellBuilder: GridCellBuilder(delegate: dataController), - dataController: dataController, - ).show(context); + FlowyOverlay.show( + context: context, + builder: (BuildContext context) { + return RowDetailPage( + cellBuilder: GridCellBuilder(delegate: dataController), + dataController: dataController, + ); + }); } } diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart b/frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart index 2c6c1e2180..215ef7d222 100755 --- a/frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart @@ -3,6 +3,7 @@ import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart' import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/plugins/grid/application/grid_bloc.dart'; import 'package:flowy_infra/theme.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui_web.dart'; import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart'; import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart'; import 'package:flowy_infra_ui/style_widget/scrolling/styled_scrollview.dart'; @@ -287,10 +288,14 @@ class _GridRowsState extends State<_GridRows> { rowCache: rowCache, ); - RowDetailPage( - cellBuilder: cellBuilder, - dataController: dataController, - ).show(context); + FlowyOverlay.show( + context: context, + builder: (BuildContext context) { + return RowDetailPage( + cellBuilder: cellBuilder, + dataController: dataController, + ); + }); } } diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart index a98fcfa688..ea4d94fc17 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart @@ -4,6 +4,7 @@ import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart' import 'package:app_flowy/plugins/grid/application/row/row_detail_bloc.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; +import 'package:flowy_infra_ui/src/flowy_overlay/flowy_dialog.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/icon_button.dart'; import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart'; @@ -33,23 +34,6 @@ class RowDetailPage extends StatefulWidget with FlowyOverlayDelegate { @override State createState() => _RowDetailPageState(); - void show(BuildContext context) async { - final windowSize = MediaQuery.of(context).size; - final size = windowSize * 0.7; - FlowyOverlay.of(context).insertWithRect( - widget: OverlayContainer( - child: this, - constraints: BoxConstraints.tight(size), - ), - identifier: RowDetailPage.identifier(), - anchorPosition: Offset(-size.width / 2.0, -size.height / 2.0), - anchorSize: windowSize, - anchorDirection: AnchorDirection.center, - style: FlowyOverlayStyle(blur: false), - delegate: this, - ); - } - static String identifier() { return (RowDetailPage).toString(); } @@ -58,26 +42,28 @@ class RowDetailPage extends StatefulWidget with FlowyOverlayDelegate { class _RowDetailPageState extends State { @override Widget build(BuildContext context) { - return BlocProvider( - create: (context) { - final bloc = RowDetailBloc( - dataController: widget.dataController, - ); - bloc.add(const RowDetailEvent.initial()); - return bloc; - }, - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20), - child: Column( - children: [ - SizedBox( - height: 40, - child: Row( - children: const [Spacer(), _CloseButton()], + return FlowyDialog( + child: BlocProvider( + create: (context) { + final bloc = RowDetailBloc( + dataController: widget.dataController, + ); + bloc.add(const RowDetailEvent.initial()); + return bloc; + }, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20), + child: Column( + children: [ + SizedBox( + height: 40, + child: Row( + children: const [Spacer(), _CloseButton()], + ), ), - ), - Expanded(child: _PropertyList(cellBuilder: widget.cellBuilder)), - ], + Expanded(child: _PropertyList(cellBuilder: widget.cellBuilder)), + ], + ), ), ), ); @@ -92,8 +78,9 @@ class _CloseButton extends StatelessWidget { final theme = context.watch(); return FlowyIconButton( width: 24, - onPressed: () => - FlowyOverlay.of(context).remove(RowDetailPage.identifier()), + onPressed: () { + FlowyOverlay.pop(context); + }, iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2), icon: svgWidget("home/close", color: theme.iconColor), ); diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart new file mode 100644 index 0000000000..0c5caeb840 --- /dev/null +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart @@ -0,0 +1,39 @@ +import 'package:flutter/material.dart'; +import 'dart:math'; + +const overlayContainerPadding = EdgeInsets.all(12); +const overlayContainerMaxWidth = 760.0; +const overlayContainerMinWidth = 320.0; + +class FlowyDialog extends StatelessWidget { + final Widget? title; + final Widget child; + final BoxConstraints? constraints; + final EdgeInsets padding; + const FlowyDialog({ + required this.child, + this.title, + this.constraints, + this.padding = overlayContainerPadding, + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + final windowSize = MediaQuery.of(context).size; + final size = windowSize * 0.7; + return SimpleDialog(title: title, children: [ + Material( + type: MaterialType.transparency, + child: Container( + padding: padding, + height: size.height, + width: max(min(size.width, overlayContainerMaxWidth), + overlayContainerMinWidth), + constraints: constraints, + child: child, + ), + ) + ]); + } +} diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart index 25507b8f6d..5525a3569d 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart @@ -109,6 +109,19 @@ class FlowyOverlay extends StatefulWidget { return state; } + static void show( + {required BuildContext context, + required Widget Function(BuildContext context) builder}) { + showDialog( + context: context, + builder: builder, + ); + } + + static void pop(BuildContext context) { + Navigator.of(context).pop(); + } + @override FlowyOverlayState createState() => FlowyOverlayState(); } diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_container.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_container.dart index 96b566b308..91206253b1 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_container.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_container.dart @@ -18,12 +18,14 @@ class OverlayContainer extends StatelessWidget { @override Widget build(BuildContext context) { - final theme = context.watch() ?? AppTheme.fromType(ThemeType.light); + final theme = + context.watch() ?? AppTheme.fromType(ThemeType.light); return Material( type: MaterialType.transparency, child: Container( padding: padding, - decoration: FlowyDecoration.decoration(theme.surface, theme.shadowColor.withOpacity(0.15)), + decoration: FlowyDecoration.decoration( + theme.surface, theme.shadowColor.withOpacity(0.15)), constraints: constraints, child: child, ), diff --git a/frontend/app_flowy/pubspec.lock b/frontend/app_flowy/pubspec.lock index 0f9421a563..b08897239c 100644 --- a/frontend/app_flowy/pubspec.lock +++ b/frontend/app_flowy/pubspec.lock @@ -28,7 +28,7 @@ packages: path: "packages/appflowy_board" relative: true source: path - version: "0.0.4" + version: "0.0.5" appflowy_editor: dependency: "direct main" description: