From c659cf4ff2d1c374745c83e0bf5ad6baf5e157a4 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Mon, 27 Nov 2023 13:51:05 +0800 Subject: [PATCH] fix: mobile UI issues (#4020) * fix: color picker overflow * fix: image picker overflow * feat: expand list item to 48.0 --- .../setting/font/font_picker_screen.dart | 47 ++++++++++--------- .../language/language_picker_screen.dart | 43 +++++++++-------- .../show_flowy_mobile_bottom_sheet.dart | 2 +- .../document/presentation/editor_page.dart | 4 +- .../code_block/code_language_screen.dart | 15 +++--- .../editor_plugins/header/cover_editor.dart | 1 + .../header/document_header_node_widget.dart | 1 + .../image/unsplash_image_widget.dart | 4 +- .../image/upload_image_menu.dart | 5 +- .../lib/style_widget/icon_button.dart | 36 ++++++++------ 10 files changed, 91 insertions(+), 67 deletions(-) diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart index 6e1c8c3fad..7d4e709d3d 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart @@ -82,29 +82,32 @@ class _LanguagePickerPageState extends State { } final fontFamilyName = availableFonts[index - 1]; final displayName = parseFontFamilyName(fontFamilyName); - return InkWell( - onTap: () => context.pop(fontFamilyName), - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 4.0, - vertical: 12.0, - ), - child: Row( - children: [ - const HSpace(12.0), - FlowyText( - displayName, - fontFamily: - GoogleFonts.getFont(fontFamilyName).fontFamily, - ), - const Spacer(), - if (selectedFontFamilyName == fontFamilyName) - const Icon( - Icons.check, - size: 16, + return SizedBox( + height: 48.0, + child: InkWell( + onTap: () => context.pop(fontFamilyName), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 4.0, + vertical: 12.0, + ), + child: Row( + children: [ + const HSpace(12.0), + FlowyText( + displayName, + fontFamily: + GoogleFonts.getFont(fontFamilyName).fontFamily, ), - const HSpace(12.0), - ], + const Spacer(), + if (selectedFontFamilyName == fontFamilyName) + const Icon( + Icons.check, + size: 16, + ), + const HSpace(12.0), + ], + ), ), ), ); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart index ba89a28a23..f1dcb4d3ea 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart @@ -47,27 +47,30 @@ class _LanguagePickerPageState extends State { child: ListView.separated( itemBuilder: (context, index) { final locale = supportedLocales[index]; - return InkWell( - onTap: () => context.pop(locale), - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 4.0, - vertical: 12.0, - ), - child: Row( - children: [ - const HSpace(12.0), - FlowyText( - languageFromLocale(locale), - ), - const Spacer(), - if (EasyLocalization.of(context)!.locale == locale) - const Icon( - Icons.check, - size: 16, + return SizedBox( + height: 48.0, + child: InkWell( + onTap: () => context.pop(locale), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 4.0, + vertical: 12.0, + ), + child: Row( + children: [ + const HSpace(12.0), + FlowyText( + languageFromLocale(locale), ), - const HSpace(12.0), - ], + const Spacer(), + if (EasyLocalization.of(context)!.locale == locale) + const Icon( + Icons.check, + size: 16, + ), + const HSpace(12.0), + ], + ), ), ), ); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart index 742f12109b..2728102328 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart @@ -11,7 +11,7 @@ Future showFlowyMobileBottomSheet( context: context, isScrollControlled: isScrollControlled, builder: (context) => Padding( - padding: const EdgeInsets.fromLTRB(16, 16, 16, 32), + padding: const EdgeInsets.all(16.0), child: Column( mainAxisSize: MainAxisSize.min, children: [ diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart index 45f5bb45f1..135d1e4091 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart @@ -274,8 +274,8 @@ class _AppFlowyEditorPageState extends State { backgroundColor: theme.colorScheme.background, foregroundColor: theme.colorScheme.onSurface, iconColor: theme.iconTheme.color ?? theme.colorScheme.onSurface, - tabBarSelectedBackgroundColor: theme.colorScheme.background, - tabBarSelectedForegroundColor: theme.colorScheme.onSurface, + tabBarSelectedBackgroundColor: theme.colorScheme.onSurfaceVariant, + tabBarSelectedForegroundColor: theme.colorScheme.onPrimary, editorState: editorState, toolbarItems: getMobileToolbarItems(), child: Column( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart index 9e9832e10b..1ed08c6e05 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart @@ -31,13 +31,16 @@ class MobileCodeLanguagePickerScreen extends StatelessWidget { child: ListView.separated( itemBuilder: (context, index) { final language = codeBlockSupportedLanguages[index]; - return FlowyTextButton( - language.capitalize(), - padding: const EdgeInsets.symmetric( - horizontal: 16.0, - vertical: 4.0, + return SizedBox( + height: 48, + child: FlowyTextButton( + language.capitalize(), + padding: const EdgeInsets.symmetric( + horizontal: 16.0, + vertical: 4.0, + ), + onPressed: () => context.pop(language), ), - onPressed: () => context.pop(language), ); }, separatorBuilder: (_, __) => const Divider(), diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart index ea30112050..af6f278b6f 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart @@ -365,6 +365,7 @@ class _CoverColorPickerState extends State { platform: TargetPlatform.windows, ), child: SingleChildScrollView( + scrollDirection: Axis.horizontal, child: _buildColorItems( widget.backgroundColorOptions, widget.selectedBackgroundColorHex, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart index f29cfbf322..a22cd9b53c 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart @@ -431,6 +431,7 @@ class DocumentCoverState extends State { context, title: LocaleKeys.document_plugins_cover_changeCover.tr(), + isScrollControlled: true, builder: (context) { return ConstrainedBox( constraints: const BoxConstraints( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart index cf161e8092..93157eae33 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart @@ -83,7 +83,9 @@ class _UnsplashImageWidgetState extends State { value.connectionState != ConnectionState.done || data == null || data.isEmpty) { - return const CircularProgressIndicator.adaptive(); + return const Center( + child: CircularProgressIndicator.adaptive(), + ); } return GridView.count( crossAxisCount: 3, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart index 961e2deab6..4523994af5 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart @@ -202,9 +202,12 @@ class _UploadImageMenuState extends State { ); case UploadImageType.color: final theme = Theme.of(context); + final padding = PlatformExtension.isMobile + ? const EdgeInsets.all(16.0) + : const EdgeInsets.all(8.0); return Container( constraints: constraints, - padding: const EdgeInsets.all(8.0), + padding: padding, alignment: Alignment.center, child: CoverColorPicker( pickerBackgroundColor: theme.cardColor, diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart index 318b0c95e9..3102f0276e 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart @@ -1,3 +1,5 @@ +import 'dart:io'; + import 'package:flowy_infra/size.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart'; import 'package:flowy_infra_ui/widget/flowy_tooltip.dart'; @@ -52,6 +54,25 @@ class FlowyIconButton extends StatelessWidget { assert(size.width > iconPadding.horizontal); assert(size.height > iconPadding.vertical); + child = Padding( + padding: iconPadding, + child: Center(child: child), + ); + + if (Platform.isMacOS || Platform.isWindows || Platform.isLinux) { + child = FlowyHover( + isSelected: isSelected != null ? () => isSelected! : null, + style: HoverStyle( + hoverColor: hoverColor, + foregroundColorOnHover: + iconColorOnHover ?? Theme.of(context).iconTheme.color, + //Do not set background here. Use [fillColor] instead. + ), + resetHoverOnRebuild: false, + child: child, + ); + } + return Container( constraints: BoxConstraints.tightFor( width: size.width, @@ -76,20 +97,7 @@ class FlowyIconButton extends StatelessWidget { highlightColor: Colors.transparent, elevation: 0, onPressed: onPressed, - child: FlowyHover( - isSelected: isSelected != null ? () => isSelected! : null, - style: HoverStyle( - hoverColor: hoverColor, - foregroundColorOnHover: - iconColorOnHover ?? Theme.of(context).iconTheme.color, - //Do not set background here. Use [fillColor] instead. - ), - resetHoverOnRebuild: false, - child: Padding( - padding: iconPadding, - child: Center(child: child), - ), - ), + child: child, ), ), );