feat: add change button for icon uploader

Author: asjqkkkk

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_drop_handler.dart

@@ -66,12 +66,20 @@ class EditorDropHandler extends StatelessWidget {
           return true;
         },
         onAcceptWithDetails: _onDragViewDone,
-        builder: (context, _, __) => DropTarget(
-          enable: dropState.isDropEnabled,
-          onDragExited: (_) => editorState.selectionService.removeDropTarget(),
-          onDragUpdated: (details) => _onDragUpdated(details.globalPosition),
-          onDragDone: _onDragDone,
-          child: child,
+        builder: (context, _, __) => ValueListenableBuilder(
+          valueListenable: enableDocumentDragNotifier,
+          builder: (context, value, _) {
+            final enableDocumentDrag = value;
+            return DropTarget(
+              enable: dropState.isDropEnabled && enableDocumentDrag,
+              onDragExited: (_) =>
+                  editorState.selectionService.removeDropTarget(),
+              onDragUpdated: (details) =>
+                  _onDragUpdated(details.globalPosition),
+              onDragDone: _onDragDone,
+              child: child,
+            );
+          },
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_drop_manager.dart

@@ -15,3 +15,5 @@ class EditorDropManagerState extends ChangeNotifier {
 
   bool get isDropEnabled => _draggedTypes.isEmpty;
 }
+
+final enableDocumentDragNotifier = ValueNotifier(true);

frontend/appflowy_flutter/lib/shared/icon_emoji_picker/icon_uploader.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_drop_manager.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_util.dart';
 import 'package:appflowy/shared/appflowy_network_image.dart';
@@ -17,8 +18,7 @@ import 'package:desktop_drop/desktop_drop.dart';
 import 'package:dotted_border/dotted_border.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
-import 'package:flowy_infra_ui/style_widget/primary_rounded_button.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_svg/flowy_svg.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -45,6 +45,7 @@ class IconUploader extends StatefulWidget {
 }
 
 class _IconUploaderState extends State<IconUploader> {
+  bool isActive = false;
   bool isHovering = false;
   bool isUploading = false;
 
@@ -63,11 +64,17 @@ class _IconUploaderState extends State<IconUploader> {
         focusNode.requestFocus();
       });
     }
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      enableDocumentDragNotifier.value = false;
+    });
   }
 
   @override
   void dispose() {
     super.dispose();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      enableDocumentDragNotifier.value = true;
+    });
     focusNode.dispose();
   }
 
@@ -97,27 +104,35 @@ class _IconUploaderState extends State<IconUploader> {
               children: [
                 Expanded(
                   child: DropTarget(
-                    /// there is an issue with multiple DropTargets
-                    /// see https://github.com/MixinNetwork/flutter-plugins/issues/2
-                    enable: false,
-                    onDragEntered: (_) => setState(() => isHovering = true),
-                    onDragExited: (_) => setState(() => isHovering = false),
+                    onDragEntered: (_) => setState(() => isActive = true),
+                    onDragExited: (_) => setState(() => isActive = false),
                     onDragDone: (details) => loadImage(details.files),
                     child: MouseRegion(
                       cursor: SystemMouseCursors.click,
+                      onEnter: (_) => setState(() => isHovering = true),
+                      onExit: (_) => setState(() => isHovering = false),
                       child: GestureDetector(
                         behavior: HitTestBehavior.opaque,
-                        onTap: () => pickImage(),
+                        onTap: pickImage,
                         child: DottedBorder(
                           dashPattern: const [3, 3],
                           radius: const Radius.circular(8),
                           borderType: BorderType.RRect,
-                          color: isHovering
+                          color: isActive
                               ? Theme.of(context).colorScheme.primary
                               : Theme.of(context).hintColor,
-                          child: Center(
+                          child: Container(
+                            alignment: Alignment.center,
+                            decoration: isHovering
+                                ? BoxDecoration(
+                                    color: Color(0x0F1F2329),
+                                    borderRadius: BorderRadius.circular(8),
+                                  )
+                                : null,
                             child: pickedImages.isEmpty
-                                ? dragHint()
+                                ? (isActive
+                                    ? hoveringWidget()
+                                    : dragHint(context))
                                 : previewImage(),
                           ),
                         ),
@@ -127,12 +142,21 @@ class _IconUploaderState extends State<IconUploader> {
                 ),
                 Padding(
                   padding: const EdgeInsets.only(top: 16),
-                  child: Align(
-                    alignment: Alignment.centerRight,
-                    child: _ConfirmButton(
-                      onTap: uploadImage,
-                      enable: pickedImages.isNotEmpty,
-                    ),
+                  child: Row(
+                    children: [
+                      Spacer(),
+                      if (pickedImages.isNotEmpty)
+                        Padding(
+                          padding: EdgeInsets.only(right: 8),
+                          child: _ChangeIconButton(
+                            onTap: pickImage,
+                          ),
+                        ),
+                      _ConfirmButton(
+                        onTap: uploadImage,
+                        enable: pickedImages.isNotEmpty,
+                      ),
+                    ],
                   ),
                 ),
               ],
@@ -143,12 +167,49 @@ class _IconUploaderState extends State<IconUploader> {
     );
   }
 
-  Widget dragHint() => FlowyText(
-        LocaleKeys.document_imageBlock_upload_placeholder.tr(),
-        fontSize: 14,
-        fontWeight: FontWeight.w500,
-        color: Theme.of(context).hintColor,
-      );
+  Widget hoveringWidget() {
+    return Container(
+      color: Color(0xffE0F8FF),
+      child: Center(
+        child: FlowyText(
+          LocaleKeys.emojiIconPicker_iconUploader_dropToUpload.tr(),
+        ),
+      ),
+    );
+  }
+
+  Widget dragHint(BuildContext context) {
+    final style = TextStyle(
+      fontSize: 14,
+      color: Color(0xff666D76),
+      fontWeight: FontWeight.w500,
+    );
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 32),
+      child: RichText(
+        textAlign: TextAlign.center,
+        text: TextSpan(
+          children: [
+            TextSpan(
+              text:
+                  LocaleKeys.emojiIconPicker_iconUploader_placeholderLeft.tr(),
+            ),
+            TextSpan(
+              text: LocaleKeys.emojiIconPicker_iconUploader_placeholderUpload
+                  .tr(),
+              style: style.copyWith(color: Color(0xff00BCF0)),
+            ),
+            TextSpan(
+              text:
+                  LocaleKeys.emojiIconPicker_iconUploader_placeholderRight.tr(),
+              mouseCursor: SystemMouseCursors.click,
+            ),
+          ],
+          style: style,
+        ),
+      ),
+    );
+  }
 
   Widget previewImage() {
     final image = pickedImages.first;
@@ -285,6 +346,41 @@ class _IconUploaderState extends State<IconUploader> {
   }
 }
 
+class _ChangeIconButton extends StatelessWidget {
+  const _ChangeIconButton({required this.onTap});
+
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    return SizedBox(
+      height: 32,
+      width: 84,
+      child: FlowyButton(
+        text: FlowyText(
+          LocaleKeys.emojiIconPicker_iconUploader_change.tr(),
+          fontSize: 14.0,
+          fontWeight: FontWeight.w500,
+          figmaLineHeight: 20.0,
+          color: isDark ? Colors.white : Color(0xff1F2329),
+          textAlign: TextAlign.center,
+          overflow: TextOverflow.ellipsis,
+        ),
+        margin: const EdgeInsets.symmetric(horizontal: 14.0),
+        backgroundColor: Theme.of(context).colorScheme.surface,
+        hoverColor:
+            (isDark ? Colors.white : Color(0xffD1D8E0)).withValues(alpha: 0.9),
+        decoration: BoxDecoration(
+          border: Border.all(color: isDark ? Colors.white : Color(0xffD1D8E0)),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        onTap: onTap,
+      ),
+    );
+  }
+}
+
 class _ConfirmButton extends StatelessWidget {
   const _ConfirmButton({required this.onTap, this.enable = true});
 
@@ -299,6 +395,7 @@ class _ConfirmButton extends StatelessWidget {
         opacity: enable ? 1.0 : 0.5,
         child: PrimaryRoundedButton(
           text: LocaleKeys.button_confirm.tr(),
+          figmaLineHeight: 20.0,
           onTap: enable ? onTap : null,
         ),
       ),

frontend/appflowy_flutter/macos/build/ios/XCBuildData/PIFCache/project/PROJECT@v11_mod=a7fbf46937053896f73cc7c7ec6baefb_hash=bfdfe7dc352907fc980b868725387e98plugins=1OJSG6M1FOV3XYQCBH7Z29RZ0FPR9XDE1-json

@@ -0,0 +1 @@
+{"guid":"dc4b70c03e8043e50e38f2068887b1d4","name":"Pods","path":"/Users/morn/dev/samples/AppFlowy/frontend/appflowy_flutter/ios/Pods/Pods.xcodeproj/project.xcworkspace","projects":["PROJECT@v11_mod=a7fbf46937053896f73cc7c7ec6baefb_hash=bfdfe7dc352907fc980b868725387e98plugins=1OJSG6M1FOV3XYQCBH7Z29RZ0FPR9XDE1"]}

frontend/appflowy_flutter/macos/build/ios/XCBuildData/PIFCache/workspace/WORKSPACE@v11_hash=(null)_subobjects=9b6915bad2214bcc5eb58b855fe7b55a-json

@@ -161,6 +161,15 @@
     "csv": "CSV",
     "database": "Database"
   },
+  "emojiIconPicker": {
+    "iconUploader": {
+      "placeholderLeft": "Drag & drop a file, click to ",
+      "placeholderUpload": "Upload",
+      "placeholderRight": ", or paste an image link.",
+      "dropToUpload": "Drop a file to upload",
+      "change": "Change"
+    }
+  },
   "disclosureAction": {
     "rename": "Rename",
     "delete": "Delete",