fix: mobile UI issues (#4020)

* fix: color picker overflow * fix: image picker overflow * feat: expand list item to 48.0
AppFlowy-IO · Nov 27, 2023 · c659cf4 · c659cf4
1 parent cac3acd
commit c659cf4
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 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
@@ -82,29 +82,32 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
             }
             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/...end/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart b/...end/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart
@@ -47,27 +47,30 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
         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/...tend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart b/...tend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart
@@ -11,7 +11,7 @@ Future<T?> showFlowyMobileBottomSheet<T>(
     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
@@ -274,8 +274,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
         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/...ter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart b/...ter/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/...ppflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart b/...ppflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart
@@ -365,6 +365,7 @@ class _CoverColorPickerState extends State<CoverColorPicker> {
           platform: TargetPlatform.windows,
         ),
         child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
           child: _buildColorItems(
             widget.backgroundColorOptions,
             widget.selectedBackgroundColorHex,

diff --git a/.../lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart b/.../lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
@@ -431,6 +431,7 @@ class DocumentCoverState extends State<DocumentCover> {
                         context,
                         title:
                             LocaleKeys.document_plugins_cover_changeCover.tr(),
+                        isScrollControlled: true,
                         builder: (context) {
                           return ConstrainedBox(
                             constraints: const BoxConstraints(

diff --git a/...flutter/lib/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart b/...flutter/lib/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart
@@ -83,7 +83,9 @@ class _UnsplashImageWidgetState extends State<UnsplashImageWidget> {
                   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/...owy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart b/...owy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart
@@ -202,9 +202,12 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
               );
       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
@@ -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,
         ),
       ),
     );