TF-740 Implement apply order list in composer web

lib/features/composer/presentation/composer_view_web.dart

@@ -18,6 +18,7 @@ import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_but
 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';
 import 'package:tmail_ui_user/features/composer/presentation/model/header_style_type.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/order_list_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/paragraph_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';
@@ -804,8 +805,8 @@ class ComposerView extends GetWidget<ComposerController>
               AbsorbPointer(
                 absorbing: codeViewEnabled,
                 child: Container(
-                    width: 200,
-                    padding: const EdgeInsets.only(left: 8, right: 8),
+                    width: 130,
+                    padding: const EdgeInsets.only(left: 4.0, right: 4.0),
                     child: DropDownButtonWidget<FontNameType>(
                         items: FontNameType.values,
                         itemSelected: richTextController.selectedFontName.value,
@@ -829,7 +830,7 @@ class ComposerView extends GetWidget<ComposerController>
                         supportSelectionIcon: true)),
               ),
               Padding(
-                padding: const EdgeInsets.only(right: 8),
+                padding: const EdgeInsets.only(right: 4.0),
                 child: AbsorbPointer(
                   absorbing: codeViewEnabled,
                   child: buildWrapIconStyleText(
@@ -842,7 +843,7 @@ class ComposerView extends GetWidget<ComposerController>
                 ),
               ),
               Padding(
-                padding: const EdgeInsets.only(right: 8),
+                padding: const EdgeInsets.only(right: 4.0),
                 child: AbsorbPointer(
                   absorbing: codeViewEnabled,
                   child: buildWrapIconStyleText(
@@ -857,7 +858,7 @@ class ComposerView extends GetWidget<ComposerController>
                 ),
               ),
               Padding(
-                padding: const EdgeInsets.only(right: 8.0),
+                padding: const EdgeInsets.only(right: 4.0),
                 child: buildWrapIconStyleText(
                     hasDropdown: false,
                     padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
@@ -902,7 +903,7 @@ class ComposerView extends GetWidget<ComposerController>
                     ])),
               ),
               Padding(
-                padding: const EdgeInsets.only(right: 8.0),
+                padding: const EdgeInsets.only(right: 4.0),
                 child: AbsorbPointer(
                   absorbing: codeViewEnabled,
                   child: PopupMenuOverlayWidget(
@@ -916,14 +917,38 @@ class ComposerView extends GetWidget<ComposerController>
                     iconButton: buildWrapIconStyleText(
                         padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
                         spacing: 3,
-                        opacity: opacity,
                         isSelected: richTextController.focusMenuParagraph.value,
                         icon: buildIconWithTooltip(
                           path: richTextController.selectedParagraph.value.getIcon(imagePaths),
-                          color: AppColor.colorDefaultRichTextButton.withOpacity(opacity),
+                          color: AppColor.colorDefaultRichTextButton,
+                          opacity: opacity,
                           tooltip: RichTextStyleType.paragraph.getTooltipButton(context))),
                   ),
                 ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(right: 4.0),
+                child: AbsorbPointer(
+                  absorbing: codeViewEnabled,
+                  child: PopupMenuOverlayWidget(
+                    controller: richTextController.menuOrderListController,
+                    listButtonAction: OrderListType.values
+                      .map((orderType) => orderType.buildButtonWidget(
+                        context,
+                        imagePaths,
+                        (orderType) => richTextController.applyOrderListType(orderType)))
+                      .toList(),
+                    iconButton: buildWrapIconStyleText(
+                      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
+                      spacing: 3,
+                      isSelected: richTextController.focusMenuOrderList.value,
+                      icon: buildIconWithTooltip(
+                        path: richTextController.selectedOrderList.value.getIcon(imagePaths),
+                        color: AppColor.colorDefaultRichTextButton,
+                        opacity: opacity,
+                        tooltip: RichTextStyleType.orderList.getTooltipButton(context))),
+                  ),
+                ),
               )
             ]
         ),

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

@@ -16,6 +16,7 @@ import 'package:tmail_ui_user/features/composer/presentation/model/image_source.
 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/order_list_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/paragraph_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
@@ -30,11 +31,14 @@ class RichTextWebController extends BaseRichTextController {
   final selectedFontName = FontNameType.sansSerif.obs;
   final codeViewState = CodeViewState.disabled.obs;
   final selectedParagraph = ParagraphType.alignLeft.obs;
+  final selectedOrderList = OrderListType.bulletedList.obs;
+  final focusMenuOrderList = RxBool(false);
   final focusMenuParagraph = RxBool(false);
   final menuFontStatus = DropdownMenuFontStatus.closed.obs;
   final menuHeaderStyleStatus = DropdownMenuFontStatus.closed.obs;
 
   final menuParagraphController = CustomPopupMenuController();
+  final menuOrderListController = CustomPopupMenuController();
 
   @override
   void onReady() {
@@ -42,6 +46,9 @@ class RichTextWebController extends BaseRichTextController {
     menuParagraphController.addListener(() {
       focusMenuParagraph.value = menuParagraphController.menuIsShowing;
     });
+    menuOrderListController.addListener(() {
+      focusMenuOrderList.value = menuOrderListController.menuIsShowing;
+    });
   }
 
   void onEditorSettingsChange(EditorSettings settings) async {
@@ -255,11 +262,21 @@ class RichTextWebController extends BaseRichTextController {
     if (menuParagraphController.menuIsShowing) {
       menuParagraphController.hideMenu();
     }
+    if (menuOrderListController.menuIsShowing) {
+      menuOrderListController.hideMenu();
+    }
+  }
+
+  void applyOrderListType(OrderListType newOrderList) {
+    selectedOrderList.value = newOrderList;
+    editorController.execCommand(newOrderList.commandAction);
+    menuOrderListController.hideMenu();
   }
 
   @override
   void onClose() {
     menuParagraphController.dispose();
+    menuOrderListController.dispose();
     super.onClose();
   }
 }

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

@@ -13,7 +13,6 @@ mixin RichTextButtonMixin {
     VoidCallback? onTap,
     bool isSelected = false,
     bool hasDropdown = true,
-    double opacity = 1.0,
     EdgeInsets? padding,
     double? spacing,
     String tooltip = '',

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

@@ -93,7 +93,7 @@ enum HeaderStyleType {
       case HeaderStyleType.h4:
       case HeaderStyleType.h5:
       case HeaderStyleType.h6:
-      return FontWeight.bold;
+        return FontWeight.bold;
     }
   }
 }

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

@@ -12,7 +12,8 @@ enum RichTextStyleType {
   strikeThrough,
   textColor,
   textBackgroundColor,
-  paragraph;
+  paragraph,
+  orderList;
 
   String get commandAction {
     switch (this) {
@@ -88,6 +89,8 @@ enum RichTextStyleType {
         return AppLocalizations.of(context).fontFamily;
       case paragraph:
         return AppLocalizations.of(context).paragraph;
+      case orderList:
+        return AppLocalizations.of(context).orderList;
       default:
         return '';
     }