chore: replace Popover with Appflowy style popover and fix some bugs

This commit is contained in:
nathan 2022-09-18 16:50:19 +08:00
parent c493ba79e0
commit bda16b136b
8 changed files with 51 additions and 67 deletions

View File

@ -3,6 +3,7 @@ import 'package:app_flowy/plugins/grid/application/field/field_service.dart';
import 'package:appflowy_popover/popover.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/style_widget/button.dart'; import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/style_widget/text.dart';
@ -29,7 +30,8 @@ class GridFieldCell extends StatelessWidget {
}, },
child: BlocBuilder<FieldCellBloc, FieldCellState>( child: BlocBuilder<FieldCellBloc, FieldCellState>(
builder: (context, state) { builder: (context, state) {
final button = Popover( final button = AppFlowyStylePopover(
constraints: BoxConstraints.loose(const Size(240, 840)),
direction: PopoverDirection.bottomWithLeftAligned, direction: PopoverDirection.bottomWithLeftAligned,
triggerActions: PopoverTriggerActionFlags.click, triggerActions: PopoverTriggerActionFlags.click,
offset: const Offset(0, 10), offset: const Offset(0, 10),

View File

@ -3,9 +3,9 @@ import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_editor.
import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/startup/startup.dart';
import 'package:app_flowy/plugins/grid/application/prelude.dart'; import 'package:app_flowy/plugins/grid/application/prelude.dart';
import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart'; import 'package:app_flowy/workspace/presentation/widgets/dialogs.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/style_widget/button.dart'; import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flowy_infra_ui/widget/spacing.dart';
@ -32,23 +32,18 @@ class _GridFieldCellActionSheetState extends State<GridFieldCellActionSheet> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (_showFieldEditor) { if (_showFieldEditor) {
final field = widget.cellContext.field; final field = widget.cellContext.field;
return OverlayContainer( return FieldEditor(
constraints: BoxConstraints.loose(const Size(240, 200)),
child: FieldEditor(
gridId: widget.cellContext.gridId, gridId: widget.cellContext.gridId,
fieldName: field.name, fieldName: field.name,
typeOptionLoader: FieldTypeOptionLoader( typeOptionLoader: FieldTypeOptionLoader(
gridId: widget.cellContext.gridId, gridId: widget.cellContext.gridId,
field: field, field: field,
), ),
),
); );
} }
return BlocProvider( return BlocProvider(
create: (context) => create: (context) =>
getIt<FieldActionSheetBloc>(param1: widget.cellContext), getIt<FieldActionSheetBloc>(param1: widget.cellContext),
child: OverlayContainer(
constraints: BoxConstraints.loose(const Size(240, 200)),
child: SingleChildScrollView( child: SingleChildScrollView(
child: Column( child: Column(
children: [ children: [
@ -65,7 +60,6 @@ class _GridFieldCellActionSheetState extends State<GridFieldCellActionSheet> {
], ],
), ),
), ),
),
); );
} }
} }
@ -159,8 +153,11 @@ class FieldActionCell extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.watch<AppTheme>(); final theme = context.watch<AppTheme>();
return FlowyButton( return FlowyButton(
text: FlowyText.medium(action.title(), text: FlowyText.medium(
fontSize: 12, color: enable ? null : theme.shader4), action.title(),
fontSize: 12,
color: enable ? null : theme.shader4,
),
hoverColor: theme.hover, hoverColor: theme.hover,
onTap: () { onTap: () {
if (enable) { if (enable) {
@ -168,8 +165,10 @@ class FieldActionCell extends StatelessWidget {
onTap(); onTap();
} }
}, },
leftIcon: svgWidget(action.iconName(), leftIcon: svgWidget(
color: enable ? theme.iconColor : theme.disableIconColor), action.iconName(),
color: enable ? theme.iconColor : theme.disableIconColor,
),
); );
} }
} }
@ -216,6 +215,7 @@ extension _FieldActionExtension on FieldAction {
.add(const FieldActionSheetEvent.duplicateField()); .add(const FieldActionSheetEvent.duplicateField());
break; break;
case FieldAction.delete: case FieldAction.delete:
PopoverContainer.of(context).close();
NavigatorAlertDialog( NavigatorAlertDialog(
title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(), title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
confirm: () { confirm: () {

View File

@ -70,6 +70,7 @@ class _FieldEditorState extends State<FieldEditor> {
), ),
const VSpace(10), const VSpace(10),
_FieldNameTextField(popoverMutex: popoverMutex), _FieldNameTextField(popoverMutex: popoverMutex),
const VSpace(10),
..._addDeleteFieldButton(state), ..._addDeleteFieldButton(state),
_FieldTypeOptionCell(popoverMutex: popoverMutex), _FieldTypeOptionCell(popoverMutex: popoverMutex),
], ],
@ -84,7 +85,6 @@ class _FieldEditorState extends State<FieldEditor> {
return []; return [];
} }
return [ return [
const VSpace(10),
_DeleteFieldButton( _DeleteFieldButton(
popoverMutex: popoverMutex, popoverMutex: popoverMutex,
onDeleted: () { onDeleted: () {

View File

@ -47,10 +47,6 @@ class FieldTypeList extends StatelessWidget with FlowyOverlayDelegate {
), ),
); );
} }
static String identifier() {
return (FieldTypeList).toString();
}
} }
class FieldTypeCell extends StatelessWidget { class FieldTypeCell extends StatelessWidget {

View File

@ -75,7 +75,7 @@ class DateTypeOptionWidget extends TypeOptionWidget {
context context
.read<DateTypeOptionBloc>() .read<DateTypeOptionBloc>()
.add(DateTypeOptionEvent.didSelectDateFormat(format)); .add(DateTypeOptionEvent.didSelectDateFormat(format));
PopoverContainer.of(popoverContext).closeAll(); PopoverContainer.of(popoverContext).close();
}, },
); );
}, },
@ -97,7 +97,7 @@ class DateTypeOptionWidget extends TypeOptionWidget {
context context
.read<DateTypeOptionBloc>() .read<DateTypeOptionBloc>()
.add(DateTypeOptionEvent.didSelectTimeFormat(format)); .add(DateTypeOptionEvent.didSelectTimeFormat(format));
PopoverContainer.of(popoverContext).closeAll(); PopoverContainer.of(popoverContext).close();
}, },
); );
}, },
@ -202,11 +202,9 @@ class DateFormatList extends StatelessWidget {
final cells = DateFormat.values.map((format) { final cells = DateFormat.values.map((format) {
return DateFormatCell( return DateFormatCell(
dateFormat: format, dateFormat: format,
onSelected: (format) { onSelected: onSelected,
onSelected(format); isSelected: selectedFormat == format,
FlowyOverlay.of(context).remove(DateFormatList.identifier()); );
},
isSelected: selectedFormat == format);
}).toList(); }).toList();
return SizedBox( return SizedBox(
@ -224,10 +222,6 @@ class DateFormatList extends StatelessWidget {
), ),
); );
} }
static String identifier() {
return (DateFormatList).toString();
}
} }
class DateFormatCell extends StatelessWidget { class DateFormatCell extends StatelessWidget {
@ -293,10 +287,8 @@ class TimeFormatList extends StatelessWidget {
return TimeFormatCell( return TimeFormatCell(
isSelected: format == selectedFormat, isSelected: format == selectedFormat,
timeFormat: format, timeFormat: format,
onSelected: (format) { onSelected: onSelected,
onSelected(format); );
FlowyOverlay.of(context).remove(TimeFormatList.identifier());
});
}).toList(); }).toList();
return SizedBox( return SizedBox(
@ -314,10 +306,6 @@ class TimeFormatList extends StatelessWidget {
), ),
); );
} }
static String identifier() {
return (TimeFormatList).toString();
}
} }
class TimeFormatCell extends StatelessWidget { class TimeFormatCell extends StatelessWidget {

View File

@ -82,7 +82,7 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
context context
.read<NumberTypeOptionBloc>() .read<NumberTypeOptionBloc>()
.add(NumberTypeOptionEvent.didSelectFormat(format)); .add(NumberTypeOptionEvent.didSelectFormat(format));
PopoverContainer.of(popoverContext).closeAll(); PopoverContainer.of(popoverContext).close();
}, },
selectedFormat: state.typeOption.format, selectedFormat: state.typeOption.format,
); );
@ -145,10 +145,6 @@ class NumberFormatList extends StatelessWidget {
), ),
); );
} }
static String identifier() {
return (NumberFormatList).toString();
}
} }
class NumberFormatCell extends StatelessWidget { class NumberFormatCell extends StatelessWidget {

View File

@ -207,13 +207,13 @@ class _OptionCellState extends State<_OptionCell> {
context context
.read<SelectOptionTypeOptionBloc>() .read<SelectOptionTypeOptionBloc>()
.add(SelectOptionTypeOptionEvent.deleteOption(widget.option)); .add(SelectOptionTypeOptionEvent.deleteOption(widget.option));
PopoverContainer.of(popoverContext).closeAll(); PopoverContainer.of(popoverContext).close();
}, },
onUpdated: (updatedOption) { onUpdated: (updatedOption) {
context context
.read<SelectOptionTypeOptionBloc>() .read<SelectOptionTypeOptionBloc>()
.add(SelectOptionTypeOptionEvent.updateOption(updatedOption)); .add(SelectOptionTypeOptionEvent.updateOption(updatedOption));
PopoverContainer.of(popoverContext).closeAll(); PopoverContainer.of(popoverContext).close();
}, },
key: ValueKey(widget.option.id), key: ValueKey(widget.option.id),
); );

View File

@ -131,8 +131,10 @@ class _GridPropertyCell extends StatelessWidget {
return FieldEditor( return FieldEditor(
gridId: gridId, gridId: gridId,
fieldName: fieldContext.name, fieldName: fieldContext.name,
typeOptionLoader: typeOptionLoader: FieldTypeOptionLoader(
FieldTypeOptionLoader(gridId: gridId, field: fieldContext.field), gridId: gridId,
field: fieldContext.field,
),
); );
}, },
); );