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: use popover in detail page

Browse Source
This commit is contained in:
Vincent Chan 2022-08-30 14:51:25 +08:00
parent a7f02ec7df
commit 01a79c69c3
6 changed files with 60 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
View File

@ -116,26 +116,3 @@ class _FieldNameCell extends StatelessWidget {
);
}
}
class FieldEditorPopOver {
static show(
BuildContext context, {
required BuildContext anchorContext,
required String gridId,
required String fieldName,
required IFieldTypeOptionLoader typeOptionLoader,
Key? key,
}) {
FlowyPopover.show(
context,
anchorContext: anchorContext,
builder: (BuildContext context) {
return FieldEditor(
gridId: gridId,
fieldName: fieldName,
typeOptionLoader: typeOptionLoader,
key: key);
},
);
}
}

20
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart
View File

@ -128,16 +128,16 @@ class _FieldTypeOptionEditorState extends State<FieldTypeOptionEditor> {
void _showOverlay(BuildContext context, Widget child,
{VoidCallback? onRemoved}) {
FlowyPopover.show(
context,
constraints: BoxConstraints.loose(const Size(460, 440)),
anchorContext: context,
anchorDirection: AnchorDirection.rightWithCenterAligned,
anchorOffset: const Offset(20, 0),
builder: (BuildContext context) {
return child;
},
);
// FlowyPopover.show(
// context,
// constraints: BoxConstraints.loose(const Size(460, 440)),
// anchorContext: context,
// anchorDirection: AnchorDirection.rightWithCenterAligned,
// anchorOffset: const Offset(20, 0),
// builder: (BuildContext context) {
// return child;
// },
// );
}
void _hideOverlay(BuildContext context) {

16
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart
View File

@ -157,13 +157,15 @@ class CreateFieldButton extends StatelessWidget {
return FlowyButton(
text: const FlowyText.medium('New column', fontSize: 12),
hoverColor: theme.shader6,
onTap: () => FieldEditorPopOver.show(
context,
anchorContext: context,
gridId: gridId,
fieldName: "",
typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId),
),
onTap: () {
// FieldEditorPopOver.show(
// context,
// anchorContext: context,
// gridId: gridId,
// fieldName: "",
// typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId),
// )
},
leftIcon: svgWidget("home/add"),
);
}

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

@ -13,6 +13,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:appflowy_popover/popover.dart';
import '../../layout/sizes.dart';
import '../cell/cell_accessory.dart';
@ -123,7 +124,7 @@ class _PropertyList extends StatelessWidget {
}
}
class _RowDetailCell extends StatelessWidget {
class _RowDetailCell extends StatefulWidget {
final GridCellIdentifier cellId;
final GridCellBuilder cellBuilder;
const _RowDetailCell({
@ -132,11 +133,18 @@ class _RowDetailCell extends StatelessWidget {
Key? key,
}) : super(key: key);
@override
State<StatefulWidget> createState() => _RowDetailCellState();
}
class _RowDetailCellState extends State<_RowDetailCell> {
final PopoverController popover = PopoverController();
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final style = _customCellStyle(theme, cellId.fieldType);
final cell = cellBuilder.build(cellId, style: style);
final style = _customCellStyle(theme, widget.cellId.fieldType);
final cell = widget.cellBuilder.build(widget.cellId, style: style);
final gesture = GestureDetector(
behavior: HitTestBehavior.translucent,
@ -157,8 +165,29 @@ class _RowDetailCell extends StatelessWidget {
children: [
SizedBox(
width: 150,
child: FieldCellButton(
field: cellId.field, onTap: () => _showFieldEditor(context)),
child: Popover(
controller: popover,
targetAnchor: Alignment.topRight,
followerAnchor: Alignment.topLeft,
offset: const Offset(20, 0),
popupBuilder: (context) {
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(240, 200)),
child: FieldEditor(
gridId: widget.cellId.gridId,
fieldName: widget.cellId.field.name,
typeOptionLoader: FieldTypeOptionLoader(
gridId: widget.cellId.gridId,
field: widget.cellId.field,
),
),
);
},
child: FieldCellButton(
field: widget.cellId.field,
onTap: () => popover.show(),
),
),
),
const HSpace(10),
Expanded(child: gesture),
@ -167,19 +196,6 @@ class _RowDetailCell extends StatelessWidget {
),
);
}
void _showFieldEditor(BuildContext context) {
FieldEditorPopOver.show(
context,
anchorContext: context,
gridId: cellId.gridId,
fieldName: cellId.field.name,
typeOptionLoader: FieldTypeOptionLoader(
gridId: cellId.gridId,
field: cellId.field,
),
);
}
}
GridCellStyle? _customCellStyle(AppTheme theme, FieldType fieldType) {

14
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart
View File

@ -119,13 +119,13 @@ class _GridPropertyCell extends StatelessWidget {
hoverColor: theme.hover,
leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
onTap: () {
FieldEditorPopOver.show(
context,
anchorContext: context,
gridId: gridId,
fieldName: field.name,
typeOptionLoader: FieldTypeOptionLoader(gridId: gridId, field: field),
);
// FieldEditorPopOver.show(
// context,
// anchorContext: context,
// gridId: gridId,
// fieldName: field.name,
// typeOptionLoader: FieldTypeOptionLoader(gridId: gridId, field: field),
// );
},
);
}

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

@ -25,50 +25,6 @@ class FlowyPopover extends StatefulWidget {
this.constraints,
}) : super(key: key);
static show(
BuildContext context, {
required Widget Function(BuildContext context) builder,
BuildContext? anchorContext,
Offset? anchorPosition,
AnchorDirection? anchorDirection,
Size? anchorSize,
Offset? anchorOffset,
BoxConstraints? constraints,
}) {
final offset = anchorOffset ?? Offset.zero;
Offset targetAnchorPosition = anchorPosition ?? Offset.zero;
Size targetAnchorSize = anchorSize ?? Size.zero;
if (anchorContext != null) {
RenderObject renderObject = anchorContext.findRenderObject()!;
assert(
renderObject is RenderBox,
'Unexpected non-RenderBox render object caught.',
);
final renderBox = renderObject as RenderBox;
targetAnchorPosition = renderBox.localToGlobal(Offset.zero);
targetAnchorSize = renderBox.size;
}
final anchorRect = Rect.fromLTWH(
targetAnchorPosition.dx + offset.dx,
targetAnchorPosition.dy + offset.dy,
targetAnchorSize.width,
targetAnchorSize.height,
);
showDialog(
barrierColor: Colors.transparent,
context: context,
builder: (BuildContext context) {
return FlowyPopover(
anchorRect: anchorRect,
anchorDirection: anchorDirection,
constraints: constraints,
builder: (BuildContext context) {
return builder(context);
});
});
}
@override
State<FlowyPopover> createState() => _FlowyPopoverState();
}