Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: flowy overlay

Browse Source
This commit is contained in:
Vincent Chan 2022-08-25 10:16:41 +08:00
parent cebee48248
commit 58ad84b7df
7 changed files with 100 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/app_flowy/lib/plugins/board/presentation/board_page.dart
View File

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

13
frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart
View File

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

63
frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart
View File

@ -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),
);

39
frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart Normal file
View File

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

13
frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart
View File

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

6
frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/overlay_container.dart
View File

@ -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,
),

2
frontend/app_flowy/pubspec.lock
View File

@ -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: