Close color picker when click outside in composer

2025-08-26 17:39:00 +07:00
parent ff0ac57c1d
commit a4b0885477
7 changed files with 166 additions and 150 deletions
@@ -0,0 +1,46 @@
+import 'package:core/presentation/views/dialog/color_picker_dialog_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+class ColorDialogPicker {
+  static final _instance = ColorDialogPicker._();
+
+  factory ColorDialogPicker() => _instance;
+
+  ColorDialogPicker._();
+
+  final _isOpened = RxBool(false);
+
+  RxBool get isOpened => _isOpened;
+
+  Future<void> showTwakeColorPicker(
+    BuildContext context,
+    Color currentColor,
+    {
+      Function(Color?)? onSelectColor,
+      VoidCallback? onResetToDefault,
+    }
+  ) async {
+    _isOpened.value = true;
+    final appLocalizations = AppLocalizations.of(context);
+
+    return ColorPickerDialogBuilder(
+      ValueNotifier<Color>(currentColor),
+      title: appLocalizations.chooseAColor,
+      textActionSetColor: appLocalizations.setColor,
+      textActionResetDefault: appLocalizations.resetToDefault,
+      textActionCancel: appLocalizations.cancel,
+      cancelActionCallback: popBack,
+      resetToDefaultActionCallback: () {
+        onResetToDefault?.call();
+        popBack();
+      },
+      setColorActionCallback: (selectedColor) {
+        onSelectColor?.call(selectedColor);
+        popBack();
+      },
+    ).show().whenComplete(() => _isOpened.value = false);
+  }
+}
@@ -5,6 +5,7 @@ import 'package:get/get.dart';
 import 'package:model/email/prefix_email_address.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:tmail_ui_user/features/base/mixin/message_dialog_action_manager.dart';
+import 'package:tmail_ui_user/features/base/widget/dialog_picker/color_dialog_picker.dart';
 import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/extensions/composer_print_draft_extension.dart';
 import 'package:tmail_ui_user/features/composer/presentation/extensions/handle_edit_recipient_extension.dart';
@@ -42,8 +43,11 @@ class ComposerView extends GetWidget<ComposerController> {
  @override
  Widget build(BuildContext context) {
    final iframeOverlay = Obx(() {
-      if (controller.mailboxDashBoardController.isDisplayedOverlayViewOnIFrame ||
-          MessageDialogActionManager().isDialogOpened) {
+      bool isOverlayEnabled = controller.mailboxDashBoardController.isDisplayedOverlayViewOnIFrame ||
+          MessageDialogActionManager().isDialogOpened ||
+          ColorDialogPicker().isOpened.isTrue;
+
+      if (isOverlayEnabled) {
        return Positioned.fill(
          key: const ValueKey('tap-to-close'),
          child: PointerInterceptor(
@@ -1,35 +0,0 @@
-
-import 'package:core/presentation/views/dialog/color_picker_dialog_builder.dart';
-import 'package:flutter/material.dart';
-import 'package:get/get.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
-import 'package:tmail_ui_user/main/routes/route_navigation.dart';
-
-abstract class BaseRichTextController extends GetxController {
-
-  void openMenuSelectColor(
-    BuildContext context,
-    Color currentColor,
-    {
-      Function(Color?)? onSelectColor,
-      VoidCallback? onResetToDefault,
-    }
-  ) async {
-    await ColorPickerDialogBuilder(
-        ValueNotifier<Color>(currentColor),
-        title: AppLocalizations.of(context).chooseAColor,
-        textActionSetColor: AppLocalizations.of(context).setColor,
-        textActionResetDefault: AppLocalizations.of(context).resetToDefault,
-        textActionCancel: AppLocalizations.of(context).cancel,
-        cancelActionCallback: () => popBack(),
-        resetToDefaultActionCallback: () {
-          onResetToDefault?.call();
-          popBack();
-        },
-        setColorActionCallback: (selectedColor) {
-          onSelectColor?.call(selectedColor);
-          popBack();
-        }
-    ).show();
-  }
-}
@@ -5,13 +5,13 @@ import 'package:core/utils/html/html_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:get/get.dart';
 import 'package:rich_text_composer/rich_text_composer.dart';
-import 'package:tmail_ui_user/features/composer/presentation/controller/base_rich_text_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/header_style_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/inline_image.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-class RichTextMobileTabletController extends BaseRichTextController {
+class RichTextMobileTabletController extends GetxController {
  HtmlEditorApi? htmlEditorApi;

  final RichTextController richTextController = RichTextController();
@@ -9,7 +9,7 @@ import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:html_editor_enhanced/html_editor.dart';
-import 'package:tmail_ui_user/features/composer/presentation/controller/base_rich_text_controller.dart';
+import 'package:tmail_ui_user/features/base/widget/dialog_picker/color_dialog_picker.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/code_view_state.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/dropdown_menu_font_status.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/font_name_type.dart';
@@ -21,7 +21,7 @@ import 'package:tmail_ui_user/features/composer/presentation/model/paragraph_typ
 import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';

-class RichTextWebController extends BaseRichTextController {
+class RichTextWebController extends GetxController {

  static const List<int> fontSizeList = [10, 12, 14, 15, 16, 18, 24, 36, 48, 64];
  static const int fontSizeDefault = 16;
@@ -140,7 +140,7 @@ class RichTextWebController extends BaseRichTextController {
  void applyRichTextStyle(BuildContext context, RichTextStyleType textStyleType) {
    switch(textStyleType) {
      case RichTextStyleType.textColor:
-        openMenuSelectColor(
+        ColorDialogPicker().showTwakeColorPicker(
          context,
          selectedTextColor.value,
          onResetToDefault: () => _applyForegroundColor(Colors.black),
@@ -148,7 +148,7 @@ class RichTextWebController extends BaseRichTextController {
        );
        break;
      case RichTextStyleType.textBackgroundColor:
-        openMenuSelectColor(
+        ColorDialogPicker().showTwakeColorPicker(
          context,
          selectedTextBackgroundColor.value,
          onResetToDefault: () => applyBackgroundColor(Colors.white),
@@ -14,6 +14,7 @@ import 'package:model/extensions/presentation_email_extension.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:tmail_ui_user/features/base/mixin/message_dialog_action_manager.dart';
+import 'package:tmail_ui_user/features/base/widget/dialog_picker/color_dialog_picker.dart';
 import 'package:tmail_ui_user/features/base/widget/optional_expanded.dart';
 import 'package:tmail_ui_user/features/base/widget/optional_scroll.dart';
 import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
@@ -529,9 +530,12 @@ class EmailView extends GetWidget<SingleEmailController> {
            ),
          ),
          Obx(() {
-            if (controller.mailboxDashBoardController.isDisplayedOverlayViewOnIFrame ||
+            bool isOverlayEnabled = controller.mailboxDashBoardController.isDisplayedOverlayViewOnIFrame ||
                MessageDialogActionManager().isDialogOpened ||
-                EmailActionReactor.isDialogOpened) {
+                EmailActionReactor.isDialogOpened ||
+                ColorDialogPicker().isOpened.isTrue;
+
+            if (isOverlayEnabled) {
              return Positioned.fill(
                child: PointerInterceptor(
                  child: const SizedBox.expand(),