Close color picker when click outside in composer

core/lib/presentation/views/dialog/color_picker_dialog_builder.dart

@@ -5,7 +5,6 @@ import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:flex_color_picker/flex_color_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:pointer_interceptor/pointer_interceptor.dart';
 
 typedef SelectColorActionCallback = Function(Color? colorSelected);
 
@@ -41,8 +40,7 @@ class ColorPickerDialogBuilder {
 
   Future<dynamic> show() async {
     return Get.dialog(
-      PointerInterceptor(
+      AlertDialog(
-        child: AlertDialog(
         title: Text(
           title ?? '',
           textAlign: TextAlign.center,
@@ -151,7 +149,6 @@ class ColorPickerDialogBuilder {
                 }
               })
         ],
-        ),
       )
     );
   }

lib/features/base/widget/dialog_picker/color_dialog_picker.dart

@@ -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);
+  }
+}

lib/features/composer/presentation/composer_view_web.dart

@@ -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 ||
+      bool isOverlayEnabled = controller.mailboxDashBoardController.isDisplayedOverlayViewOnIFrame ||
-          MessageDialogActionManager().isDialogOpened) {
+          MessageDialogActionManager().isDialogOpened ||
+          ColorDialogPicker().isOpened.isTrue;
+
+      if (isOverlayEnabled) {
         return Positioned.fill(
           key: const ValueKey('tap-to-close'),
           child: PointerInterceptor(

lib/features/composer/presentation/controller/base_rich_text_controller.dart

@@ -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();
-  }
-}

lib/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart

@@ -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();

lib/features/composer/presentation/controller/rich_text_web_controller.dart

@@ -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),

lib/features/email/presentation/email_view.dart

@@ -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(),