feat: flowy overlay

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,
+          );
+        });
   }
 }
 

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,
+          );
+        });
   }
 }
 

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<RowDetailPage> 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<RowDetailPage> {
   @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<AppTheme>();
     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),
     );

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,
+        ),
+      )
+    ]);
+  }
+}

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();
 }

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?>() ?? AppTheme.fromType(ThemeType.light);
+    final theme =
+        context.watch<AppTheme?>() ?? 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,
       ),

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: