Skip to content

Commit 7bde75e

Browse files
vincentdchanvincentdchan
committed
feat: wrap appflowy style popover
1 parent 286781f commit 7bde75e

File tree

13 files changed

+151
-183
lines changed

13 files changed

+151
-183
lines changed

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
12
import 'package:flowy_infra_ui/style_widget/text.dart';
23
import 'package:flutter/widgets.dart';
34
import 'package:flutter_bloc/flutter_bloc.dart';
@@ -62,10 +63,11 @@ class _DateCellState extends GridCellState<GridDateCell> {
6263
value: _cellBloc,
6364
child: BlocBuilder<DateCellBloc, DateCellState>(
6465
builder: (context, state) {
65-
return Popover(
66+
return AppFlowyStylePopover(
6667
controller: _popover,
6768
offset: const Offset(0, 20),
6869
direction: PopoverDirection.bottomWithLeftAligned,
70+
constraints: BoxConstraints.loose(const Size(320, 500)),
6971
child: SizedBox.expand(
7072
child: GestureDetector(
7173
behavior: HitTestBehavior.opaque,

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,9 @@ class _DateCellEditor extends State<DateCellEditor> {
6464
return Container();
6565
}
6666

67-
return OverlayContainer(
68-
constraints: BoxConstraints.loose(const Size(320, 500)),
69-
child: _CellCalendarWidget(
70-
cellContext: widget.cellController,
71-
dateTypeOptionPB: _dateTypeOptionPB!,
72-
),
67+
return _CellCalendarWidget(
68+
cellContext: widget.cellController,
69+
dateTypeOptionPB: _dateTypeOptionPB!,
7370
);
7471
}
7572
}
@@ -302,23 +299,21 @@ class _DateTypeOptionButton extends StatelessWidget {
302299
return BlocSelector<DateCalBloc, DateCalState, DateTypeOptionPB>(
303300
selector: (state) => state.dateTypeOptionPB,
304301
builder: (context, dateTypeOptionPB) {
305-
return Popover(
302+
return AppFlowyStylePopover(
306303
triggerActions:
307304
PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
308305
offset: const Offset(20, 0),
306+
constraints: BoxConstraints.loose(const Size(140, 100)),
309307
child: FlowyButton(
310308
text: FlowyText.medium(title, fontSize: 12),
311309
hoverColor: theme.hover,
312310
margin: kMargin,
313311
rightIcon: svgWidget("grid/more", color: theme.iconColor),
314312
),
315313
popupBuilder: (BuildContext popContext) {
316-
return OverlayContainer(
317-
constraints: BoxConstraints.loose(const Size(140, 100)),
318-
child: _CalDateTimeSetting(
319-
dateTypeOptionPB: dateTypeOptionPB,
320-
onEvent: (event) => context.read<DateCalBloc>().add(event),
321-
),
314+
return _CalDateTimeSetting(
315+
dateTypeOptionPB: dateTypeOptionPB,
316+
onEvent: (event) => context.read<DateCalBloc>().add(event),
322317
);
323318
},
324319
);

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import 'package:app_flowy/plugins/grid/application/prelude.dart';
33
import 'package:appflowy_popover/popover.dart';
44

55
import 'package:flowy_infra/theme.dart';
6-
import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
6+
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
77
import 'package:flowy_infra_ui/style_widget/text.dart';
88
// ignore: unused_import
99
import 'package:flowy_sdk/log.dart';
@@ -194,27 +194,25 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
194194
alignment: AlignmentDirectional.center,
195195
fit: StackFit.expand,
196196
children: [
197-
Popover(
197+
AppFlowyStylePopover(
198198
controller: _popover,
199+
constraints: BoxConstraints.loose(
200+
Size(SelectOptionCellEditor.editorPanelWidth, 300)),
199201
offset: const Offset(0, 20),
200202
direction: PopoverDirection.bottomWithLeftAligned,
201203
// triggerActions: PopoverTriggerActionFlags.c,
202204
popupBuilder: (BuildContext context) {
203205
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
204206
widget.onFocus?.call(true);
205207
});
206-
return OverlayContainer(
207-
constraints: BoxConstraints.loose(
208-
Size(SelectOptionCellEditor.editorPanelWidth, 300)),
209-
child: SizedBox(
210-
width: SelectOptionCellEditor.editorPanelWidth,
211-
child: SelectOptionCellEditor(
212-
cellController: widget.cellControllerBuilder.build()
213-
as GridSelectOptionCellController,
214-
onDismissed: () {
215-
widget.onFocus?.call(false);
216-
},
217-
),
208+
return SizedBox(
209+
width: SelectOptionCellEditor.editorPanelWidth,
210+
child: SelectOptionCellEditor(
211+
cellController: widget.cellControllerBuilder.build()
212+
as GridSelectOptionCellController,
213+
onDismissed: () {
214+
widget.onFocus?.call(false);
215+
},
218216
),
219217
);
220218
},

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -251,9 +251,10 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
251251
@override
252252
Widget build(BuildContext context) {
253253
final theme = context.watch<AppTheme>();
254-
return Popover(
254+
return AppFlowyStylePopover(
255255
controller: _popoverController,
256256
offset: const Offset(20, 0),
257+
constraints: BoxConstraints.loose(const Size(200, 300)),
257258
child: SizedBox(
258259
height: GridSize.typeOptionItemHeight,
259260
child: Row(
@@ -286,23 +287,20 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
286287
),
287288
),
288289
popupBuilder: (BuildContext popoverContext) {
289-
return OverlayContainer(
290-
constraints: BoxConstraints.loose(const Size(200, 300)),
291-
child: SelectOptionTypeOptionEditor(
292-
option: widget.option,
293-
onDeleted: () {
294-
context
295-
.read<SelectOptionCellEditorBloc>()
296-
.add(SelectOptionEditorEvent.deleteOption(widget.option));
297-
},
298-
onUpdated: (updatedOption) {
299-
context
300-
.read<SelectOptionCellEditorBloc>()
301-
.add(SelectOptionEditorEvent.updateOption(updatedOption));
302-
},
303-
key: ValueKey(widget.option
304-
.id), // Use ValueKey to refresh the UI, otherwise, it will remain the old value.
305-
),
290+
return SelectOptionTypeOptionEditor(
291+
option: widget.option,
292+
onDeleted: () {
293+
context
294+
.read<SelectOptionCellEditorBloc>()
295+
.add(SelectOptionEditorEvent.deleteOption(widget.option));
296+
},
297+
onUpdated: (updatedOption) {
298+
context
299+
.read<SelectOptionCellEditorBloc>()
300+
.add(SelectOptionEditorEvent.updateOption(updatedOption));
301+
},
302+
key: ValueKey(widget.option
303+
.id), // Use ValueKey to refresh the UI, otherwise, it will remain the old value.
306304
);
307305
},
308306
);

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,16 @@ class FieldTypeOptionEditor extends StatelessWidget {
6464
final theme = context.watch<AppTheme>();
6565
return SizedBox(
6666
height: GridSize.typeOptionItemHeight,
67-
child: Popover(
67+
child: AppFlowyStylePopover(
68+
constraints: BoxConstraints.loose(const Size(460, 440)),
6869
triggerActions:
6970
PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
7071
mutex: popoverMutex,
7172
offset: const Offset(20, 0),
7273
popupBuilder: (context) {
73-
final list = FieldTypeList(onSelectField: (newFieldType) {
74+
return FieldTypeList(onSelectField: (newFieldType) {
7475
dataController.switchToField(newFieldType);
7576
});
76-
return OverlayContainer(
77-
constraints: BoxConstraints.loose(const Size(460, 440)),
78-
child: list,
79-
);
8077
},
8178
child: FlowyButton(
8279
text: FlowyText.medium(field.fieldType.title(), fontSize: 12),

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import 'package:easy_localization/easy_localization.dart';
77
import 'package:appflowy_popover/popover.dart';
88
import 'package:flowy_infra/image.dart';
99
import 'package:flowy_infra/theme.dart';
10+
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
1011
import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
1112
import 'package:flowy_infra_ui/style_widget/button.dart';
1213
import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -176,9 +177,10 @@ class CreateFieldButton extends StatelessWidget {
176177
Widget build(BuildContext context) {
177178
final theme = context.watch<AppTheme>();
178179

179-
return Popover(
180+
return AppFlowyStylePopover(
180181
triggerActions: PopoverTriggerActionFlags.click,
181182
direction: PopoverDirection.bottomWithRightAligned,
183+
constraints: BoxConstraints.loose(const Size(240, 200)),
182184
child: FlowyButton(
183185
text: FlowyText.medium(
184186
LocaleKeys.grid_field_newColumn.tr(),
@@ -189,13 +191,10 @@ class CreateFieldButton extends StatelessWidget {
189191
leftIcon: svgWidget("home/add"),
190192
),
191193
popupBuilder: (BuildContext popover) {
192-
return OverlayContainer(
193-
constraints: BoxConstraints.loose(const Size(240, 200)),
194-
child: FieldEditor(
195-
gridId: gridId,
196-
fieldName: "",
197-
typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId),
198-
),
194+
return FieldEditor(
195+
gridId: gridId,
196+
fieldName: "",
197+
typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId),
199198
);
200199
},
201200
);

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -62,46 +62,43 @@ class DateTypeOptionWidget extends TypeOptionWidget {
6262
}
6363

6464
Widget _renderDateFormatButton(BuildContext context, DateFormat dataFormat) {
65-
return Popover(
65+
return AppFlowyStylePopover(
6666
mutex: popoverMutex,
6767
triggerActions:
6868
PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
6969
offset: const Offset(20, 0),
70+
constraints: BoxConstraints.loose(const Size(460, 440)),
7071
popupBuilder: (popoverContext) {
71-
return OverlayContainer(
72-
constraints: BoxConstraints.loose(const Size(460, 440)),
73-
child: DateFormatList(
74-
selectedFormat: dataFormat,
75-
onSelected: (format) {
76-
context
77-
.read<DateTypeOptionBloc>()
78-
.add(DateTypeOptionEvent.didSelectDateFormat(format));
79-
PopoverContainer.of(popoverContext).closeAll();
80-
},
81-
),
72+
return DateFormatList(
73+
selectedFormat: dataFormat,
74+
onSelected: (format) {
75+
context
76+
.read<DateTypeOptionBloc>()
77+
.add(DateTypeOptionEvent.didSelectDateFormat(format));
78+
PopoverContainer.of(popoverContext).closeAll();
79+
},
8280
);
8381
},
8482
child: const DateFormatButton(),
8583
);
8684
}
8785

8886
Widget _renderTimeFormatButton(BuildContext context, TimeFormat timeFormat) {
89-
return Popover(
87+
return AppFlowyStylePopover(
9088
mutex: popoverMutex,
9189
triggerActions:
9290
PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
9391
offset: const Offset(20, 0),
92+
constraints: BoxConstraints.loose(const Size(460, 440)),
9493
popupBuilder: (BuildContext popoverContext) {
95-
return OverlayContainer(
96-
constraints: BoxConstraints.loose(const Size(460, 440)),
97-
child: TimeFormatList(
98-
selectedFormat: timeFormat,
99-
onSelected: (format) {
100-
context
101-
.read<DateTypeOptionBloc>()
102-
.add(DateTypeOptionEvent.didSelectTimeFormat(format));
103-
PopoverContainer.of(popoverContext).closeAll();
104-
}),
94+
return TimeFormatList(
95+
selectedFormat: timeFormat,
96+
onSelected: (format) {
97+
context
98+
.read<DateTypeOptionBloc>()
99+
.add(DateTypeOptionEvent.didSelectTimeFormat(format));
100+
PopoverContainer.of(popoverContext).closeAll();
101+
},
105102
);
106103
},
107104
child: TimeFormatButton(timeFormat: timeFormat),

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,12 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
5555
listener: (context, state) =>
5656
typeOptionContext.typeOption = state.typeOption,
5757
builder: (context, state) {
58-
return Popover(
58+
return AppFlowyStylePopover(
5959
mutex: popoverMutex,
6060
triggerActions: PopoverTriggerActionFlags.hover |
6161
PopoverTriggerActionFlags.click,
6262
offset: const Offset(20, 0),
63+
constraints: BoxConstraints.loose(const Size(460, 440)),
6364
child: FlowyButton(
6465
margin: GridSize.typeOptionContentInsets,
6566
hoverColor: theme.hover,
@@ -76,17 +77,14 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
7677
),
7778
),
7879
popupBuilder: (BuildContext popoverContext) {
79-
return OverlayContainer(
80-
constraints: BoxConstraints.loose(const Size(460, 440)),
81-
child: NumberFormatList(
82-
onSelected: (format) {
83-
context
84-
.read<NumberTypeOptionBloc>()
85-
.add(NumberTypeOptionEvent.didSelectFormat(format));
86-
PopoverContainer.of(popoverContext).closeAll();
87-
},
88-
selectedFormat: state.typeOption.format,
89-
),
80+
return NumberFormatList(
81+
onSelected: (format) {
82+
context
83+
.read<NumberTypeOptionBloc>()
84+
.add(NumberTypeOptionEvent.didSelectFormat(format));
85+
PopoverContainer.of(popoverContext).closeAll();
86+
},
87+
selectedFormat: state.typeOption.format,
9088
);
9189
},
9290
);

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/select_opti
22
import 'package:appflowy_popover/popover.dart';
33
import 'package:flowy_infra/image.dart';
44
import 'package:flowy_infra/theme.dart';
5+
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
56
import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
67
import 'package:flowy_infra_ui/style_widget/button.dart';
78
import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -180,10 +181,11 @@ class _OptionCellState extends State<_OptionCell> {
180181
Widget build(BuildContext context) {
181182
final theme = context.watch<AppTheme>();
182183

183-
return Popover(
184+
return AppFlowyStylePopover(
184185
controller: _popoverController,
185186
mutex: widget.popoverMutex,
186187
offset: const Offset(20, 0),
188+
constraints: BoxConstraints.loose(const Size(460, 440)),
187189
child: SizedBox(
188190
height: GridSize.typeOptionItemHeight,
189191
child: SelectOptionTagCell(
@@ -200,24 +202,21 @@ class _OptionCellState extends State<_OptionCell> {
200202
),
201203
),
202204
popupBuilder: (BuildContext popoverContext) {
203-
return OverlayContainer(
204-
constraints: BoxConstraints.loose(const Size(460, 440)),
205-
child: SelectOptionTypeOptionEditor(
206-
option: widget.option,
207-
onDeleted: () {
208-
context
209-
.read<SelectOptionTypeOptionBloc>()
210-
.add(SelectOptionTypeOptionEvent.deleteOption(widget.option));
211-
PopoverContainer.of(popoverContext).closeAll();
212-
},
213-
onUpdated: (updatedOption) {
214-
context
215-
.read<SelectOptionTypeOptionBloc>()
216-
.add(SelectOptionTypeOptionEvent.updateOption(updatedOption));
217-
PopoverContainer.of(popoverContext).closeAll();
218-
},
219-
key: ValueKey(widget.option.id),
220-
),
205+
return SelectOptionTypeOptionEditor(
206+
option: widget.option,
207+
onDeleted: () {
208+
context
209+
.read<SelectOptionTypeOptionBloc>()
210+
.add(SelectOptionTypeOptionEvent.deleteOption(widget.option));
211+
PopoverContainer.of(popoverContext).closeAll();
212+
},
213+
onUpdated: (updatedOption) {
214+
context
215+
.read<SelectOptionTypeOptionBloc>()
216+
.add(SelectOptionTypeOptionEvent.updateOption(updatedOption));
217+
PopoverContainer.of(popoverContext).closeAll();
218+
},
219+
key: ValueKey(widget.option.id),
221220
);
222221
},
223222
);

0 commit comments

Comments
 (0)