diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart b/frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart index 443e2cbbc3..b6b173241c 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart @@ -260,6 +260,7 @@ class _SingleMobileInnerViewItemState extends State { child: FlowyText.regular( widget.view.name, fontSize: 16.0, + figmaLineHeight: 20.0, overflow: TextOverflow.ellipsis, ), ), @@ -297,12 +298,17 @@ class _SingleMobileInnerViewItemState extends State { ? FlowyText.emoji( widget.view.icon.value, fontSize: 18.0, + figmaLineHeight: 20.0, + optimizeEmojiAlign: true, ) : Opacity( opacity: 0.7, child: widget.view.defaultIcon(size: const Size.square(18)), ); - return SizedBox(width: 18.0, child: icon); + return SizedBox( + width: 18.0, + child: icon, + ); } // > button or ยท button diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart index 0551b03a3f..3f8de359f3 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart @@ -26,6 +26,8 @@ class FlowyText extends StatelessWidget { /// this is used to control the line height from Figma. final double? figmaLineHeight; + final bool optimizeEmojiAlign; + const FlowyText( this.text, { super.key, @@ -44,6 +46,7 @@ class FlowyText extends StatelessWidget { this.withTooltip = false, this.isEmoji = false, this.strutStyle, + this.optimizeEmojiAlign = false, }); FlowyText.small( @@ -62,6 +65,7 @@ class FlowyText extends StatelessWidget { this.isEmoji = false, this.strutStyle, this.figmaLineHeight, + this.optimizeEmojiAlign = false, }) : fontWeight = FontWeight.w400, fontSize = (Platform.isIOS || Platform.isAndroid) ? 14 : 12; @@ -82,6 +86,7 @@ class FlowyText extends StatelessWidget { this.isEmoji = false, this.strutStyle, this.figmaLineHeight, + this.optimizeEmojiAlign = false, }) : fontWeight = FontWeight.w400; const FlowyText.medium( @@ -101,6 +106,7 @@ class FlowyText extends StatelessWidget { this.isEmoji = false, this.strutStyle, this.figmaLineHeight, + this.optimizeEmojiAlign = false, }) : fontWeight = FontWeight.w500; const FlowyText.semibold( @@ -120,6 +126,7 @@ class FlowyText extends StatelessWidget { this.isEmoji = false, this.strutStyle, this.figmaLineHeight, + this.optimizeEmojiAlign = false, }) : fontWeight = FontWeight.w600; // Some emojis are not supported on Linux and Android, fallback to noto color emoji @@ -139,6 +146,7 @@ class FlowyText extends StatelessWidget { this.isEmoji = true, this.fontFamily, this.figmaLineHeight, + this.optimizeEmojiAlign = false, }) : fontWeight = FontWeight.w400, fallbackFontFamily = null; @@ -176,6 +184,9 @@ class FlowyText extends StatelessWidget { fontFamily: fontFamily, fontFamilyFallback: fallbackFontFamily, height: lineHeight, + leadingDistribution: isEmoji && optimizeEmojiAlign + ? TextLeadingDistribution.even + : null, ); if (selectable) { @@ -194,7 +205,8 @@ class FlowyText extends StatelessWidget { textAlign: textAlign, overflow: overflow ?? TextOverflow.clip, style: textStyle, - strutStyle: (Platform.isMacOS || Platform.isLinux) & !isEmoji + strutStyle: ((Platform.isMacOS || Platform.isLinux) & !isEmoji) || + (isEmoji && optimizeEmojiAlign) ? StrutStyle.fromTextStyle( textStyle, forceStrutHeight: true,