From 8bab4cce613440c0ae8d49defd021cfc3727c81a Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Tue, 30 Aug 2022 19:32:13 +0800 Subject: [PATCH] feat: use pop over for date selector --- .../widgets/cell/date_cell/date_editor.dart | 116 +++++++++--------- .../widgets/toolbar/grid_toolbar.dart | 46 ++++++- 2 files changed, 98 insertions(+), 64 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart index c5a34517f4..f651baef9d 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart @@ -1,7 +1,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:app_flowy/plugins/grid/application/cell/date_cal_bloc.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; -import 'package:app_flowy/startup/tasks/platform_service.dart'; +import 'package:appflowy_popover/popover.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; @@ -166,17 +166,14 @@ class _CellCalendarWidget extends StatelessWidget { ); }, onDaySelected: (selectedDay, focusedDay) { - _CalDateTimeSetting.hide(context); context .read() .add(DateCalEvent.selectDay(selectedDay)); }, onFormatChanged: (format) { - _CalDateTimeSetting.hide(context); context.read().add(DateCalEvent.setCalFormat(format)); }, onPageChanged: (focusedDay) { - _CalDateTimeSetting.hide(context); context .read() .add(DateCalEvent.setFocusedDay(focusedDay)); @@ -244,7 +241,6 @@ class _TimeTextFieldState extends State<_TimeTextField> { if (widget.bloc.state.dateTypeOptionPB.includeTime) { _focusNode.addListener(() { if (mounted) { - _CalDateTimeSetting.hide(context); widget.bloc.add(DateCalEvent.setTime(_controller.text)); } }); @@ -307,25 +303,31 @@ class _DateTypeOptionButton extends StatelessWidget { return BlocSelector( selector: (state) => state.dateTypeOptionPB, builder: (context, dateTypeOptionPB) { - return FlowyButton( - text: FlowyText.medium(title, fontSize: 12), - hoverColor: theme.hover, - margin: kMargin, - onTap: () => _showTimeSetting(dateTypeOptionPB, context), - rightIcon: svgWidget("grid/more", color: theme.iconColor), + return Popover( + triggerActions: + PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click, + targetAnchor: Alignment.topRight, + followerAnchor: Alignment.topLeft, + offset: const Offset(20, 0), + child: FlowyButton( + text: FlowyText.medium(title, fontSize: 12), + hoverColor: theme.hover, + margin: kMargin, + rightIcon: svgWidget("grid/more", color: theme.iconColor), + ), + popupBuilder: (BuildContext popContext) { + return OverlayContainer( + constraints: BoxConstraints.loose(const Size(140, 100)), + child: _CalDateTimeSetting( + dateTypeOptionPB: dateTypeOptionPB, + onEvent: (event) => context.read().add(event), + ), + ); + }, ); }, ); } - - void _showTimeSetting( - DateTypeOptionPB dateTypeOptionPB, BuildContext context) { - final setting = _CalDateTimeSetting( - dateTypeOptionPB: dateTypeOptionPB, - onEvent: (event) => context.read().add(event), - ); - setting.show(context); - } } class _CalDateTimeSetting extends StatefulWidget { @@ -337,53 +339,51 @@ class _CalDateTimeSetting extends StatefulWidget { @override State<_CalDateTimeSetting> createState() => _CalDateTimeSettingState(); - - static String identifier() { - return (_CalDateTimeSetting).toString(); - } - - void show(BuildContext context) { - hide(context); - FlowyOverlay.of(context).insertWithAnchor( - widget: OverlayContainer( - child: this, - constraints: BoxConstraints.loose(const Size(140, 100)), - ), - identifier: _CalDateTimeSetting.identifier(), - anchorContext: context, - anchorDirection: AnchorDirection.rightWithCenterAligned, - anchorOffset: const Offset(20, 0), - ); - } - - static void hide(BuildContext context) { - FlowyOverlay.of(context).remove(identifier()); - } } class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { String? overlayIdentifier; + final _popoverMutex = PopoverMutex(); @override Widget build(BuildContext context) { List children = [ - DateFormatButton(onTap: () { - final list = DateFormatList( - selectedFormat: widget.dateTypeOptionPB.dateFormat, - onSelected: (format) => - widget.onEvent(DateCalEvent.setDateFormat(format)), - ); - _showOverlay(context, list); - }), - TimeFormatButton( - timeFormat: widget.dateTypeOptionPB.timeFormat, - onTap: () { - final list = TimeFormatList( - selectedFormat: widget.dateTypeOptionPB.timeFormat, - onSelected: (format) => - widget.onEvent(DateCalEvent.setTimeFormat(format)), + Popover( + mutex: _popoverMutex, + triggerActions: + PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click, + child: const DateFormatButton(), + targetAnchor: Alignment.topRight, + followerAnchor: Alignment.topLeft, + offset: const Offset(20, 0), + popupBuilder: (BuildContext context) { + return OverlayContainer( + constraints: BoxConstraints.loose(const Size(460, 440)), + child: DateFormatList( + selectedFormat: widget.dateTypeOptionPB.dateFormat, + onSelected: (format) => + widget.onEvent(DateCalEvent.setDateFormat(format)), + ), + ); + }, + ), + Popover( + mutex: _popoverMutex, + triggerActions: + PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click, + child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat), + targetAnchor: Alignment.topRight, + followerAnchor: Alignment.topLeft, + offset: const Offset(20, 0), + popupBuilder: (BuildContext context) { + return OverlayContainer( + constraints: BoxConstraints.loose(const Size(460, 440)), + child: TimeFormatList( + selectedFormat: widget.dateTypeOptionPB.timeFormat, + onSelected: (format) => + widget.onEvent(DateCalEvent.setTimeFormat(format)), + ), ); - _showOverlay(context, list); }, ), ]; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart index 4ced06bf99..e6eb1bf41a 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart @@ -1,5 +1,8 @@ +import 'package:appflowy_popover/popover.dart'; +import 'package:app_flowy/plugins/grid/application/setting/setting_bloc.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/extension.dart'; import 'package:flowy_infra_ui/style_widget/icon_button.dart'; import 'package:flutter/material.dart'; @@ -7,6 +10,7 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import '../../../application/field/field_cache.dart'; import '../../layout/sizes.dart'; +import 'grid_property.dart'; import 'grid_setting.dart'; class GridToolbarContext { @@ -49,12 +53,42 @@ class _SettingButton extends StatelessWidget { @override Widget build(BuildContext context) { final theme = context.watch(); - return FlowyIconButton( - hoverColor: theme.hover, - width: 22, - onPressed: () => GridSettingList.show(context, settingContext), - icon: - svgWidget("grid/setting/setting").padding(horizontal: 3, vertical: 3), + return Popover( + triggerActions: PopoverTriggerActionFlags.click, + targetAnchor: Alignment.bottomLeft, + followerAnchor: Alignment.topLeft, + offset: const Offset(0, 10), + child: FlowyIconButton( + width: 22, + hoverColor: theme.hover, + icon: svgWidget("grid/setting/setting") + .padding(horizontal: 3, vertical: 3), + ), + popupBuilder: (BuildContext context) { + return OverlayContainer( + constraints: BoxConstraints.loose(const Size(140, 400)), + child: GridSettingList( + settingContext: settingContext, + onAction: (action, settingContext) { + switch (action) { + case GridSettingAction.filter: + break; + case GridSettingAction.sortBy: + break; + case GridSettingAction.properties: + GridPropertyList( + gridId: settingContext.gridId, + fieldCache: settingContext.fieldCache) + .show(context); + break; + } + }, + ), + ); + }, ); + // return FlowyIconButton( + // onPressed: () => GridSettingList.show(context, settingContext), + // ); } }