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) {
return _CalDateTimeSetting(
dateTypeOptionPB: dateTypeOptionPB,
popoverMutex: popoverMutex,
onEvent: (event) => context.read<DateCalBloc>().add(event),
onEvent: (event) {
context.read<DateCalBloc>().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<Widget> 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),
),

View File

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

View File

@ -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,

View File

@ -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(),