TF-733 Apply change text background color to body composer on web

core/lib/presentation/extensions/color_extension.dart

@@ -121,6 +121,8 @@ extension AppColor on Color {
   static const colorButtonCancelDialog = Color(0x0D000000);
   static const colorShadowComposerButton = Color(0x99007AFF);
   static const colorBackgroundTagFilter = Color(0x6D7885);
+  static const colorDefaultRichTextButton = Color(0xFF99A2AD);
+  static const colorFocusRichTextButton = Color(0x146D7885);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

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

@@ -11,6 +11,7 @@ class ColorPickerDialogBuilder {
 
   final SelectColorActionCallback? setColorActionCallback;
   final VoidCallback? cancelActionCallback;
+  final VoidCallback? resetToDefaultActionCallback;
   final BuildContext _context;
   final Color defaultColor;
   final Color _currentColor;
@@ -31,9 +32,10 @@ class ColorPickerDialogBuilder {
       this.textActionResetDefault,
       this.defaultColor = Colors.black,
       this.setColorActionCallback,
-      this.cancelActionCallback
+      this.cancelActionCallback,
+      this.resetToDefaultActionCallback
     }
-  );
+  ) : _colorSelected = _currentColor;
 
   Future show() async {
     await showDialog(context: _context, builder: (BuildContext context) {
@@ -99,7 +101,7 @@ class ColorPickerDialogBuilder {
                     fontWeight: FontWeight.normal),
                 bgColor: Colors.white,
                 borderColor: Colors.black26,
-                onTap: () => setColorActionCallback?.call(Colors.black)),
+                onTap: () => resetToDefaultActionCallback?.call()),
             buildButtonWrapText(
                 textActionSetColor ?? '',
                 radius: 5,

lib/features/composer/presentation/composer_view_web.dart

@@ -735,9 +735,10 @@ class ComposerView extends GetWidget<ComposerController>
   }
 
   Widget _buildToolbarRichTextWidget(BuildContext context) {
-    return Padding(
+    return Container(
       padding: const EdgeInsets.only(left: 20, top: 4, bottom: 8),
-      child: Row(
+      alignment: Alignment.centerLeft,
+      child: Wrap(
         children: RichTextStyleType.values.map((textType) => Obx(() {
           switch(textType) {
             case RichTextStyleType.textColor:
@@ -746,6 +747,15 @@ class ComposerView extends GetWidget<ComposerController>
                   colorSelected: controller.richTextWebController.selectedTextColor.value,
                   tooltip: textType.getTooltipButton(context),
                   onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType));
+            case RichTextStyleType.textBackgroundColor:
+              return Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 2),
+                child: buildIconColorText(
+                    iconData: textType.getIconData(),
+                    colorSelected: controller.richTextWebController.selectedTextBackgroundColor.value,
+                    tooltip: textType.getTooltipButton(context),
+                    onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType)),
+              );
             default:
               return buildIconStyleText(
                   path: textType.getIcon(imagePaths),

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

@@ -10,7 +10,10 @@ abstract class BaseRichTextController extends GetxController {
   void openMenuSelectColor(
     BuildContext context,
     Color currentColor,
-    {Function(Color?)? onSelectColor}
+    {
+      Function(Color?)? onSelectColor,
+      VoidCallback? onResetToDefault,
+    }
   ) async {
     await ColorPickerDialogBuilder(
         context,
@@ -20,6 +23,10 @@ abstract class BaseRichTextController extends GetxController {
         textActionResetDefault: AppLocalizations.of(context).resetToDefault,
         textActionCancel: AppLocalizations.of(context).cancel,
         cancelActionCallback: () => popBack(),
+        resetToDefaultActionCallback: () {
+          onResetToDefault?.call();
+          popBack();
+        },
         setColorActionCallback: (selectedColor) {
           onSelectColor?.call(selectedColor);
           popBack();

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

@@ -20,6 +20,7 @@ class RichTextWebController extends BaseRichTextController {
 
   final listTextStyleApply = RxList<RichTextStyleType>();
   final selectedTextColor = Colors.black.obs;
+  final selectedTextBackgroundColor = Colors.transparent.obs;
 
   void onEditorSettingsChange(EditorSettings settings) {
     log('RichTextWebController::onEditorSettingsChange():');
@@ -47,14 +48,23 @@ class RichTextWebController extends BaseRichTextController {
         openMenuSelectColor(
             context,
             selectedTextColor.value,
+            onResetToDefault: () {
+              final colorAsString = (Colors.black.value & 0xFFFFFF)
+                  .toRadixString(16)
+                  .padLeft(6, '0')
+                  .toUpperCase();
+              selectedTextColor.value = Colors.black;
+              editorController.execCommand(
+                  textStyleType.commandAction,
+                  argument: colorAsString);
+            },
             onSelectColor: (selectedColor) {
                 final newColor = selectedColor ?? Colors.black;
                 final colorAsString = (newColor.value & 0xFFFFFF)
                     .toRadixString(16)
                     .padLeft(6, '0')
                     .toUpperCase();
-                log('RichTextWebController::applyRichTextStyle(): color: $newColor');
+                log('RichTextWebController::applyRichTextStyle():selectedTextColor: colorAsString: $colorAsString');
-                log('RichTextWebController::applyRichTextStyle(): colorAsString: $colorAsString');
                 selectedTextColor.value = newColor;
                 editorController.execCommand(
                     textStyleType.commandAction,
@@ -62,6 +72,34 @@ class RichTextWebController extends BaseRichTextController {
             }
         );
         break;
+      case RichTextStyleType.textBackgroundColor:
+        openMenuSelectColor(
+            context,
+            selectedTextBackgroundColor.value,
+            onResetToDefault: () {
+              final colorAsString = (Colors.transparent.value & 0xFFFFFF)
+                  .toRadixString(16)
+                  .padLeft(6, '0')
+                  .toUpperCase();
+              selectedTextBackgroundColor.value = Colors.transparent;
+              editorController.execCommand(
+                  textStyleType.commandAction,
+                  argument: colorAsString);
+            },
+            onSelectColor: (selectedColor) {
+              final newColor = selectedColor ?? Colors.transparent;
+              final colorAsString = (newColor.value & 0xFFFFFF)
+                  .toRadixString(16)
+                  .padLeft(6, '0')
+                  .toUpperCase();
+              log('RichTextWebController::applyRichTextStyle():textBackgroundColor: colorAsString: $colorAsString');
+              selectedTextBackgroundColor.value = newColor;
+              editorController.execCommand(
+                  textStyleType.commandAction,
+                  argument: colorAsString);
+            }
+        );
+        break;
       default:
         editorController.execCommand(textStyleType.commandAction);
         _selectTextStyleType(textStyleType);

lib/features/composer/presentation/mixin/rich_text_button_mixin.dart

@@ -17,7 +17,7 @@ mixin RichTextButtonMixin {
           path,
           color: isSelected == true
               ? Colors.black
-              : AppColor.colorDividerMailbox,
+              : AppColor.colorDefaultRichTextButton,
           fit: BoxFit.fill),
       iconPadding: const EdgeInsets.all(4),
       colorFocus: Colors.white,
@@ -33,9 +33,15 @@ mixin RichTextButtonMixin {
     required VoidCallback onTap,
     String? tooltip
   }){
+    final newColor = colorSelected == Colors.transparent
+        ? AppColor.colorDefaultRichTextButton
+        : colorSelected;
     return buildIconWeb(
-      icon: Icon(iconData, color: colorSelected ?? Colors.black, size: 20),
+      icon: Icon(iconData, color: newColor ?? Colors.black, size: 20),
       iconPadding: const EdgeInsets.all(4),
+      colorSelected: newColor == Colors.white
+        ? AppColor.colorFocusRichTextButton
+        : Colors.transparent,
       colorFocus: Colors.white,
       minSize: 20,
       tooltip: tooltip,

lib/features/composer/presentation/model/rich_text_style_type.dart

@@ -8,7 +8,8 @@ enum RichTextStyleType {
   italic,
   underline,
   strikeThrough,
-  textColor;
+  textColor,
+  textBackgroundColor;
 
   String get commandAction {
     switch (this) {
@@ -22,6 +23,8 @@ enum RichTextStyleType {
         return 'strikeThrough';
       case textColor:
         return 'foreColor';
+      case textBackgroundColor:
+        return 'hiliteColor';
       default:
         return '';
     }
@@ -46,6 +49,8 @@ enum RichTextStyleType {
     switch (this) {
       case textColor:
         return Icons.format_color_text;
+      case textBackgroundColor:
+        return Icons.format_color_fill;
       default:
         return null;
     }
@@ -63,6 +68,8 @@ enum RichTextStyleType {
         return AppLocalizations.of(context).formatStrikethrough;
       case textColor:
         return AppLocalizations.of(context).formatTextColor;
+      case textBackgroundColor:
+        return AppLocalizations.of(context).formatTextBackgroundColor;
       default:
         return '';
     }

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-07-21T13:16:06.832687",
+  "@@last_modified": "2022-07-21T14:49:43.482260",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -1663,5 +1663,11 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "formatTextBackgroundColor": "Text Background Color",
+  "@formatTextBackgroundColor": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -1707,4 +1707,10 @@ class AppLocalizations {
         'Text Color',
         name: 'formatTextColor');
   }
+
+  String get formatTextBackgroundColor {
+    return Intl.message(
+        'Text Background Color',
+        name: 'formatTextBackgroundColor');
+  }
 }