From 1142b227c7c226e83061197bbb140bfde92db1a9 Mon Sep 17 00:00:00 2001 From: LucasXu0 Date: Wed, 2 Apr 2025 11:06:21 +0800 Subject: [PATCH] fix: icon and emoji doesn't align in mention page menu --- .../mobile_inline_actions_menu_group.dart | 4 ++-- .../header/emoji_icon_widget.dart | 16 +++++++--------- .../inline_actions/handlers/child_page.dart | 2 +- .../handlers/inline_page_reference.dart | 19 +++++++++++++------ .../inline_actions/inline_actions_result.dart | 4 ++-- .../widgets/inline_actions_menu_group.dart | 6 +++--- .../home/menu/view/view_item.dart | 6 +++++- 7 files changed, 33 insertions(+), 24 deletions(-) diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/inline_actions/mobile_inline_actions_menu_group.dart b/frontend/appflowy_flutter/lib/mobile/presentation/inline_actions/mobile_inline_actions_menu_group.dart index 862c9876f26a2..f340319254b4a 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/inline_actions/mobile_inline_actions_menu_group.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/inline_actions/mobile_inline_actions_menu_group.dart @@ -102,7 +102,7 @@ class MobileInlineActionsWidget extends StatelessWidget { @override Widget build(BuildContext context) { - final hasIcon = item.icon != null; + final hasIcon = item.iconBuilder != null; return Container( height: 36, decoration: BoxDecoration( @@ -119,7 +119,7 @@ class MobileInlineActionsWidget extends StatelessWidget { child: Row( children: [ if (hasIcon) ...[ - item.icon!.call(isSelected), + item.iconBuilder!.call(isSelected), SizedBox(width: 12), ], Flexible( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart index 91ae1af354a31..cda76233d648d 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart @@ -8,6 +8,7 @@ import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart'; import 'package:appflowy/user/application/user_service.dart'; import 'package:appflowy_backend/log.dart'; import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart'; +import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_svg/flowy_svg.dart'; import 'package:flutter/material.dart'; import 'package:string_validator/string_validator.dart'; @@ -113,24 +114,21 @@ class _RawEmojiIconWidgetState extends State { try { switch (widget.emoji.type) { case FlowyIconType.emoji: - return EmojiText( - emoji: widget.emoji.emoji, + return FlowyText.emoji( + widget.emoji.emoji, fontSize: widget.emojiSize, textAlign: TextAlign.justify, lineHeight: widget.lineHeight, ); case FlowyIconType.icon: - IconsData iconData = - IconsData.fromJson(jsonDecode(widget.emoji.emoji)); + IconsData iconData = IconsData.fromJson( + jsonDecode(widget.emoji.emoji), + ); if (!widget.enableColor) { iconData = iconData.noColor(); } - /// Under the same width conditions, icons on macOS seem to appear - /// larger than emojis, so 0.9 is used here to slightly reduce the - /// size of the icons - final iconSize = - Platform.isMacOS ? widget.emojiSize * 0.9 : widget.emojiSize; + final iconSize = widget.emojiSize; return IconWidget( iconsData: iconData, size: iconSize, diff --git a/frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/child_page.dart b/frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/child_page.dart index d29a1f86bf698..dc5b424bcd5e4 100644 --- a/frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/child_page.dart +++ b/frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/child_page.dart @@ -24,7 +24,7 @@ class InlineChildPageService extends InlineActionsDelegate { results.add( InlineActionsMenuItem( label: LocaleKeys.inlineActions_createPage.tr(args: [search]), - icon: (_) => const FlowySvg(FlowySvgs.add_s), + iconBuilder: (_) => const FlowySvg(FlowySvgs.add_s), onSelected: (context, editorState, service, replacement) => _onSelected(context, editorState, service, replacement, search), ), diff --git a/frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/inline_page_reference.dart b/frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/inline_page_reference.dart index 27a632e8ef0bc..e13668ed911ab 100644 --- a/frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/inline_page_reference.dart +++ b/frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/inline_page_reference.dart @@ -235,12 +235,19 @@ class InlinePageReferenceService extends InlineActionsDelegate { InlineActionsMenuItem _fromView(ViewPB view) => InlineActionsMenuItem( keywords: [view.nameOrDefault.toLowerCase()], label: view.nameOrDefault, - icon: (onSelected) => view.icon.value.isNotEmpty - ? RawEmojiIconWidget( - emoji: view.icon.toEmojiIconData(), - emojiSize: 14, - ) - : view.defaultIcon(), + iconBuilder: (onSelected) { + final child = view.icon.value.isNotEmpty + ? RawEmojiIconWidget( + emoji: view.icon.toEmojiIconData(), + emojiSize: 16.0, + lineHeight: 18.0 / 16.0, + ) + : view.defaultIcon(size: const Size(16, 16)); + return SizedBox( + width: 16, + child: child, + ); + }, onSelected: (context, editorState, menu, replace) => insertPage ? _onInsertPageRef(view, context, editorState, replace) : _onInsertLinkRef(view, context, editorState, menu, replace), diff --git a/frontend/appflowy_flutter/lib/plugins/inline_actions/inline_actions_result.dart b/frontend/appflowy_flutter/lib/plugins/inline_actions/inline_actions_result.dart index 8da964708408e..1fe2703870402 100644 --- a/frontend/appflowy_flutter/lib/plugins/inline_actions/inline_actions_result.dart +++ b/frontend/appflowy_flutter/lib/plugins/inline_actions/inline_actions_result.dart @@ -12,13 +12,13 @@ typedef SelectItemHandler = void Function( class InlineActionsMenuItem { InlineActionsMenuItem({ required this.label, - this.icon, + this.iconBuilder, this.keywords, this.onSelected, }); final String label; - final Widget Function(bool onSelected)? icon; + final Widget Function(bool onSelected)? iconBuilder; final List? keywords; final SelectItemHandler? onSelected; } diff --git a/frontend/appflowy_flutter/lib/plugins/inline_actions/widgets/inline_actions_menu_group.dart b/frontend/appflowy_flutter/lib/plugins/inline_actions/widgets/inline_actions_menu_group.dart index f2d22138f7736..123cfc11779f6 100644 --- a/frontend/appflowy_flutter/lib/plugins/inline_actions/widgets/inline_actions_menu_group.dart +++ b/frontend/appflowy_flutter/lib/plugins/inline_actions/widgets/inline_actions_menu_group.dart @@ -92,8 +92,8 @@ class InlineActionsWidget extends StatefulWidget { class _InlineActionsWidgetState extends State { @override Widget build(BuildContext context) { - final icon = widget.item.icon; - final hasIcon = icon != null; + final iconBuilder = widget.item.iconBuilder; + final hasIcon = iconBuilder != null; return Padding( padding: const EdgeInsets.symmetric(vertical: 2), child: SizedBox( @@ -104,7 +104,7 @@ class _InlineActionsWidgetState extends State { text: Row( children: [ if (hasIcon) ...[ - icon.call(widget.isSelected), + iconBuilder.call(widget.isSelected), SizedBox(width: 12), ], Flexible( diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart index ae9059c623189..22182f742919c 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart @@ -632,7 +632,11 @@ class _SingleInnerViewItemState extends State { Widget _buildViewIconButton() { final iconData = widget.view.icon.toEmojiIconData(); final icon = iconData.isNotEmpty - ? RawEmojiIconWidget(emoji: iconData, emojiSize: 16.0) + ? RawEmojiIconWidget( + emoji: iconData, + emojiSize: 16.0, + lineHeight: 18.0 / 16.0, + ) : Opacity(opacity: 0.6, child: widget.view.defaultIcon()); final Widget child = AppFlowyPopover(