TF-976 Blur out the option context menu mailbox action when deactivated on web

lib/features/base/widget/context_menu_item_action.dart

@@ -0,0 +1,19 @@
+
+import 'package:equatable/equatable.dart';
+
+abstract class ContextMenuItemAction<T> with EquatableMixin {
+  final T action;
+  final ContextMenuItemState state;
+
+  ContextMenuItemAction(this.action, this.state);
+
+  @override
+  List<Object?> get props => [action, state];
+
+  bool get isActivated => state == ContextMenuItemState.activated;
+}
+
+enum ContextMenuItemState {
+  activated,
+  deactivated
+}

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -8,6 +8,7 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/base/mixin/popup_menu_widget_mixin.dart';
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
@@ -375,66 +376,102 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
     );
   }
 
-  void _openMailboxMenuAction(BuildContext context, RelativeRect position,
+  void _openMailboxMenuAction(
-      PresentationMailbox mailbox) {
+      BuildContext context,
-    final listMailboxActions = [
+      RelativeRect position,
-      if (mailbox.getCountUnReadEmails().isNotEmpty) MailboxActions.markAsRead,
+      PresentationMailbox mailbox
-      if (!mailbox.hasRole()) MailboxActions.move,
+  ) {
-      if (!mailbox.hasRole()) MailboxActions.rename,
+    final mailboxActionsSupported = [
-      if (!mailbox.hasRole()) MailboxActions.delete,
+      MailboxActions.markAsRead,
+      MailboxActions.move,
+      MailboxActions.rename,
+      MailboxActions.delete
     ];
 
-    if (listMailboxActions.isNotEmpty) {
+    final listContextMenuItemAction = mailboxActionsSupported
-      if (_responsiveUtils.isScreenWithShortestSide(context)) {
+        .map((action) => ContextMenuItemMailboxAction(
-        controller.openContextMenuAction(context,
+            action,
-            _bottomSheetIdentityActionTiles(context, mailbox, listMailboxActions));
+            action.getContextMenuItemState(mailbox)))
-      } else {
+        .toList();
-        controller.openPopupMenuAction(context, position,
+
-            _popupMenuMailboxActionTiles(context, mailbox, listMailboxActions));
+    if (_responsiveUtils.isScreenWithShortestSide(context)) {
-      }
+      controller.openContextMenuAction(
+          context,
+          _bottomSheetIdentityActionTiles(
+              context,
+              mailbox,
+              listContextMenuItemAction));
+    } else {
+      controller.openPopupMenuAction(
+          context,
+          position,
+          _popupMenuMailboxActionTiles(
+              context,
+              mailbox,
+              listContextMenuItemAction));
     }
   }
 
-  List<Widget> _bottomSheetIdentityActionTiles(BuildContext context,
+  List<Widget> _bottomSheetIdentityActionTiles(
-      PresentationMailbox mailbox, List<MailboxActions> listMailboxActions) {
+      BuildContext context,
-    return listMailboxActions
+      PresentationMailbox mailbox,
+      List<ContextMenuItemMailboxAction> contextMenuActions
+  ) {
+    return contextMenuActions
         .map((action) => _mailboxContextMenuActionTile(context, action, mailbox))
         .toList();
   }
 
-  Widget _mailboxContextMenuActionTile(BuildContext context, MailboxActions actions,
+  Widget _mailboxContextMenuActionTile(
-      PresentationMailbox mailbox) {
+      BuildContext context,
+      ContextMenuItemMailboxAction contextMenuItem,
+      PresentationMailbox mailbox
+  ) {
     return (MailboxBottomSheetActionTileBuilder(
-            Key('${actions.name}_action'),
+            Key('${contextMenuItem.action.name}_action'),
             SvgPicture.asset(
-                actions.getContextMenuIcon(_imagePaths),
+                contextMenuItem.action.getContextMenuIcon(_imagePaths),
-                color: actions.getColorContextMenuIcon()),
+                color: contextMenuItem.action.getColorContextMenuIcon()),
-            actions.getTitleContextMenu(context),
+            contextMenuItem.action.getTitleContextMenu(context),
-            mailbox)
+            mailbox,
+            absorbing: !contextMenuItem.isActivated,
+            opacity: !contextMenuItem.isActivated)
         ..onActionClick((mailbox) =>
-            controller.handleMailboxAction(context, actions, mailbox)))
+            controller.handleMailboxAction(context, contextMenuItem.action, mailbox)))
       .build();
   }
 
-  List<PopupMenuEntry> _popupMenuMailboxActionTiles(BuildContext context,
+  List<PopupMenuEntry> _popupMenuMailboxActionTiles(
-      PresentationMailbox mailbox, List<MailboxActions> listMailboxActions) {
+      BuildContext context,
-    return listMailboxActions
+      PresentationMailbox mailbox,
+      List<ContextMenuItemMailboxAction> contextMenuActions
+  ) {
+    return contextMenuActions
         .map((action) => _mailboxPopupMenuActionTile(context, action, mailbox))
         .toList();
   }
 
-  PopupMenuItem _mailboxPopupMenuActionTile(BuildContext context, MailboxActions actions,
+  PopupMenuItem _mailboxPopupMenuActionTile(
-      PresentationMailbox mailbox) {
+      BuildContext context,
+      ContextMenuItemMailboxAction contextMenuItem,
+      PresentationMailbox mailbox
+  ) {
     return PopupMenuItem(
         padding: EdgeInsets.zero,
-        child: popupItem(actions.getContextMenuIcon(_imagePaths),
+        child: AbsorbPointer(
-            actions.getTitleContextMenu(context),
+          absorbing: !contextMenuItem.isActivated,
-            colorIcon: actions.getColorContextMenuIcon(),
+          child: Opacity(
-            styleName: TextStyle(
+            opacity: contextMenuItem.isActivated ? 1.0 : 0.3,
-                fontWeight: FontWeight.normal,
+            child: popupItem(contextMenuItem.action.getContextMenuIcon(_imagePaths),
-                fontSize: 17,
+                contextMenuItem.action.getTitleContextMenu(context),
-                color: actions.getColorContextMenuIcon()),
+                colorIcon: contextMenuItem.action.getColorContextMenuIcon(),
-            onCallbackAction: () =>
+                styleName: TextStyle(
-                controller.handleMailboxAction(context, actions, mailbox)));
+                    fontWeight: FontWeight.normal,
+                    fontSize: 17,
+                    color: contextMenuItem.action.getColorContextMenuIcon()),
+                onCallbackAction: () =>
+                    controller.handleMailboxAction(context, contextMenuItem.action, mailbox)),
+          ),
+        ));
   }
 }

lib/features/mailbox/presentation/model/context_item_mailbox_action.dart

@@ -0,0 +1,7 @@
+
+import 'package:tmail_ui_user/features/base/widget/context_menu_item_action.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
+
+class ContextMenuItemMailboxAction extends ContextMenuItemAction<MailboxActions> {
+  ContextMenuItemMailboxAction(super.action, super.state);
+}

lib/features/mailbox/presentation/model/mailbox_actions.dart

@@ -1,6 +1,8 @@
 
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/base/widget/context_menu_item_action.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 enum MailboxActions {
@@ -113,4 +115,21 @@ extension MailboxActionsExtension on MailboxActions {
         return true;
     }
   }
+
+  ContextMenuItemState getContextMenuItemState(PresentationMailbox mailbox) {
+    switch(this) {
+      case MailboxActions.markAsRead:
+        return mailbox.getCountUnReadEmails().isNotEmpty
+            ? ContextMenuItemState.activated
+            : ContextMenuItemState.deactivated;
+      case MailboxActions.move:
+      case MailboxActions.rename:
+      case MailboxActions.delete:
+        return mailbox.hasRole()
+            ? ContextMenuItemState.deactivated
+            : ContextMenuItemState.activated;
+      default:
+        return ContextMenuItemState.deactivated;
+    }
+  }
 }

lib/features/mailbox/presentation/widgets/mailbox_bottom_sheet_action_tile_builder.dart

@@ -12,6 +12,8 @@ class MailboxBottomSheetActionTileBuilder extends CupertinoActionSheetActionBuil
   final Color? bgColor;
   final EdgeInsets? iconLeftPadding;
   final EdgeInsets? iconRightPadding;
+  final bool opacity;
+  final bool absorbing;
 
   MailboxBottomSheetActionTileBuilder(
       Key key,
@@ -23,28 +25,36 @@ class MailboxBottomSheetActionTileBuilder extends CupertinoActionSheetActionBuil
         this.bgColor,
         this.iconLeftPadding,
         this.iconRightPadding,
+        this.opacity = false,
+        this.absorbing = false,
       }
   ) : super(key, actionIcon, actionName);
 
   @override
   Widget build() {
-    return Container(
+    return AbsorbPointer(
-      color: bgColor ?? Colors.white,
+      absorbing: absorbing,
-      child: MouseRegion(
+      child: Opacity(
-        cursor: BuildUtils.isWeb ? MaterialStateMouseCursor.clickable : MouseCursor.defer,
+        opacity: opacity ? 0.3 : 1.0,
-        child: CupertinoActionSheetAction(
+        child: Container(
-          key: key,
+          color: bgColor ?? Colors.white,
-          child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+          child: MouseRegion(
-            Padding(
+            cursor: BuildUtils.isWeb ? MaterialStateMouseCursor.clickable : MouseCursor.defer,
-                padding: iconLeftPadding ?? const EdgeInsets.only(left: 12, right: 16),
+            child: CupertinoActionSheetAction(
-                child: actionIcon),
+              key: key,
-            Expanded(child: Text(actionName, textAlign: TextAlign.left, style: actionTextStyle())),
+              child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
-          ]),
+                Padding(
-          onPressed: () {
+                    padding: iconLeftPadding ?? const EdgeInsets.only(left: 12, right: 16),
-            if (onCupertinoActionSheetActionClick != null) {
+                    child: actionIcon),
-              onCupertinoActionSheetActionClick!(presentationMailbox);
+                Expanded(child: Text(actionName, textAlign: TextAlign.left, style: actionTextStyle())),
-            }
+              ]),
-          },
+              onPressed: () {
+                if (onCupertinoActionSheetActionClick != null) {
+                  onCupertinoActionSheetActionClick!(presentationMailbox);
+                }
+              },
+            ),
+          ),
         ),
       ),
     );