From 9730069ec1755e489e9c15a23ae76e5f8a4e5a5e Mon Sep 17 00:00:00 2001 From: appflowy Date: Fri, 23 Sep 2022 17:40:17 +0800 Subject: [PATCH] chore: rounded button hover --- .../widgets/cell/date_cell/date_editor.dart | 30 ++++++++++--------- .../widgets/header/field_cell.dart | 1 + .../widgets/header/grid_header.dart | 1 + .../lib/style_widget/button.dart | 9 ++++-- 4 files changed, 25 insertions(+), 16 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart index 8ae4baf20e..63917da8f9 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart @@ -358,8 +358,10 @@ class _DateTypeOptionButton extends StatelessWidget { popupBuilder: (BuildContext popContext) { return _CalDateTimeSetting( dateTypeOptionPB: dateTypeOptionPB, - popoverMutex: popoverMutex, - onEvent: (event) => context.read().add(event), + onEvent: (event) { + context.read().add(event); + popoverMutex.close(); + }, ); }, ); @@ -369,12 +371,10 @@ class _DateTypeOptionButton extends StatelessWidget { } class _CalDateTimeSetting extends StatefulWidget { - final PopoverMutex popoverMutex; final DateTypeOptionPB dateTypeOptionPB; final Function(DateCalEvent) onEvent; const _CalDateTimeSetting({ required this.dateTypeOptionPB, - required this.popoverMutex, required this.onEvent, Key? key, }) : super(key: key); @@ -384,36 +384,38 @@ class _CalDateTimeSetting extends StatefulWidget { } class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { + final timeSettingPopoverMutex = PopoverMutex(); String? overlayIdentifier; @override Widget build(BuildContext context) { List children = [ AppFlowyPopover( - mutex: widget.popoverMutex, - asBarrier: true, + mutex: timeSettingPopoverMutex, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), popupBuilder: (BuildContext context) { return DateFormatList( selectedFormat: widget.dateTypeOptionPB.dateFormat, - onSelected: (format) => - widget.onEvent(DateCalEvent.setDateFormat(format)), + onSelected: (format) { + widget.onEvent(DateCalEvent.setDateFormat(format)); + timeSettingPopoverMutex.close(); + }, ); }, child: const DateFormatButton(), ), AppFlowyPopover( - mutex: widget.popoverMutex, - asBarrier: true, + mutex: timeSettingPopoverMutex, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), popupBuilder: (BuildContext context) { return TimeFormatList( - selectedFormat: widget.dateTypeOptionPB.timeFormat, - onSelected: (format) => - widget.onEvent(DateCalEvent.setTimeFormat(format)), - ); + selectedFormat: widget.dateTypeOptionPB.timeFormat, + onSelected: (format) { + widget.onEvent(DateCalEvent.setTimeFormat(format)); + timeSettingPopoverMutex.close(); + }); }, child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat), ), diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart index fd6133770f..80b94762ec 100755 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart @@ -162,6 +162,7 @@ class FieldCellButton extends StatelessWidget { Widget build(BuildContext context) { final theme = context.watch(); return FlowyButton( + radius: BorderRadius.zero, hoverColor: theme.shader6, onTap: onTap, leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor), diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart index dbd12119b5..735a179c1e 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart @@ -180,6 +180,7 @@ class CreateFieldButton extends StatelessWidget { asBarrier: true, constraints: BoxConstraints.loose(const Size(240, 600)), child: FlowyButton( + radius: BorderRadius.zero, text: FlowyText.medium( LocaleKeys.grid_field_newColumn.tr(), fontSize: 12, diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart index ba2b3049af..159513dd49 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart @@ -12,6 +12,8 @@ class FlowyButton extends StatelessWidget { final Widget? rightIcon; final Color hoverColor; final bool isSelected; + final BorderRadius radius; + const FlowyButton({ Key? key, required this.text, @@ -22,6 +24,7 @@ class FlowyButton extends StatelessWidget { this.rightIcon, this.hoverColor = Colors.transparent, this.isSelected = false, + this.radius = const BorderRadius.all(Radius.circular(6)), }) : super(key: key); @override @@ -29,8 +32,10 @@ class FlowyButton extends StatelessWidget { return InkWell( onTap: onTap, child: FlowyHover( - style: - HoverStyle(borderRadius: BorderRadius.zero, hoverColor: hoverColor), + style: HoverStyle( + borderRadius: radius, + hoverColor: hoverColor, + ), onHover: onHover, setSelected: () => isSelected, builder: (context, onHover) => _render(),