Skip to content

Commit 4f34068

Browse files
appflowyappflowy
authored
Merge pull request #1045 from AppFlowy-IO/feat/wrap-appflowy-style-popover
2 parents 8856b9a + 520d5c2 commit 4f34068

File tree

26 files changed

+291
-308
lines changed

26 files changed

+291
-308
lines changed

‎frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
22
import 'package:app_flowy/plugins/board/application/toolbar/board_setting_bloc.dart';
33
import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
44
import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
5+
import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_group.dart';
56
import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_property.dart';
7+
import 'package:appflowy_popover/popover.dart';
68
import 'package:easy_localization/easy_localization.dart';
79
import 'package:flowy_infra/image.dart';
810
import 'package:flowy_infra/theme.dart';
9-
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
1011
import 'package:flowy_infra_ui/style_widget/button.dart';
1112
import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
1213
import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -141,10 +142,12 @@ extension _GridSettingExtension on BoardSettingAction {
141142
}
142143

143144
class BoardSettingListPopover extends StatefulWidget {
145+
final PopoverController popoverController;
144146
final BoardSettingContext settingContext;
145147

146148
const BoardSettingListPopover({
147149
Key? key,
150+
required this.popoverController,
148151
required this.settingContext,
149152
}) : super(key: key);
150153

@@ -153,36 +156,33 @@ class BoardSettingListPopover extends StatefulWidget {
153156
}
154157

155158
class _BoardSettingListPopoverState extends State<BoardSettingListPopover> {
156-
bool _showGridPropertyList = false;
159+
BoardSettingAction? _action;
157160

158161
@override
159162
Widget build(BuildContext context) {
160-
if (_showGridPropertyList) {
161-
return OverlayContainer(
162-
constraints: BoxConstraints.loose(const Size(260, 400)),
163-
child: GridPropertyList(
164-
gridId: widget.settingContext.viewId,
165-
fieldController: widget.settingContext.fieldController,
166-
),
167-
);
163+
if (_action != null) {
164+
switch (_action!) {
165+
case BoardSettingAction.groups:
166+
return GridGroupList(
167+
viewId: widget.settingContext.viewId,
168+
fieldController: widget.settingContext.fieldController,
169+
onDismissed: () {
170+
widget.popoverController.close();
171+
},
172+
);
173+
case BoardSettingAction.properties:
174+
return GridPropertyList(
175+
gridId: widget.settingContext.viewId,
176+
fieldController: widget.settingContext.fieldController,
177+
);
178+
}
168179
}
169180

170-
return OverlayContainer(
171-
constraints: BoxConstraints.loose(const Size(140, 400)),
172-
child: BoardSettingList(
173-
settingContext: widget.settingContext,
174-
onAction: (action, settingContext) {
175-
switch (action) {
176-
case BoardSettingAction.groups:
177-
break;
178-
case BoardSettingAction.properties:
179-
setState(() {
180-
_showGridPropertyList = true;
181-
});
182-
break;
183-
}
184-
},
185-
),
181+
return BoardSettingList(
182+
settingContext: widget.settingContext,
183+
onAction: (action, settingContext) {
184+
setState(() => _action = action);
185+
},
186186
);
187187
}
188188
}

‎frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
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/style_widget/icon_button.dart';
67
import 'package:flutter/widgets.dart';
78
import 'package:provider/provider.dart';
@@ -40,15 +41,30 @@ class BoardToolbar extends StatelessWidget {
4041
}
4142
}
4243

43-
class _SettingButton extends StatelessWidget {
44+
class _SettingButton extends StatefulWidget {
4445
final BoardSettingContext settingContext;
4546
const _SettingButton({required this.settingContext, Key? key})
4647
: super(key: key);
4748

49+
@override
50+
State<_SettingButton> createState() => _SettingButtonState();
51+
}
52+
53+
class _SettingButtonState extends State<_SettingButton> {
54+
late PopoverController popoverController;
55+
56+
@override
57+
void initState() {
58+
popoverController = PopoverController();
59+
super.initState();
60+
}
61+
4862
@override
4963
Widget build(BuildContext context) {
5064
final theme = context.read<AppTheme>();
51-
return Popover(
65+
return AppFlowyStylePopover(
66+
controller: popoverController,
67+
constraints: BoxConstraints.loose(const Size(260, 400)),
5268
triggerActions: PopoverTriggerActionFlags.click,
5369
child: FlowyIconButton(
5470
hoverColor: theme.hover,
@@ -61,7 +77,8 @@ class _SettingButton extends StatelessWidget {
6177
),
6278
popupBuilder: (BuildContext popoverContext) {
6379
return BoardSettingListPopover(
64-
settingContext: settingContext,
80+
settingContext: widget.settingContext,
81+
popoverController: popoverController,
6582
);
6683
},
6784
);

‎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/cell/url_cell/cell_editor.dart‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
22
import 'package:app_flowy/plugins/grid/application/cell/url_cell_editor_bloc.dart';
3-
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
43
import 'package:flutter/material.dart';
54
import 'dart:async';
65

@@ -79,15 +78,12 @@ class URLEditorPopover extends StatelessWidget {
7978

8079
@override
8180
Widget build(BuildContext context) {
82-
return OverlayContainer(
83-
constraints: BoxConstraints.loose(const Size(300, 160)),
84-
child: SizedBox(
85-
width: 200,
86-
child: Padding(
87-
padding: const EdgeInsets.all(6),
88-
child: URLCellEditor(
89-
cellController: cellController,
90-
),
81+
return SizedBox(
82+
width: 200,
83+
child: Padding(
84+
padding: const EdgeInsets.all(6),
85+
child: URLCellEditor(
86+
cellController: cellController,
9187
),
9288
),
9389
);

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'package:appflowy_popover/popover.dart';
66
import 'package:easy_localization/easy_localization.dart';
77
import 'package:flowy_infra/image.dart';
88
import 'package:flowy_infra/theme.dart';
9+
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
910
import 'package:flutter/material.dart';
1011
import 'package:flutter/services.dart';
1112
import 'package:flutter_bloc/flutter_bloc.dart';
@@ -129,8 +130,9 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
129130
),
130131
);
131132

132-
return Popover(
133+
return AppFlowyStylePopover(
133134
controller: _popoverController,
135+
constraints: BoxConstraints.loose(const Size(300, 160)),
134136
direction: PopoverDirection.bottomWithLeftAligned,
135137
offset: const Offset(0, 20),
136138
child: SizedBox.expand(
@@ -214,7 +216,8 @@ class _EditURLAccessoryState extends State<_EditURLAccessory>
214216
@override
215217
Widget build(BuildContext context) {
216218
final theme = context.watch<AppTheme>();
217-
return Popover(
219+
return AppFlowyStylePopover(
220+
constraints: BoxConstraints.loose(const Size(300, 160)),
218221
controller: _popoverController,
219222
direction: PopoverDirection.bottomWithLeftAligned,
220223
triggerActions: PopoverTriggerActionFlags.click,

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -163,22 +163,20 @@ class _DeleteFieldButton extends StatelessWidget {
163163
}
164164

165165
Widget _wrapPopover(Widget widget) {
166-
return Popover(
166+
return AppFlowyStylePopover(
167167
triggerActions: PopoverTriggerActionFlags.click,
168+
constraints: BoxConstraints.loose(const Size(400, 240)),
168169
mutex: popoverMutex,
169170
direction: PopoverDirection.center,
170171
popupBuilder: (popupContext) {
171-
return OverlayContainer(
172-
constraints: BoxConstraints.loose(const Size(400, 240)),
173-
child: PopoverAlertView(
174-
title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
175-
cancel: () => popoverMutex.state?.close(),
176-
confirm: () {
177-
onDeleted?.call();
178-
popoverMutex.state?.close();
179-
},
180-
popoverMutex: popoverMutex,
181-
),
172+
return PopoverAlertView(
173+
title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
174+
cancel: () => popoverMutex.state?.close(),
175+
confirm: () {
176+
onDeleted?.call();
177+
popoverMutex.state?.close();
178+
},
179+
popoverMutex: popoverMutex,
182180
);
183181
},
184182
child: widget,

0 commit comments

Comments
 (0)