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

refactor: number field to use popover

Browse Source
This commit is contained in:
Vincent Chan 2022-08-30 14:13:47 +08:00
parent bfb60dcaec
commit a7f02ec7df
2 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/builder.dart
View File

@ -106,6 +106,7 @@ TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
dataController: dataController, dataController: dataController,
), ),
overlayDelegate, overlayDelegate,
popoverMutex,
); );
case FieldType.RichText: case FieldType.RichText:
return RichTextTypeOptionWidgetBuilder( return RichTextTypeOptionWidgetBuilder(

44
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart
View File

@ -1,6 +1,7 @@
import 'package:app_flowy/plugins/grid/application/field/type_option/number_bloc.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/number_bloc.dart';
import 'package:app_flowy/plugins/grid/application/field/type_option/number_format_bloc.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/number_format_bloc.dart';
import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
import 'package:appflowy_popover/popover.dart';
import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@ -24,9 +25,11 @@ class NumberTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
NumberTypeOptionWidgetBuilder( NumberTypeOptionWidgetBuilder(
NumberTypeOptionContext typeOptionContext, NumberTypeOptionContext typeOptionContext,
TypeOptionOverlayDelegate overlayDelegate, TypeOptionOverlayDelegate overlayDelegate,
PopoverMutex popoverMutex,
) : _widget = NumberTypeOptionWidget( ) : _widget = NumberTypeOptionWidget(
typeOptionContext: typeOptionContext, typeOptionContext: typeOptionContext,
overlayDelegate: overlayDelegate, overlayDelegate: overlayDelegate,
popoverMutex: popoverMutex,
); );
@override @override
@ -36,9 +39,11 @@ class NumberTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
class NumberTypeOptionWidget extends TypeOptionWidget { class NumberTypeOptionWidget extends TypeOptionWidget {
final TypeOptionOverlayDelegate overlayDelegate; final TypeOptionOverlayDelegate overlayDelegate;
final NumberTypeOptionContext typeOptionContext; final NumberTypeOptionContext typeOptionContext;
final PopoverMutex popoverMutex;
const NumberTypeOptionWidget({ const NumberTypeOptionWidget({
required this.typeOptionContext, required this.typeOptionContext,
required this.overlayDelegate, required this.overlayDelegate,
required this.popoverMutex,
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
@ -47,6 +52,14 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
} }
class _NumberTypeOptionWidgetState extends State<NumberTypeOptionWidget> { class _NumberTypeOptionWidgetState extends State<NumberTypeOptionWidget> {
late PopoverController controller;
@override
void initState() {
controller = PopoverController(mutex: widget.popoverMutex);
super.initState();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.watch<AppTheme>(); final theme = context.watch<AppTheme>();
@ -59,7 +72,15 @@ class _NumberTypeOptionWidgetState extends State<NumberTypeOptionWidget> {
listener: (context, state) => listener: (context, state) =>
widget.typeOptionContext.typeOption = state.typeOption, widget.typeOptionContext.typeOption = state.typeOption,
builder: (context, state) { builder: (context, state) {
return FlowyButton( return Popover(
controller: controller,
targetAnchor: Alignment.topRight,
followerAnchor: Alignment.topLeft,
offset: const Offset(20, 0),
child: FlowyButton(
margin: GridSize.typeOptionContentInsets,
hoverColor: theme.hover,
rightIcon: svgWidget("grid/more", color: theme.iconColor),
text: Row( text: Row(
children: [ children: [
FlowyText.medium(LocaleKeys.grid_field_numberFormat.tr(), FlowyText.medium(LocaleKeys.grid_field_numberFormat.tr(),
@ -70,23 +91,26 @@ class _NumberTypeOptionWidgetState extends State<NumberTypeOptionWidget> {
fontSize: 12), fontSize: 12),
], ],
), ),
margin: GridSize.typeOptionContentInsets, onTap: () => controller.show(),
hoverColor: theme.hover, onHover: (hover) {
onTap: () { if (hover) {
final list = NumberFormatList( controller.show();
}
},
),
popupBuilder: (BuildContext context) {
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(460, 440)),
child: NumberFormatList(
onSelected: (format) { onSelected: (format) {
context context
.read<NumberTypeOptionBloc>() .read<NumberTypeOptionBloc>()
.add(NumberTypeOptionEvent.didSelectFormat(format)); .add(NumberTypeOptionEvent.didSelectFormat(format));
}, },
selectedFormat: state.typeOption.format, selectedFormat: state.typeOption.format,
); ),
widget.overlayDelegate.showOverlay(
context,
list,
); );
}, },
rightIcon: svgWidget("grid/more", color: theme.iconColor),
); );
}, },
), ),