feat: add change button for icon uploader

asjqkkkk · asjqkkkk · commit 0ef632750592 · 2025-02-14T22:32:06.000+08:00
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_drop_handler.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_drop_handler.dart
@@ -4,6 +4,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_p
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/shared/patterns/file_type_patterns.dart';
+import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/presentation/widgets/draggable_item/draggable_item.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -66,12 +67,22 @@ 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, _, __) => ChangeNotifierProvider(
+          create: (_) => getIt.get<EditorDropManagerState>(),
+          builder: (context, _) {
+            final topLevelEditorDropManagerState =
+                Provider.of<EditorDropManagerState>(context);
+            return DropTarget(
+              enable: dropState.isDropEnabled &&
+                  topLevelEditorDropManagerState.isDropEnabled,
+              onDragExited: (_) =>
+                  editorState.selectionService.removeDropTarget(),
+              onDragUpdated: (details) =>
+                  _onDragUpdated(details.globalPosition),
+              onDragDone: _onDragDone,
+              child: child,
+            );
+          },
         ),
       ),
     );
diff --git a/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/icon_uploader.dart b/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';
@@ -50,6 +50,8 @@ class _IconUploaderState extends State<IconUploader> {
 
   final List<_Image> pickedImages = [];
   final FocusNode focusNode = FocusNode();
+  final topEditorDropManagerState = getIt.get<EditorDropManagerState>();
+  final iconUploaderType = 'iconUploaderType';
 
   @override
   void initState() {
@@ -63,11 +65,17 @@ class _IconUploaderState extends State<IconUploader> {
         focusNode.requestFocus();
       });
     }
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      topEditorDropManagerState.add(iconUploaderType);
+    });
   }
 
   @override
   void dispose() {
     super.dispose();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      topEditorDropManagerState.remove(iconUploaderType);
+    });
     focusNode.dispose();
   }
 
@@ -97,27 +105,27 @@ 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),
                     onDragDone: (details) => loadImage(details.files),
                     child: MouseRegion(
                       cursor: SystemMouseCursors.click,
                       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
                               ? Theme.of(context).colorScheme.primary
                               : Theme.of(context).hintColor,
-                          child: Center(
+                          child: Container(
+                            alignment: Alignment.center,
                             child: pickedImages.isEmpty
-                                ? dragHint()
+                                ? (isHovering
+                                    ? hoveringWidget()
+                                    : dragHint(context))
                                 : previewImage(),
                           ),
                         ),
@@ -127,12 +135,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 +160,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 +339,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 +388,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,
         ),
       ),
diff --git a/frontend/appflowy_flutter/lib/startup/startup.dart b/frontend/appflowy_flutter/lib/startup/startup.dart
@@ -2,6 +2,7 @@ import 'dart:async';
 import 'dart:io';
 
 import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/plugins/document/presentation/editor_drop_manager.dart';
 import 'package:appflowy/util/expand_views.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
 import 'package:appflowy_backend/appflowy_backend.dart';
@@ -185,6 +186,7 @@ Future<void> initGetIt(
   );
   getIt.registerSingleton<PluginSandbox>(PluginSandbox());
   getIt.registerSingleton<ViewExpanderRegistry>(ViewExpanderRegistry());
+  getIt.registerSingleton<EditorDropManagerState>(EditorDropManagerState());
 
   await DependencyResolver.resolve(getIt, mode);
 }
diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.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",
