chore: grid/kanban toolbar UI improvements (#1634)

richardshiue · web-flow · commit 515cd50ac403 · 2023-01-04T10:21:00.000+08:00
diff --git a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart
@@ -13,6 +13,7 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:styled_widget/styled_widget.dart';
 
 import 'board_toolbar.dart';
 
@@ -181,6 +182,6 @@ class _BoardSettingListPopoverState extends State<BoardSettingListPopover> {
       onAction: (action, settingContext) {
         setState(() => _action = action);
       },
-    );
+    ).padding(all: 6.0);
   }
 }
diff --git a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart
@@ -1,4 +1,5 @@
 import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
+import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
@@ -67,12 +68,12 @@ class _SettingButtonState extends State<_SettingButton> {
       direction: PopoverDirection.leftWithTopAligned,
       triggerActions: PopoverTriggerFlags.none,
       constraints: BoxConstraints.loose(const Size(260, 400)),
+      margin: EdgeInsets.zero,
       child: FlowyTextButton(
         LocaleKeys.settings_title.tr(),
-        fontSize: 14,
         fillColor: Colors.transparent,
         hoverColor: AFThemeExtension.of(context).lightGreyHover,
-        padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 6),
+        padding: GridSize.typeOptionContentInsets,
         onPressed: () {
           popoverController.show();
         },
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/filter_button.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/filter_button.dart
@@ -8,6 +8,7 @@ import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import '../../layout/sizes.dart';
 import '../filter/create_filter_list.dart';
 
 class FilterButton extends StatefulWidget {
@@ -28,39 +29,34 @@ class _FilterButtonState extends State<FilterButton> {
             ? null
             : Theme.of(context).colorScheme.primary;
 
-        return wrapPopover(
+        return _wrapPopover(
           context,
-          SizedBox(
-            height: 26,
-            child: FlowyTextButton(
-              LocaleKeys.grid_settings_filter.tr(),
-              fontSize: 13,
-              fontColor: textColor,
-              fillColor: Colors.transparent,
-              hoverColor: AFThemeExtension.of(context).lightGreyHover,
-              padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 2),
-              onPressed: () {
-                final bloc = context.read<GridFilterMenuBloc>();
-                if (bloc.state.filters.isEmpty) {
-                  _popoverController.show();
-                } else {
-                  bloc.add(const GridFilterMenuEvent.toggleMenu());
-                }
-              },
-            ),
+          FlowyTextButton(
+            LocaleKeys.grid_settings_filter.tr(),
+            fontColor: textColor,
+            fillColor: Colors.transparent,
+            hoverColor: AFThemeExtension.of(context).lightGreyHover,
+            padding: GridSize.typeOptionContentInsets,
+            onPressed: () {
+              final bloc = context.read<GridFilterMenuBloc>();
+              if (bloc.state.filters.isEmpty) {
+                _popoverController.show();
+              } else {
+                bloc.add(const GridFilterMenuEvent.toggleMenu());
+              }
+            },
           ),
         );
       },
     );
   }
 
-  Widget wrapPopover(BuildContext buildContext, Widget child) {
+  Widget _wrapPopover(BuildContext buildContext, Widget child) {
     return AppFlowyPopover(
       controller: _popoverController,
       direction: PopoverDirection.leftWithTopAligned,
       constraints: BoxConstraints.loose(const Size(200, 300)),
       offset: const Offset(0, 10),
-      margin: const EdgeInsets.all(6),
       triggerActions: PopoverTriggerFlags.none,
       child: child,
       popupBuilder: (BuildContext context) {
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_group.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_group.dart
@@ -46,12 +46,10 @@ class GridGroupList extends StatelessWidget {
           return ListView.separated(
             shrinkWrap: true,
             itemCount: cells.length,
-            itemBuilder: (BuildContext context, int index) {
-              return cells[index];
-            },
-            separatorBuilder: (BuildContext context, int index) {
-              return VSpace(GridSize.typeOptionSeparatorHeight);
-            },
+            itemBuilder: (BuildContext context, int index) => cells[index],
+            separatorBuilder: (BuildContext context, int index) =>
+                VSpace(GridSize.typeOptionSeparatorHeight),
+            padding: const EdgeInsets.all(6.0),
           );
         },
       ),
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart
@@ -59,79 +59,88 @@ class _GridPropertyListState extends State<GridPropertyList> {
             controller: ScrollController(),
             shrinkWrap: true,
             itemCount: cells.length,
-            itemBuilder: (BuildContext context, int index) {
-              return cells[index];
-            },
-            separatorBuilder: (BuildContext context, int index) {
-              return VSpace(GridSize.typeOptionSeparatorHeight);
-            },
+            itemBuilder: (BuildContext context, int index) => cells[index],
+            separatorBuilder: (BuildContext context, int index) =>
+                VSpace(GridSize.typeOptionSeparatorHeight),
+            padding: const EdgeInsets.symmetric(vertical: 6.0),
           );
         },
       ),
     );
   }
 }
 
-class _GridPropertyCell extends StatelessWidget {
+class _GridPropertyCell extends StatefulWidget {
   final FieldInfo fieldInfo;
   final String gridId;
   final PopoverMutex popoverMutex;
+
   const _GridPropertyCell({
     required this.gridId,
     required this.fieldInfo,
     required this.popoverMutex,
     Key? key,
   }) : super(key: key);
 
+  @override
+  State<_GridPropertyCell> createState() => _GridPropertyCellState();
+}
+
+class _GridPropertyCellState extends State<_GridPropertyCell> {
+  late PopoverController _popoverController;
+
+  @override
+  void initState() {
+    _popoverController = PopoverController();
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     final checkmark = svgWidget(
-      fieldInfo.visibility ? 'home/show' : 'home/hide',
+      widget.fieldInfo.visibility ? 'home/show' : 'home/hide',
       color: Theme.of(context).colorScheme.onSurface,
     );
 
-    return Row(
-      children: [
-        Expanded(
-          child: SizedBox(
-            height: GridSize.typeOptionItemHeight,
-            child: _editFieldButton(context),
-          ),
-        ),
-        FlowyIconButton(
-          width: GridSize.typeOptionItemHeight,
-          onPressed: () {
-            context.read<GridPropertyBloc>().add(
-                GridPropertyEvent.setFieldVisibility(
-                    fieldInfo.id, !fieldInfo.visibility));
-          },
-          icon: checkmark.padding(all: 6),
-        )
-      ],
+    return SizedBox(
+      height: GridSize.typeOptionItemHeight,
+      child: _editFieldButton(context, checkmark),
     );
   }
 
-  Widget _editFieldButton(BuildContext context) {
+  Widget _editFieldButton(BuildContext context, Widget checkmark) {
     return AppFlowyPopover(
-      mutex: popoverMutex,
+      mutex: widget.popoverMutex,
+      controller: _popoverController,
       offset: const Offset(20, 0),
       direction: PopoverDirection.leftWithTopAligned,
       constraints: BoxConstraints.loose(const Size(240, 400)),
+      triggerActions: PopoverTriggerFlags.none,
       margin: EdgeInsets.zero,
       child: FlowyButton(
-        text: FlowyText.medium(fieldInfo.name),
+        text: FlowyText.medium(widget.fieldInfo.name),
         leftIcon: svgWidget(
-          fieldInfo.fieldType.iconName(),
+          widget.fieldInfo.fieldType.iconName(),
           color: Theme.of(context).colorScheme.onSurface,
         ),
-      ),
+        rightIcon: FlowyIconButton(
+          hoverColor: Colors.transparent,
+          onPressed: () {
+            context.read<GridPropertyBloc>().add(
+                GridPropertyEvent.setFieldVisibility(
+                    widget.fieldInfo.id, !widget.fieldInfo.visibility));
+          },
+          icon: checkmark.padding(all: 6.0),
+        ),
+        onTap: () => _popoverController.show(),
+      ).padding(horizontal: 6.0),
       popupBuilder: (BuildContext context) {
         return FieldEditor(
-          gridId: gridId,
-          fieldName: fieldInfo.name,
+          gridId: widget.gridId,
+          fieldName: widget.fieldInfo.name,
           typeOptionLoader: FieldTypeOptionLoader(
-            gridId: gridId,
-            field: fieldInfo.field,
+            gridId: widget.gridId,
+            field: widget.fieldInfo.field,
           ),
         );
       },
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/setting_button.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/setting_button.dart
@@ -8,7 +8,9 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:styled_widget/styled_widget.dart';
 
+import '../../layout/sizes.dart';
 import 'grid_property.dart';
 import 'grid_setting.dart';
 
@@ -20,11 +22,11 @@ class SettingButton extends StatefulWidget {
 }
 
 class _SettingButtonState extends State<SettingButton> {
-  late PopoverController popoverController;
+  late PopoverController _popoverController;
 
   @override
   void initState() {
-    popoverController = PopoverController();
+    _popoverController = PopoverController();
     super.initState();
   }
 
@@ -41,21 +43,18 @@ class _SettingButtonState extends State<SettingButton> {
       },
       builder: (context, settingContext) {
         return AppFlowyPopover(
-          controller: popoverController,
+          controller: _popoverController,
           constraints: BoxConstraints.loose(const Size(260, 400)),
           direction: PopoverDirection.leftWithTopAligned,
           offset: const Offset(0, 10),
-          margin: const EdgeInsets.all(6),
+          margin: EdgeInsets.zero,
           triggerActions: PopoverTriggerFlags.none,
           child: FlowyTextButton(
             LocaleKeys.settings_title.tr(),
-            fontSize: 13,
             fillColor: Colors.transparent,
             hoverColor: AFThemeExtension.of(context).lightGreyHover,
-            padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 6),
-            onPressed: () {
-              popoverController.show();
-            },
+            padding: GridSize.typeOptionContentInsets,
+            onPressed: () => _popoverController.show(),
           ),
           popupBuilder: (BuildContext context) {
             return _GridSettingListPopover(settingContext: settingContext);
@@ -95,6 +94,6 @@ class _GridSettingListPopoverState extends State<_GridSettingListPopover> {
           _action = action;
         });
       },
-    );
+    ).padding(all: 6.0);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ import 'package:flowy_infra_ui/style_widget/text.dart';`
`13`	`13`	`import 'package:flowy_infra_ui/widget/spacing.dart';`
`14`	`14`	`import 'package:flutter/material.dart';`
`15`	`15`	`import 'package:flutter_bloc/flutter_bloc.dart';`
	`16`	`+import 'package:styled_widget/styled_widget.dart';`
`16`	`17`
`17`	`18`	`import 'board_toolbar.dart';`
`18`	`19`
`@@ -181,6 +182,6 @@ class _BoardSettingListPopoverState extends State<BoardSettingListPopover> {`
`181`	`182`	`onAction: (action, settingContext) {`
`182`	`183`	`setState(() => _action = action);`
`183`	`184`	`},`
`184`		`- );`
	`185`	`+ ).padding(all: 6.0);`
`185`	`186`	`}`
`186`	`187`	`}`