chore: rounded button hover

This commit is contained in:
appflowy 2022-09-23 17:40:17 +08:00
parent 0218f4e8b9
commit 9730069ec1
4 changed files with 25 additions and 16 deletions

View File

@ -358,8 +358,10 @@ class _DateTypeOptionButton extends StatelessWidget {
popupBuilder: (BuildContext popContext) { popupBuilder: (BuildContext popContext) {
return _CalDateTimeSetting( return _CalDateTimeSetting(
dateTypeOptionPB: dateTypeOptionPB, dateTypeOptionPB: dateTypeOptionPB,
popoverMutex: popoverMutex, onEvent: (event) {
onEvent: (event) => context.read<DateCalBloc>().add(event), context.read<DateCalBloc>().add(event);
popoverMutex.close();
},
); );
}, },
); );
@ -369,12 +371,10 @@ class _DateTypeOptionButton extends StatelessWidget {
} }
class _CalDateTimeSetting extends StatefulWidget { class _CalDateTimeSetting extends StatefulWidget {
final PopoverMutex popoverMutex;
final DateTypeOptionPB dateTypeOptionPB; final DateTypeOptionPB dateTypeOptionPB;
final Function(DateCalEvent) onEvent; final Function(DateCalEvent) onEvent;
const _CalDateTimeSetting({ const _CalDateTimeSetting({
required this.dateTypeOptionPB, required this.dateTypeOptionPB,
required this.popoverMutex,
required this.onEvent, required this.onEvent,
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
@ -384,36 +384,38 @@ class _CalDateTimeSetting extends StatefulWidget {
} }
class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { class _CalDateTimeSettingState extends State<_CalDateTimeSetting> {
final timeSettingPopoverMutex = PopoverMutex();
String? overlayIdentifier; String? overlayIdentifier;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
List<Widget> children = [ List<Widget> children = [
AppFlowyPopover( AppFlowyPopover(
mutex: widget.popoverMutex, mutex: timeSettingPopoverMutex,
asBarrier: true,
triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
offset: const Offset(20, 0), offset: const Offset(20, 0),
popupBuilder: (BuildContext context) { popupBuilder: (BuildContext context) {
return DateFormatList( return DateFormatList(
selectedFormat: widget.dateTypeOptionPB.dateFormat, selectedFormat: widget.dateTypeOptionPB.dateFormat,
onSelected: (format) => onSelected: (format) {
widget.onEvent(DateCalEvent.setDateFormat(format)), widget.onEvent(DateCalEvent.setDateFormat(format));
timeSettingPopoverMutex.close();
},
); );
}, },
child: const DateFormatButton(), child: const DateFormatButton(),
), ),
AppFlowyPopover( AppFlowyPopover(
mutex: widget.popoverMutex, mutex: timeSettingPopoverMutex,
asBarrier: true,
triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
offset: const Offset(20, 0), offset: const Offset(20, 0),
popupBuilder: (BuildContext context) { popupBuilder: (BuildContext context) {
return TimeFormatList( return TimeFormatList(
selectedFormat: widget.dateTypeOptionPB.timeFormat, selectedFormat: widget.dateTypeOptionPB.timeFormat,
onSelected: (format) => onSelected: (format) {
widget.onEvent(DateCalEvent.setTimeFormat(format)), widget.onEvent(DateCalEvent.setTimeFormat(format));
); timeSettingPopoverMutex.close();
});
}, },
child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat), child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat),
), ),

View File

@ -162,6 +162,7 @@ class FieldCellButton extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.watch<AppTheme>(); final theme = context.watch<AppTheme>();
return FlowyButton( return FlowyButton(
radius: BorderRadius.zero,
hoverColor: theme.shader6, hoverColor: theme.shader6,
onTap: onTap, onTap: onTap,
leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor), leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),

View File

@ -180,6 +180,7 @@ class CreateFieldButton extends StatelessWidget {
asBarrier: true, asBarrier: true,
constraints: BoxConstraints.loose(const Size(240, 600)), constraints: BoxConstraints.loose(const Size(240, 600)),
child: FlowyButton( child: FlowyButton(
radius: BorderRadius.zero,
text: FlowyText.medium( text: FlowyText.medium(
LocaleKeys.grid_field_newColumn.tr(), LocaleKeys.grid_field_newColumn.tr(),
fontSize: 12, fontSize: 12,

View File

@ -12,6 +12,8 @@ class FlowyButton extends StatelessWidget {
final Widget? rightIcon; final Widget? rightIcon;
final Color hoverColor; final Color hoverColor;
final bool isSelected; final bool isSelected;
final BorderRadius radius;
const FlowyButton({ const FlowyButton({
Key? key, Key? key,
required this.text, required this.text,
@ -22,6 +24,7 @@ class FlowyButton extends StatelessWidget {
this.rightIcon, this.rightIcon,
this.hoverColor = Colors.transparent, this.hoverColor = Colors.transparent,
this.isSelected = false, this.isSelected = false,
this.radius = const BorderRadius.all(Radius.circular(6)),
}) : super(key: key); }) : super(key: key);
@override @override
@ -29,8 +32,10 @@ class FlowyButton extends StatelessWidget {
return InkWell( return InkWell(
onTap: onTap, onTap: onTap,
child: FlowyHover( child: FlowyHover(
style: style: HoverStyle(
HoverStyle(borderRadius: BorderRadius.zero, hoverColor: hoverColor), borderRadius: radius,
hoverColor: hoverColor,
),
onHover: onHover, onHover: onHover,
setSelected: () => isSelected, setSelected: () => isSelected,
builder: (context, onHover) => _render(), builder: (context, onHover) => _render(),