From 7c93a0ab14935496a97e3c1be9292e3b9eb71f0b Mon Sep 17 00:00:00 2001
From: "Lucas.Xu" <lucas.xu@appflowy.io>
Date: Sat, 17 Aug 2024 11:50:00 +0800
Subject: [PATCH] fix: upload image button ui on mobile

---
 .../upload_image_menu/upload_image_menu.dart  | 54 +++++++++----------
 .../widgets/upload_image_file_widget.dart     |  4 +-
 .../lib/style_widget/button.dart              | 10 ++--
 3 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/upload_image_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/upload_image_menu.dart
index 70b54e0da1..5b33de65ed 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/upload_image_menu.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/upload_image_menu.dart
@@ -121,38 +121,34 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
     final type = values[currentTabIndex];
     switch (type) {
       case UploadImageType.local:
-        return Column(
-          children: [
-            Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: Container(
-                alignment: Alignment.center,
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(8),
-                  border: Border.all(
-                    color: Theme.of(context).colorScheme.outline,
-                  ),
-                ),
-                constraints: constraints,
-                child: Column(
-                  children: [
-                    UploadImageFileWidget(
-                      allowMultipleImages: widget.allowMultipleImages,
-                      onPickFiles: widget.onSelectedLocalImages,
-                    ),
-                  ],
+        Widget child = UploadImageFileWidget(
+          allowMultipleImages: widget.allowMultipleImages,
+          onPickFiles: widget.onSelectedLocalImages,
+        );
+        if (PlatformExtension.isDesktop) {
+          child = Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Container(
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(8),
+                border: Border.all(
+                  color: Theme.of(context).colorScheme.outline,
                 ),
               ),
+              constraints: constraints,
+              child: child,
             ),
-            // if (widget.limitMaximumImageSize) ...[
-            //   FlowyText(
-            //     LocaleKeys.document_imageBlock_maximumImageSize.tr(),
-            //     fontSize: 10.0,
-            //     color: Theme.of(context).hintColor,
-            //   ),
-            // ],
-          ],
-        );
+          );
+        } else {
+          child = Padding(
+            padding:
+                const EdgeInsets.symmetric(horizontal: 8.0, vertical: 12.0),
+            child: child,
+          );
+        }
+        return child;
+
       case UploadImageType.url:
         return Container(
           padding: const EdgeInsets.all(8.0),
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/upload_image_file_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/upload_image_file_widget.dart
index e9a6ea677d..0595e79d7c 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/upload_image_file_widget.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/upload_image_file_widget.dart
@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/shared/permission/permission_checker.dart';
 import 'package:appflowy/startup/startup.dart';
@@ -9,6 +7,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flutter/material.dart';
 import 'package:image_picker/image_picker.dart';
 
 class UploadImageFileWidget extends StatelessWidget {
@@ -27,6 +26,7 @@ class UploadImageFileWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     final child = FlowyButton(
       showDefaultBoxDecorationOnMobile: true,
+      radius: PlatformExtension.isMobile ? BorderRadius.circular(8.0) : null,
       text: Container(
         margin: const EdgeInsets.all(4.0),
         alignment: Alignment.center,
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
index af5370dbfa..2c9bcc33f1 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
@@ -263,10 +263,12 @@ class FlowyButton extends StatelessWidget {
                 (Platform.isIOS || Platform.isAndroid)
             ? BoxDecoration(
                 border: Border.all(
-                color: borderColor ??
-                    Theme.of(context).colorScheme.surfaceContainerHighest,
-                width: 1.0,
-              ))
+                  color: borderColor ??
+                      Theme.of(context).colorScheme.surfaceContainerHighest,
+                  width: 1.0,
+                ),
+                borderRadius: radius,
+              )
             : null);
 
     return Container(