From 366e28752cbd66742ac35bea546afc83c52dc918 Mon Sep 17 00:00:00 2001 From: Aslam <aslam.develop912@gmail.com> Date: Thu, 21 Dec 2023 07:01:37 +0530 Subject: [PATCH] fix: text overflow issue of font family dropdown (#3348) * fixed text overflow issue of font family dropdown * added tooltip delay * code review fixes: unwanted key removed; tooltip added for all fonts; delay time reduces; * Update frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart --------- Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io> --- .../font_family_setting.dart | 66 ++++++++++--------- 1 file changed, 36 insertions(+), 30 deletions(-) diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart index 1a03e7dc54..0006973d17 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart @@ -173,37 +173,43 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> { TextStyle style, ) { final buttonFontFamily = parseFontFamilyName(style.fontFamily!); - return SizedBox( - key: UniqueKey(), - height: 32, - child: FlowyButton( - key: Key(buttonFontFamily), - onHover: (_) => FocusScope.of(context).unfocus(), - text: FlowyText.medium( - parseFontFamilyName(style.fontFamily!), - fontFamily: style.fontFamily!, - ), - rightIcon: - buttonFontFamily == parseFontFamilyName(widget.currentFontFamily) - ? const FlowySvg( - FlowySvgs.check_s, - ) - : null, - onTap: () { - if (widget.onFontFamilyChanged != null) { - widget.onFontFamilyChanged!(style.fontFamily!); - } else { - final fontFamily = style.fontFamily!.parseFontFamilyName(); - if (parseFontFamilyName(widget.currentFontFamily) != - buttonFontFamily) { - context.read<AppearanceSettingsCubit>().setFontFamily(fontFamily); - context - .read<DocumentAppearanceCubit>() - .syncFontFamily(fontFamily); + + return Tooltip( + message: buttonFontFamily, + waitDuration: const Duration(milliseconds: 150), + child: SizedBox( + key: ValueKey(buttonFontFamily), + height: 32, + child: FlowyButton( + onHover: (_) => FocusScope.of(context).unfocus(), + text: FlowyText.medium( + parseFontFamilyName(style.fontFamily!), + fontFamily: style.fontFamily!, + ), + rightIcon: + buttonFontFamily == parseFontFamilyName(widget.currentFontFamily) + ? const FlowySvg( + FlowySvgs.check_s, + ) + : null, + onTap: () { + if (widget.onFontFamilyChanged != null) { + widget.onFontFamilyChanged!(style.fontFamily!); + } else { + final fontFamily = style.fontFamily!.parseFontFamilyName(); + if (parseFontFamilyName(widget.currentFontFamily) != + buttonFontFamily) { + context + .read<AppearanceSettingsCubit>() + .setFontFamily(fontFamily); + context + .read<DocumentAppearanceCubit>() + .syncFontFamily(fontFamily); + } } - } - PopoverContainer.of(context).close(); - }, + PopoverContainer.of(context).close(); + }, + ), ), ); }