yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-11-01 10:33:29 +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,
this.onSelectedEmoji,
this.onSelectedIcon,
this.enableBackgroundColorSelection = true,
this.tabs = const [PickerTabType.emoji],
});
final void Function(EmojiPickerResult result)? onSelectedEmoji;
final void Function(IconGroup? group, Icon? icon, String? color)?
onSelectedIcon;
final bool enableBackgroundColorSelection;
final List<PickerTabType> tabs;
@override
@ -145,8 +147,8 @@ class _FlowyIconEmojiPickerState extends State<FlowyIconEmojiPicker>
Widget _buildIconPicker() {
return FlowyIconPicker(
enableBackgroundColorSelection: widget.enableBackgroundColorSelection,
onSelectedIcon: (iconGroup, icon, color) {
debugPrint('icon: ${icon.toJson()}, color: $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({
super.key,
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
State<FlowyIconPicker> createState() => _FlowyIconPickerState();
@ -163,11 +165,14 @@ class _FlowyIconPickerState extends State<FlowyIconPicker> {
.toList();
return IconPicker(
iconGroups: filteredIconGroups,
enableBackgroundColorSelection:
widget.enableBackgroundColorSelection,
onSelectedIcon: widget.onSelectedIcon,
);
}
return IconPicker(
iconGroups: iconGroups,
enableBackgroundColorSelection: widget.enableBackgroundColorSelection,
onSelectedIcon: widget.onSelectedIcon,
);
},
@ -179,11 +184,13 @@ class IconPicker extends StatefulWidget {
const IconPicker({
super.key,
required this.onSelectedIcon,
required this.enableBackgroundColorSelection,
required this.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
State<IconPicker> createState() => _IconPickerState();
@ -212,14 +219,21 @@ class _IconPickerState extends State<IconPicker> {
Wrap(
children: iconGroup.icons.map(
(icon) {
return _Icon(
icon: icon,
mutex: mutex,
onSelectedColor: (context, color) {
widget.onSelectedIcon(iconGroup, icon, color);
PopoverContainer.of(context).close();
},
);
return widget.enableBackgroundColorSelection
? _Icon(
icon: icon,
mutex: mutex,
onSelectedColor: (context, color) {
widget.onSelectedIcon(iconGroup, icon, color);
PopoverContainer.of(context).close();
},
)
: _IconNoBackground(
icon: icon,
onSelectedIcon: () {
widget.onSelectedIcon(iconGroup, icon, null);
},
);
},
).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({
required this.icon,
required this.mutex,
@ -246,33 +291,28 @@ class _Icon extends StatelessWidget {
final PopoverMutex mutex;
final void Function(BuildContext context, String color) onSelectedColor;
@override
State<_Icon> createState() => _IconState();
}
class _IconState extends State<_Icon> {
final PopoverController _popoverController = PopoverController();
@override
Widget build(BuildContext context) {
return AppFlowyPopover(
direction: PopoverDirection.bottomWithCenterAligned,
offset: const Offset(0, 6),
mutex: mutex,
child: FlowyTooltip(
message: icon.displayName,
preferBelow: false,
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,
),
),
),
mutex: widget.mutex,
child: _IconNoBackground(
icon: widget.icon,
onSelectedIcon: () => _popoverController.show(),
),
popupBuilder: (context) {
return Container(
padding: const EdgeInsets.all(6.0),
child: IconColorPicker(
onSelected: (color) => onSelectedColor(context, color),
onSelected: (color) => widget.onSelectedColor(context, color),
),
);
},