TF-733 Apply change font to body composer on web

lib/features/composer/presentation/composer_view_web.dart

@@ -11,8 +11,10 @@ import 'package:model/model.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/composer/domain/state/download_image_as_base64_state.dart';
+import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart';
 import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_button_mixin.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/font_name_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_file_composer_builder.dart';
@@ -736,9 +738,11 @@ class ComposerView extends GetWidget<ComposerController>
 
   Widget _buildToolbarRichTextWidget(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.only(left: 20, top: 4, bottom: 8),
+      padding: const EdgeInsets.only(left: 20, top: 8, bottom: 8),
       alignment: Alignment.centerLeft,
       child: Wrap(
+        alignment: WrapAlignment.center,
+        crossAxisAlignment: WrapCrossAlignment.center,
         children: RichTextStyleType.values.map((textType) => Obx(() {
           switch(textType) {
             case RichTextStyleType.textColor:
@@ -750,12 +754,24 @@ class ComposerView extends GetWidget<ComposerController>
             case RichTextStyleType.textBackgroundColor:
               return Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 2),
-                child: buildIconColorText(
+                child: buildIconColorBackgroundText(
                     iconData: textType.getIconData(),
                     colorSelected: controller.richTextWebController.selectedTextBackgroundColor.value,
                     tooltip: textType.getTooltipButton(context),
                     onTap: () => controller.richTextWebController.applyRichTextStyle(context, textType)),
               );
+            case RichTextStyleType.fontName:
+              return Container(
+                width: 200,
+                padding: const EdgeInsets.only(right: 2),
+                child: DropDownButtonWidget<FontNameType>(
+                    items: FontNameType.values,
+                    itemSelected: controller.richTextWebController.selectedFontName.value,
+                    onChanged: (newFont) => controller.richTextWebController.applyNewFontStyle(newFont),
+                    heightItem: 35,
+                    sizeIconChecked: 16,
+                    radiusButton: 5,
+                    supportSelectionIcon: true));
             default:
               return buildIconStyleText(
                   path: textType.getIcon(imagePaths),

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

@@ -5,13 +5,13 @@ import 'package:html/parser.dart' show parse;
 
 import 'package:core/utils/app_logger.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:get/get.dart';
 import 'package:html_editor_enhanced/html_editor.dart';
 import 'package:model/email/attachment.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/image_source.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/inline_image.dart';
 import 'package:tmail_ui_user/features/composer/presentation/controller/base_rich_text_controller.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/font_name_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
 
 class RichTextWebController extends BaseRichTextController {
@@ -20,7 +20,8 @@ class RichTextWebController extends BaseRichTextController {
 
   final listTextStyleApply = RxList<RichTextStyleType>();
   final selectedTextColor = Colors.black.obs;
-  final selectedTextBackgroundColor = Colors.transparent.obs;
+  final selectedTextBackgroundColor = Colors.white.obs;
+  final selectedFontName = FontNameType.sansSerif.obs;
 
   void onEditorSettingsChange(EditorSettings settings) {
     log('RichTextWebController::onEditorSettingsChange():');
@@ -77,17 +78,18 @@ class RichTextWebController extends BaseRichTextController {
             context,
             selectedTextBackgroundColor.value,
             onResetToDefault: () {
-              final colorAsString = (Colors.transparent.value & 0xFFFFFF)
+              final colorAsString = (Colors.white.value & 0xFFFFFF)
                   .toRadixString(16)
                   .padLeft(6, '0')
                   .toUpperCase();
-              selectedTextBackgroundColor.value = Colors.transparent;
+              log('RichTextWebController::applyRichTextStyle():onResetToDefault: colorAsString: $colorAsString');
+              selectedTextBackgroundColor.value = Colors.white;
               editorController.execCommand(
                   textStyleType.commandAction,
                   argument: colorAsString);
             },
             onSelectColor: (selectedColor) {
-              final newColor = selectedColor ?? Colors.transparent;
+              final newColor = selectedColor ?? Colors.white;
               final colorAsString = (newColor.value & 0xFFFFFF)
                   .toRadixString(16)
                   .padLeft(6, '0')
@@ -155,4 +157,12 @@ class RichTextWebController extends BaseRichTextController {
     log('RichTextWebController::refactorContentHasInlineImage(): listInlineAttachment: $listInlineAttachment');
     return Tuple2(newContent, listInlineAttachment);
   }
+
+  void applyNewFontStyle(FontNameType? newFont) {
+    final fontSelected = newFont ?? FontNameType.sansSerif;
+    selectedFontName.value = fontSelected;
+    editorController.execCommand(
+        RichTextStyleType.fontName.commandAction,
+        argument: fontSelected.fontFamily);
+  }
 }

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

@@ -33,13 +33,10 @@ mixin RichTextButtonMixin {
     required VoidCallback onTap,
     String? tooltip
   }){
-    final newColor = colorSelected == Colors.transparent
-        ? AppColor.colorDefaultRichTextButton
-        : colorSelected;
     return buildIconWeb(
-      icon: Icon(iconData, color: newColor ?? Colors.black, size: 20),
+      icon: Icon(iconData, color: colorSelected ?? Colors.black, size: 20),
       iconPadding: const EdgeInsets.all(4),
-      colorSelected: newColor == Colors.white
+      colorSelected: colorSelected == Colors.white
         ? AppColor.colorFocusRichTextButton
         : Colors.transparent,
       colorFocus: Colors.white,
@@ -48,4 +45,26 @@ mixin RichTextButtonMixin {
       onTap: onTap,
     );
   }
+
+  Widget buildIconColorBackgroundText({
+    required IconData? iconData,
+    required Color? colorSelected,
+    required VoidCallback onTap,
+    String? tooltip
+  }){
+    final newColor = colorSelected == Colors.white
+        ? AppColor.colorDefaultRichTextButton
+        : colorSelected;
+    return buildIconWeb(
+      icon: Icon(iconData, color: newColor ?? AppColor.colorDefaultRichTextButton, size: 20),
+      iconPadding: const EdgeInsets.all(4),
+      colorSelected: newColor == Colors.white
+          ? AppColor.colorFocusRichTextButton
+          : Colors.transparent,
+      colorFocus: Colors.white,
+      minSize: 20,
+      tooltip: tooltip,
+      onTap: onTap,
+    );
+  }
 }

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

@@ -0,0 +1,50 @@
+
+enum FontNameType {
+  arial,
+  arialBlack,
+  brushScriptMT,
+  comicSansMS,
+  courierNew,
+  helveticaNeue,
+  helvetica,
+  impact,
+  lucidaGrande,
+  tahoma,
+  timesNewRoman,
+  trebuchetMS,
+  sansSerif,
+  verdana;
+
+  String get fontFamily {
+    switch(this) {
+      case FontNameType.arial:
+        return 'Arial';
+      case FontNameType.arialBlack:
+        return 'Arial Black';
+      case FontNameType.brushScriptMT:
+        return 'Brush Script MT';
+      case FontNameType.comicSansMS:
+        return 'Comic Sans MS';
+      case FontNameType.courierNew:
+        return 'Courier New';
+      case FontNameType.helveticaNeue:
+        return 'Helvetica Neue';
+      case FontNameType.helvetica:
+        return 'Helvetica';
+      case FontNameType.impact:
+        return 'Impact';
+      case FontNameType.lucidaGrande:
+        return 'Lucida Grande';
+      case FontNameType.tahoma:
+        return 'Tahoma';
+      case FontNameType.timesNewRoman:
+        return 'Times New Roman';
+      case FontNameType.trebuchetMS:
+        return 'Trebuchet MS';
+      case FontNameType.sansSerif:
+        return 'Sans Serif';
+      case FontNameType.verdana:
+        return 'Verdana';
+    }
+  }
+}

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

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 enum RichTextStyleType {
+  fontName,
   bold,
   italic,
   underline,
@@ -13,6 +14,8 @@ enum RichTextStyleType {
 
   String get commandAction {
     switch (this) {
+      case fontName:
+        return 'fontName';
       case bold:
         return 'bold';
       case italic: