yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-07-31 04:46:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: callout emoji size should follow the document font size (#6590)

Browse Source
This commit is contained in:
Lucas 2024-10-21 18:00:32 +08:00 committed by GitHub
parent 068500df84
commit 5e09e96f7b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 132 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart
View File

@ -21,6 +21,7 @@ class EmojiPickerButton extends StatelessWidget {
this.showBorder = true,
this.enable = true,
this.margin,
this.buttonSize,
});
final String emoji;
@ -35,53 +36,129 @@ class EmojiPickerButton extends StatelessWidget {
final bool showBorder;
final bool enable;
final EdgeInsets? margin;
final Size? buttonSize;
@override
Widget build(BuildContext context) {
if (UniversalPlatform.isDesktopOrWeb) {
return AppFlowyPopover(
controller: popoverController,
constraints: BoxConstraints.expand(
width: emojiPickerSize.width,
height: emojiPickerSize.height,
),
return _DesktopEmojiPickerButton(
emoji: emoji,
onSubmitted: onSubmitted,
emojiPickerSize: emojiPickerSize,
emojiSize: emojiSize,
defaultIcon: defaultIcon,
offset: offset,
margin: EdgeInsets.zero,
direction: direction ?? PopoverDirection.rightWithTopAligned,
popupBuilder: (_) => Container(
width: emojiPickerSize.width,
height: emojiPickerSize.height,
padding: const EdgeInsets.all(4.0),
child: EmojiSelectionMenu(
onSubmitted: (emoji) => onSubmitted(emoji, popoverController),
onExit: () {},
),
),
child: Container(
width: 30.0,
height: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: showBorder
? Border.all(
color: Theme.of(context).dividerColor,
)
: null,
),
child: FlowyButton(
margin: emoji.isEmpty && defaultIcon != null
? EdgeInsets.zero
: const EdgeInsets.only(left: 2.0),
expandText: false,
text: emoji.isEmpty && defaultIcon != null
? defaultIcon!
: FlowyText.emoji(emoji, fontSize: emojiSize),
onTap: enable ? popoverController.show : null,
),
),
direction: direction,
title: title,
showBorder: showBorder,
enable: enable,
buttonSize: buttonSize,
);
}
return _MobileEmojiPickerButton(
emoji: emoji,
onSubmitted: onSubmitted,
emojiSize: emojiSize,
enable: enable,
title: title,
margin: margin,
);
}
}
class _DesktopEmojiPickerButton extends StatelessWidget {
_DesktopEmojiPickerButton({
required this.emoji,
required this.onSubmitted,
this.emojiPickerSize = const Size(360, 380),
this.emojiSize = 18.0,
this.defaultIcon,
this.offset,
this.direction,
this.title,
this.showBorder = true,
this.enable = true,
this.buttonSize,
});
final String emoji;
final double emojiSize;
final Size emojiPickerSize;
final void Function(String emoji, PopoverController? controller) onSubmitted;
final PopoverController popoverController = PopoverController();
final Widget? defaultIcon;
final Offset? offset;
final PopoverDirection? direction;
final String? title;
final bool showBorder;
final bool enable;
final Size? buttonSize;
@override
Widget build(BuildContext context) {
return AppFlowyPopover(
controller: popoverController,
constraints: BoxConstraints.expand(
width: emojiPickerSize.width,
height: emojiPickerSize.height,
),
offset: offset,
margin: EdgeInsets.zero,
direction: direction ?? PopoverDirection.rightWithTopAligned,
popupBuilder: (_) => Container(
width: emojiPickerSize.width,
height: emojiPickerSize.height,
padding: const EdgeInsets.all(4.0),
child: EmojiSelectionMenu(
onSubmitted: (emoji) => onSubmitted(emoji, popoverController),
onExit: () {},
),
),
child: Container(
width: buttonSize?.width ?? 30.0,
height: buttonSize?.height ?? 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: showBorder
? Border.all(
color: Theme.of(context).dividerColor,
)
: null,
),
child: FlowyButton(
margin: emoji.isEmpty && defaultIcon != null
? EdgeInsets.zero
: const EdgeInsets.only(left: 2.0),
expandText: false,
text: emoji.isEmpty && defaultIcon != null
? defaultIcon!
: FlowyText.emoji(emoji, fontSize: emojiSize),
onTap: enable ? popoverController.show : null,
),
),
);
}
}
class _MobileEmojiPickerButton extends StatelessWidget {
const _MobileEmojiPickerButton({
required this.emoji,
required this.onSubmitted,
this.emojiSize = 18.0,
this.enable = true,
this.title,
this.margin,
});
final String emoji;
final double emojiSize;
final void Function(String emoji, PopoverController? controller) onSubmitted;
final String? title;
final bool enable;
final EdgeInsets? margin;
@override
Widget build(BuildContext context) {
return FlowyButton(
useIntrinsicWidth: true,
margin:

20
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
View File

@ -173,6 +173,7 @@ class _CalloutBlockComponentWidgetState
final textDirection = calculateTextDirection(
layoutDirection: Directionality.maybeOf(context),
);
final (emojiSize, emojiButtonSize) = calculateEmojiSize();
Widget child = Container(
decoration: BoxDecoration(
@ -190,14 +191,14 @@ class _CalloutBlockComponentWidgetState
if (UniversalPlatform.isDesktopOrWeb) const HSpace(4.0),
// the emoji picker button for the note
EmojiPickerButton(
key: ValueKey(
emoji.toString(),
), // force to refresh the popover state
// force to refresh the popover state
key: ValueKey(widget.node.id + emoji),
enable: editorState.editable,
title: '',
emoji: emoji,
emojiSize: 15.0,
emojiSize: emojiSize,
showBorder: false,
buttonSize: emojiButtonSize,
onSubmitted: (emoji, controller) {
setEmoji(emoji);
controller?.close();
@ -277,4 +278,15 @@ class _CalloutBlockComponentWidgetState
);
await editorState.apply(transaction);
}
(double, Size) calculateEmojiSize() {
const double defaultEmojiSize = 16.0;
const Size defaultEmojiButtonSize = Size(30.0, 30.0);
final double emojiSize =
editorState.editorStyle.textStyleConfiguration.text.fontSize ??
defaultEmojiSize;
final emojiButtonSize =
defaultEmojiButtonSize * emojiSize / defaultEmojiSize;
return (emojiSize, emojiButtonSize);
}
}