Skip to content

Commit 70689d3

Browse files
richardshiuerichardshiue
authored
feat: show the scrollbars again (#1605)
* fix: padding in grid cell editors * fix: padding in grid header editor * fix: padding for row details * fix: shrink number formt list when possible * chore: simply use column for select option editor * fix: make sure that popovers are the edges * fix: delete button padding * fix: date and time formats padding mistake
1 parent f5b7d39 commit 70689d3

File tree

16 files changed

+437
-343
lines changed

16 files changed

+437
-343
lines changed

‎frontend/app_flowy/lib/plugins/grid/presentation/layout/sizes.dart‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ class GridSize {
1414
static double get typeOptionItemHeight => 32 * scale;
1515
static double get typeOptionSeparatorHeight => 4 * scale;
1616

17-
//
1817
static EdgeInsets get headerContentInsets => EdgeInsets.symmetric(
1918
horizontal: GridSize.headerContainerPadding,
2019
vertical: GridSize.headerContainerPadding,

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

Lines changed: 91 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:app_flowy/generated/locale_keys.g.dart';
22
import 'package:app_flowy/plugins/grid/application/cell/date_cal_bloc.dart';
33
import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
4+
import 'package:app_flowy/plugins/grid/presentation/widgets/common/type_option_separator.dart';
45
import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle.dart';
56
import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
67
import 'package:appflowy_popover/appflowy_popover.dart';
@@ -62,12 +63,9 @@ class _DateCellEditor extends State<DateCellEditor> {
6263
Widget _buildWidget(AsyncSnapshot<Either<dynamic, FlowyError>> snapshot) {
6364
return snapshot.data!.fold(
6465
(dateTypeOptionPB) {
65-
return Padding(
66-
padding: const EdgeInsets.all(12),
67-
child: _CellCalendarWidget(
68-
cellContext: widget.cellController,
69-
dateTypeOptionPB: dateTypeOptionPB,
70-
),
66+
return _CellCalendarWidget(
67+
cellContext: widget.cellController,
68+
dateTypeOptionPB: dateTypeOptionPB,
7169
);
7270
},
7371
(err) {
@@ -116,26 +114,29 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
116114
buildWhen: (p, c) => p != c,
117115
builder: (context, state) {
118116
List<Widget> children = [
119-
_buildCalendar(context),
120-
if (state.dateTypeOptionPB.includeTime)
117+
Padding(
118+
padding: const EdgeInsets.symmetric(horizontal: 12.0),
119+
child: _buildCalendar(context),
120+
),
121+
if (state.dateTypeOptionPB.includeTime) ...[
122+
const VSpace(12.0),
121123
_TimeTextField(
122124
bloc: context.read<DateCalBloc>(),
123125
popoverMutex: popoverMutex,
124126
),
125-
Divider(height: 1.0, color: Theme.of(context).dividerColor),
127+
],
128+
const TypeOptionSeparator(spacing: 12.0),
126129
const _IncludeTimeButton(),
127-
Divider(height: 1.0, color: Theme.of(context).dividerColor),
130+
const TypeOptionSeparator(spacing: 12.0),
128131
_DateTypeOptionButton(popoverMutex: popoverMutex)
129132
];
130133

131-
return ListView.separated(
134+
return ListView.builder(
132135
shrinkWrap: true,
133136
controller: ScrollController(),
134-
separatorBuilder: (context, index) => VSpace(GridSize.cellVPadding),
135137
itemCount: children.length,
136-
itemBuilder: (BuildContext context, int index) {
137-
return children[index];
138-
},
138+
itemBuilder: (BuildContext context, int index) => children[index],
139+
padding: const EdgeInsets.symmetric(vertical: 12.0),
139140
);
140141
},
141142
),
@@ -171,10 +172,16 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
171172
titleTextStyle: textStyle,
172173
leftChevronMargin: EdgeInsets.zero,
173174
leftChevronPadding: EdgeInsets.zero,
174-
leftChevronIcon: svgWidget("home/arrow_left"),
175+
leftChevronIcon: svgWidget(
176+
"home/arrow_left",
177+
color: Theme.of(context).colorScheme.onSurface,
178+
),
175179
rightChevronPadding: EdgeInsets.zero,
176180
rightChevronMargin: EdgeInsets.zero,
177-
rightChevronIcon: svgWidget("home/arrow_right"),
181+
rightChevronIcon: svgWidget(
182+
"home/arrow_right",
183+
color: Theme.of(context).colorScheme.onSurface,
184+
),
178185
headerMargin: const EdgeInsets.only(bottom: 8.0),
179186
),
180187
daysOfWeekStyle: DaysOfWeekStyle(
@@ -233,28 +240,31 @@ class _IncludeTimeButton extends StatelessWidget {
233240
return BlocSelector<DateCalBloc, DateCalState, bool>(
234241
selector: (state) => state.dateTypeOptionPB.includeTime,
235242
builder: (context, includeTime) {
236-
return SizedBox(
237-
height: GridSize.typeOptionItemHeight,
238-
child: Padding(
239-
padding: GridSize.typeOptionContentInsets,
240-
child: Row(
241-
children: [
242-
svgWidget(
243-
"grid/clock",
244-
color: Theme.of(context).colorScheme.onSurface,
245-
),
246-
const HSpace(4),
247-
FlowyText.medium(LocaleKeys.grid_field_includeTime.tr()),
248-
const Spacer(),
249-
Toggle(
250-
value: includeTime,
251-
onChanged: (value) => context
252-
.read<DateCalBloc>()
253-
.add(DateCalEvent.setIncludeTime(!value)),
254-
style: ToggleStyle.big,
255-
padding: EdgeInsets.zero,
256-
),
257-
],
243+
return Padding(
244+
padding: const EdgeInsets.symmetric(horizontal: 12.0),
245+
child: SizedBox(
246+
height: GridSize.typeOptionItemHeight,
247+
child: Padding(
248+
padding: GridSize.typeOptionContentInsets,
249+
child: Row(
250+
children: [
251+
svgWidget(
252+
"grid/clock",
253+
color: Theme.of(context).colorScheme.onSurface,
254+
),
255+
const HSpace(4),
256+
FlowyText.medium(LocaleKeys.grid_field_includeTime.tr()),
257+
const Spacer(),
258+
Toggle(
259+
value: includeTime,
260+
onChanged: (value) => context
261+
.read<DateCalBloc>()
262+
.add(DateCalEvent.setIncludeTime(!value)),
263+
style: ToggleStyle.big,
264+
padding: EdgeInsets.zero,
265+
),
266+
],
267+
),
258268
),
259269
),
260270
);
@@ -313,22 +323,25 @@ class _TimeTextFieldState extends State<_TimeTextField> {
313323
_controller.selection =
314324
TextSelection.collapsed(offset: _controller.text.length);
315325
return Padding(
316-
padding: GridSize.typeOptionContentInsets,
317-
child: RoundedInputField(
318-
height: GridSize.typeOptionItemHeight,
319-
focusNode: _focusNode,
320-
autoFocus: true,
321-
hintText: widget.bloc.state.timeHintText,
322-
controller: _controller,
323-
style: Theme.of(context).textTheme.bodyMedium!,
324-
normalBorderColor: Theme.of(context).colorScheme.outline,
325-
errorBorderColor: Theme.of(context).colorScheme.error,
326-
focusBorderColor: Theme.of(context).colorScheme.primary,
327-
cursorColor: Theme.of(context).colorScheme.primary,
328-
errorText:
329-
widget.bloc.state.timeFormatError.fold(() => "", (error) => error),
330-
onEditingComplete: (value) =>
331-
widget.bloc.add(DateCalEvent.setTime(value)),
326+
padding: const EdgeInsets.symmetric(horizontal: 12.0),
327+
child: Padding(
328+
padding: GridSize.typeOptionContentInsets,
329+
child: RoundedInputField(
330+
height: GridSize.typeOptionItemHeight,
331+
focusNode: _focusNode,
332+
autoFocus: true,
333+
hintText: widget.bloc.state.timeHintText,
334+
controller: _controller,
335+
style: Theme.of(context).textTheme.bodyMedium!,
336+
normalBorderColor: Theme.of(context).colorScheme.outline,
337+
errorBorderColor: Theme.of(context).colorScheme.error,
338+
focusBorderColor: Theme.of(context).colorScheme.primary,
339+
cursorColor: Theme.of(context).colorScheme.primary,
340+
errorText: widget.bloc.state.timeFormatError
341+
.fold(() => "", (error) => error),
342+
onEditingComplete: (value) =>
343+
widget.bloc.add(DateCalEvent.setTime(value)),
344+
),
332345
),
333346
);
334347
}
@@ -358,15 +371,19 @@ class _DateTypeOptionButton extends StatelessWidget {
358371
mutex: popoverMutex,
359372
triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
360373
offset: const Offset(20, 0),
374+
margin: EdgeInsets.zero,
361375
constraints: BoxConstraints.loose(const Size(140, 100)),
362-
child: SizedBox(
363-
height: GridSize.typeOptionItemHeight,
364-
child: FlowyButton(
365-
text: FlowyText.medium(title),
366-
margin: GridSize.typeOptionContentInsets,
367-
rightIcon: svgWidget(
368-
"grid/more",
369-
color: Theme.of(context).colorScheme.onSurface,
376+
child: Padding(
377+
padding: const EdgeInsets.symmetric(horizontal: 12.0),
378+
child: SizedBox(
379+
height: GridSize.typeOptionItemHeight,
380+
child: FlowyButton(
381+
text: FlowyText.medium(title),
382+
margin: GridSize.typeOptionContentInsets,
383+
rightIcon: svgWidget(
384+
"grid/more",
385+
color: Theme.of(context).colorScheme.onSurface,
386+
),
370387
),
371388
),
372389
),
@@ -418,7 +435,10 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> {
418435
},
419436
);
420437
},
421-
child: const DateFormatButton(),
438+
child: const Padding(
439+
padding: EdgeInsets.symmetric(horizontal: 6.0),
440+
child: DateFormatButton(),
441+
),
422442
),
423443
AppFlowyPopover(
424444
mutex: timeSettingPopoverMutex,
@@ -432,7 +452,11 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> {
432452
timeSettingPopoverMutex.close();
433453
});
434454
},
435-
child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat),
455+
child: Padding(
456+
padding: const EdgeInsets.symmetric(horizontal: 6.0),
457+
child:
458+
TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat),
459+
),
436460
),
437461
];
438462

@@ -444,9 +468,8 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> {
444468
separatorBuilder: (context, index) =>
445469
VSpace(GridSize.typeOptionSeparatorHeight),
446470
itemCount: children.length,
447-
itemBuilder: (BuildContext context, int index) {
448-
return children[index];
449-
},
471+
itemBuilder: (BuildContext context, int index) => children[index],
472+
padding: const EdgeInsets.symmetric(vertical: 6.0),
450473
),
451474
);
452475
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
182182
return AppFlowyPopover(
183183
controller: _popover,
184184
constraints: constraints,
185+
margin: EdgeInsets.zero,
185186
direction: PopoverDirection.bottomWithLeftAligned,
186187
popupBuilder: (BuildContext context) {
187188
WidgetsBinding.instance.addPostFrameCallback((_) {

0 commit comments

Comments
 (0)