From 515cd50ac403d0efe063faf0f4ad337aef8455d5 Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Wed, 4 Jan 2023 10:21:00 +0800 Subject: [PATCH] chore: grid/kanban toolbar UI improvements (#1634) --- .../presentation/toolbar/board_setting.dart | 3 +- .../presentation/toolbar/board_toolbar.dart | 5 +- .../widgets/toolbar/filter_button.dart | 38 ++++----- .../widgets/toolbar/grid_group.dart | 10 +-- .../widgets/toolbar/grid_property.dart | 79 +++++++++++-------- .../widgets/toolbar/setting_button.dart | 19 +++-- 6 files changed, 79 insertions(+), 75 deletions(-) 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 index c074900d85..20d95b4ef1 100644 --- 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 { 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 index 66ce2f1c5d..a3b3cf6fe3 100644 --- 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 index e982c21b74..d72e31c217 100644 --- 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 { ? 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(); - 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(); + 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 index 1124175363..a8d9d09abb 100644 --- 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 index fb27af7d2e..a6cb9914ec 100644 --- 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,12 +59,10 @@ class _GridPropertyListState extends State { 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), ); }, ), @@ -72,10 +70,11 @@ class _GridPropertyListState extends State { } } -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, @@ -83,55 +82,65 @@ class _GridPropertyCell extends StatelessWidget { 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().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().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 index 78a5fe4780..64e208437d 100644 --- 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 { - late PopoverController popoverController; + late PopoverController _popoverController; @override void initState() { - popoverController = PopoverController(); + _popoverController = PopoverController(); super.initState(); } @@ -41,21 +43,18 @@ class _SettingButtonState extends State { }, 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); } }