yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-11-12 00:19:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(flutter_desktop): enable selecting icons without backgrounds (#6379)

Browse Source 
* chore: enable selecting icons without backgrounds

* chore: remove debugprint

* chore: rename flag
This commit is contained in:
Richard Shiue 2024-09-24 22:01:21 +08:00 committed by GitHub
parent c6dd5db6da
commit da7c993fd6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 71 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/appflowy_flutter/lib/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart
View File

@ -50,12 +50,14 @@ class FlowyIconEmojiPicker extends StatefulWidget {
super.key, super.key,
this.onSelectedEmoji, this.onSelectedEmoji,
this.onSelectedIcon, this.onSelectedIcon,
this.enableBackgroundColorSelection = true,
this.tabs = const [PickerTabType.emoji], this.tabs = const [PickerTabType.emoji],
}); });
final void Function(EmojiPickerResult result)? onSelectedEmoji; final void Function(EmojiPickerResult result)? onSelectedEmoji;
final void Function(IconGroup? group, Icon? icon, String? color)? final void Function(IconGroup? group, Icon? icon, String? color)?
onSelectedIcon; onSelectedIcon;
final bool enableBackgroundColorSelection;
final List<PickerTabType> tabs; final List<PickerTabType> tabs;
@override @override
@ -145,8 +147,8 @@ class _FlowyIconEmojiPickerState extends State<FlowyIconEmojiPicker>
Widget _buildIconPicker() { Widget _buildIconPicker() {
return FlowyIconPicker( return FlowyIconPicker(
enableBackgroundColorSelection: widget.enableBackgroundColorSelection,
onSelectedIcon: (iconGroup, icon, color) { onSelectedIcon: (iconGroup, icon, color) {
debugPrint('icon: ${icon.toJson()}, color: $color');
widget.onSelectedIcon?.call(iconGroup, icon, color); widget.onSelectedIcon?.call(iconGroup, icon, color);
}, },
); );

96
frontend/appflowy_flutter/lib/shared/icon_emoji_picker/icon_picker.dart
View File

@ -77,9 +77,11 @@ class FlowyIconPicker extends StatefulWidget {
const FlowyIconPicker({ const FlowyIconPicker({
super.key, super.key,
required this.onSelectedIcon, required this.onSelectedIcon,
required this.enableBackgroundColorSelection,
}); });
final void Function(IconGroup group, Icon icon, String color) onSelectedIcon; final bool enableBackgroundColorSelection;
final void Function(IconGroup group, Icon icon, String? color) onSelectedIcon;
@override @override
State<FlowyIconPicker> createState() => _FlowyIconPickerState(); State<FlowyIconPicker> createState() => _FlowyIconPickerState();
@ -163,11 +165,14 @@ class _FlowyIconPickerState extends State<FlowyIconPicker> {
.toList(); .toList();
return IconPicker( return IconPicker(
iconGroups: filteredIconGroups, iconGroups: filteredIconGroups,
enableBackgroundColorSelection:
widget.enableBackgroundColorSelection,
onSelectedIcon: widget.onSelectedIcon, onSelectedIcon: widget.onSelectedIcon,
); );
} }
return IconPicker( return IconPicker(
iconGroups: iconGroups, iconGroups: iconGroups,
enableBackgroundColorSelection: widget.enableBackgroundColorSelection,
onSelectedIcon: widget.onSelectedIcon, onSelectedIcon: widget.onSelectedIcon,
); );
}, },
@ -179,11 +184,13 @@ class IconPicker extends StatefulWidget {
const IconPicker({ const IconPicker({
super.key, super.key,
required this.onSelectedIcon, required this.onSelectedIcon,
required this.enableBackgroundColorSelection,
required this.iconGroups, required this.iconGroups,
}); });
final List<IconGroup> iconGroups; final List<IconGroup> iconGroups;
final void Function(IconGroup group, Icon icon, String color) onSelectedIcon; final bool enableBackgroundColorSelection;
final void Function(IconGroup group, Icon icon, String? color) onSelectedIcon;
@override @override
State<IconPicker> createState() => _IconPickerState(); State<IconPicker> createState() => _IconPickerState();
@ -212,14 +219,21 @@ class _IconPickerState extends State<IconPicker> {
Wrap( Wrap(
children: iconGroup.icons.map( children: iconGroup.icons.map(
(icon) { (icon) {
return _Icon( return widget.enableBackgroundColorSelection
icon: icon, ? _Icon(
mutex: mutex, icon: icon,
onSelectedColor: (context, color) { mutex: mutex,
widget.onSelectedIcon(iconGroup, icon, color); onSelectedColor: (context, color) {
PopoverContainer.of(context).close(); widget.onSelectedIcon(iconGroup, icon, color);
}, PopoverContainer.of(context).close();
); },
)
: _IconNoBackground(
icon: icon,
onSelectedIcon: () {
widget.onSelectedIcon(iconGroup, icon, null);
},
);
}, },
).toList(), ).toList(),
), ),
@ -235,7 +249,38 @@ class _IconPickerState extends State<IconPicker> {
} }
} }
class _Icon extends StatelessWidget { class _IconNoBackground extends StatelessWidget {
const _IconNoBackground({
required this.icon,
required this.onSelectedIcon,
});
final Icon icon;
final VoidCallback onSelectedIcon;
@override
Widget build(BuildContext context) {
return FlowyTooltip(
message: icon.displayName,
preferBelow: false,
child: FlowyButton(
useIntrinsicWidth: true,
onTap: () => onSelectedIcon(),
margin: const EdgeInsets.all(8.0),
text: Center(
child: FlowySvg.string(
icon.content,
size: const Size.square(20),
color: context.pickerIconColor,
opacity: 0.7,
),
),
),
);
}
}
class _Icon extends StatefulWidget {
const _Icon({ const _Icon({
required this.icon, required this.icon,
required this.mutex, required this.mutex,
@ -246,33 +291,28 @@ class _Icon extends StatelessWidget {
final PopoverMutex mutex; final PopoverMutex mutex;
final void Function(BuildContext context, String color) onSelectedColor; final void Function(BuildContext context, String color) onSelectedColor;
@override
State<_Icon> createState() => _IconState();
}
class _IconState extends State<_Icon> {
final PopoverController _popoverController = PopoverController();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AppFlowyPopover( return AppFlowyPopover(
direction: PopoverDirection.bottomWithCenterAligned, direction: PopoverDirection.bottomWithCenterAligned,
offset: const Offset(0, 6), offset: const Offset(0, 6),
mutex: mutex, mutex: widget.mutex,
child: FlowyTooltip( child: _IconNoBackground(
message: icon.displayName, icon: widget.icon,
preferBelow: false, onSelectedIcon: () => _popoverController.show(),
child: FlowyButton(
useIntrinsicWidth: true,
margin: const EdgeInsets.all(8.0),
text: Center(
child: FlowySvg.string(
icon.content,
size: const Size.square(20),
color: context.pickerIconColor,
opacity: 0.7,
),
),
),
), ),
popupBuilder: (context) { popupBuilder: (context) {
return Container( return Container(
padding: const EdgeInsets.all(6.0), padding: const EdgeInsets.all(6.0),
child: IconColorPicker( child: IconColorPicker(
onSelected: (color) => onSelectedColor(context, color), onSelected: (color) => widget.onSelectedColor(context, color),
), ),
); );
}, },