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: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/button.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
@ -29,7 +30,8 @@ class GridFieldCell extends StatelessWidget {
},
child: BlocBuilder<FieldCellBloc, FieldCellState>(
builder: (context, state) {
final button = Popover(
final button = AppFlowyStylePopover(
constraints: BoxConstraints.loose(const Size(240, 840)),
direction: PopoverDirection.bottomWithLeftAligned,
triggerActions: PopoverTriggerActionFlags.click,
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/plugins/grid/application/prelude.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/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/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
@ -32,38 +32,32 @@ class _GridFieldCellActionSheetState extends State<GridFieldCellActionSheet> {
Widget build(BuildContext context) {
if (_showFieldEditor) {
final field = widget.cellContext.field;
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(240, 200)),
child: FieldEditor(
return FieldEditor(
gridId: widget.cellContext.gridId,
fieldName: field.name,
typeOptionLoader: FieldTypeOptionLoader(
gridId: widget.cellContext.gridId,
fieldName: field.name,
typeOptionLoader: FieldTypeOptionLoader(
gridId: widget.cellContext.gridId,
field: field,
),
field: field,
),
);
}
return BlocProvider(
create: (context) =>
getIt<FieldActionSheetBloc>(param1: widget.cellContext),
child: OverlayContainer(
constraints: BoxConstraints.loose(const Size(240, 200)),
child: SingleChildScrollView(
child: Column(
children: [
_EditFieldButton(
cellContext: widget.cellContext,
onTap: () {
setState(() {
_showFieldEditor = true;
});
},
),
const VSpace(6),
_FieldOperationList(widget.cellContext, () {}),
],
),
child: SingleChildScrollView(
child: Column(
children: [
_EditFieldButton(
cellContext: widget.cellContext,
onTap: () {
setState(() {
_showFieldEditor = true;
});
},
),
const VSpace(6),
_FieldOperationList(widget.cellContext, () {}),
],
),
),
);
@ -159,8 +153,11 @@ class FieldActionCell extends StatelessWidget {
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return FlowyButton(
text: FlowyText.medium(action.title(),
fontSize: 12, color: enable ? null : theme.shader4),
text: FlowyText.medium(
action.title(),
fontSize: 12,
color: enable ? null : theme.shader4,
),
hoverColor: theme.hover,
onTap: () {
if (enable) {
@ -168,8 +165,10 @@ class FieldActionCell extends StatelessWidget {
onTap();
}
},
leftIcon: svgWidget(action.iconName(),
color: enable ? theme.iconColor : theme.disableIconColor),
leftIcon: svgWidget(
action.iconName(),
color: enable ? theme.iconColor : theme.disableIconColor,
),
);
}
}
@ -216,6 +215,7 @@ extension _FieldActionExtension on FieldAction {
.add(const FieldActionSheetEvent.duplicateField());
break;
case FieldAction.delete:
PopoverContainer.of(context).close();
NavigatorAlertDialog(
title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
confirm: () {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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