TF-3759 Update style popup context menu for email more action on thread view

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/base/mixin/popup_context_menu_action_mixin.dart

@@ -64,24 +64,23 @@ mixin PopupContextMenuActionMixin {
     });
   }
 
-  void openPopupMenuAction(
+  Future<void> openPopupMenuAction(
     BuildContext context,
     RelativeRect? position,
     List<PopupMenuEntry> popupMenuItems,
-    {
-      double? radius,
-    }
   ) async {
     await showMenu(
       context: context,
       position: position ?? const RelativeRect.fromLTRB(16, 40, 16, 16),
       color: Colors.white,
       surfaceTintColor: Colors.white,
-      elevation: 4,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.all(Radius.circular(radius ?? 16))
+      menuPadding: const EdgeInsets.only(top: 8, bottom: 8),
+      elevation: 8,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(6)),
       ),
-      items: popupMenuItems
+      constraints: const BoxConstraints(maxWidth: 220),
+      items: popupMenuItems,
     );
   }
 

lib/features/base/model/popup_menu_item_action.dart

@@ -0,0 +1,38 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+
+typedef OnPopupMenuActionClick = void Function(PopupMenuItemAction action);
+
+abstract class PopupMenuItemAction<T> with EquatableMixin {
+  final T action;
+
+  PopupMenuItemAction(this.action);
+
+  @override
+  List<Object?> get props => [action];
+
+  String get actionName;
+
+  String getActionNameWithLimitation({int limitCharacters = 22}) =>
+      actionName.length > limitCharacters
+          ? '${actionName.substring(0, limitCharacters)}...'
+          : actionName;
+
+  Color get actionNameColor => Colors.black;
+
+  void onClick(OnPopupMenuActionClick callback) => callback(this);
+}
+
+mixin OptionalPopupIcon {
+  String get actionIcon;
+
+  Color get actionIconColor => AppColor.steelGrayA540;
+
+  double get actionIconSize => 20.0;
+}
+
+abstract class PopupMenuItemActionRequiredIcon<T>
+    extends PopupMenuItemAction<T> with OptionalPopupIcon {
+  PopupMenuItemActionRequiredIcon(super.action);
+}

lib/features/base/widget/popup_menu/popup_menu_item_action_widget.dart

@@ -0,0 +1,59 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/base/model/popup_menu_item_action.dart';
+
+class PopupMenuItemActionWidget extends StatelessWidget {
+  final PopupMenuItemAction menuAction;
+  final OnPopupMenuActionClick menuActionClick;
+
+  const PopupMenuItemActionWidget({
+    super.key,
+    required this.menuAction,
+    required this.menuActionClick,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget? iconWidget;
+
+    if (menuAction is PopupMenuItemActionRequiredIcon) {
+      final specificMenuAction = menuAction as PopupMenuItemActionRequiredIcon;
+      iconWidget = Padding(
+        padding: const EdgeInsetsDirectional.only(end: 16),
+        child: SvgPicture.asset(
+          specificMenuAction.actionIcon,
+          width: specificMenuAction.actionIconSize,
+          height: specificMenuAction.actionIconSize,
+          colorFilter: specificMenuAction.actionIconColor.asFilter(),
+          fit: BoxFit.fill,
+        ),
+      );
+    }
+
+    return Material(
+      type: MaterialType.transparency,
+      child: InkWell(
+        onTap: () => menuAction.onClick(menuActionClick),
+        child: Container(
+          height: 48,
+          width: double.infinity,
+          padding: const EdgeInsets.symmetric(horizontal: 12),
+          child: Row(
+            children: [
+              if (iconWidget != null) iconWidget,
+              Expanded(
+                child: Text(
+                  menuAction.getActionNameWithLimitation(),
+                  style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+                  maxLines: 1,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}