TF-3762 Update style for Clean button of Trash/Spam folder

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

lib/features/mailbox/presentation/styles/empty_mailbox_popup_dialog_widget_styles.dart

@@ -1,16 +1,8 @@
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 
 class EmptyMailboxPopupDialogWidgetStyles {
-  static const EdgeInsetsGeometry emptyButtonPadding = EdgeInsetsDirectional.symmetric(vertical: 4, horizontal: 10);
-
-  static const Color emptyButtonBackground = Colors.transparent;
-
-  static const TextStyle emptyButtonTextStyle = TextStyle(
-    fontWeight: FontWeight.w400,
-    fontSize: 15,
-    color: AppColor.colorTextBody
-  );
+  static const EdgeInsetsGeometry emptyButtonPadding =
+      EdgeInsetsDirectional.symmetric(vertical: 4, horizontal: 8);
 
   static const Offset dialogOverlayOffset = Offset(0.0, 50.0);
-}
+}

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

@@ -1,3 +1,4 @@
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_portal/flutter_portal.dart';
@@ -7,15 +8,19 @@ import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/empty_mailbox_dialog_overlay.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
+typedef OnPopupVisibleChange = void Function(bool visible);
+
 class EmptyMailboxPopupDialogWidget extends StatefulWidget {
 
   final MailboxNode mailboxNode;
   final OnEmptyMailboxActionCallback onEmptyMailboxActionCallback;
+  final OnPopupVisibleChange? onPopupVisibleChange;
 
   const EmptyMailboxPopupDialogWidget({
     super.key,
     required this.mailboxNode,
     required this.onEmptyMailboxActionCallback,
+    this.onPopupVisibleChange,
   });
 
   @override
@@ -26,13 +31,20 @@ class _EmptyMailboxPopupDialogWidgetState extends State<EmptyMailboxPopupDialogW
 
   bool _visible = false;
 
+  void _setVisible(bool visible) {
+    if (_visible != visible) {
+      setState(() => _visible = visible);
+      widget.onPopupVisibleChange?.call(visible);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return PortalTarget(
       visible: _visible,
       portalFollower: GestureDetector(
         behavior: HitTestBehavior.opaque,
-        onTap: () => setState(() => _visible = false)
+        onTap: () => _setVisible(false),
       ),
       child: PortalTarget(
         anchor: const Aligned(
@@ -42,19 +54,21 @@ class _EmptyMailboxPopupDialogWidgetState extends State<EmptyMailboxPopupDialogW
         ),
         portalFollower: EmptyMailboxDialogOverlay(
           mailboxNode: widget.mailboxNode,
-          onCancelActionClick: () => setState(() => _visible = false),
+          onCancelActionClick: () => _setVisible(false),
           onEmptyMailboxActionCallback: (mailboxNode) {
-            setState(() => _visible = false);
+            _setVisible(false);
             widget.onEmptyMailboxActionCallback.call(mailboxNode);
           },
         ),
         visible: _visible,
         child: TMailButtonWidget.fromText(
           text: AppLocalizations.of(context).clean,
-          textStyle: EmptyMailboxPopupDialogWidgetStyles.emptyButtonTextStyle,
-          backgroundColor: EmptyMailboxPopupDialogWidgetStyles.emptyButtonBackground,
+          textStyle: Theme.of(context).textTheme.bodySmall?.copyWith(
+            color: AppColor.steelGrayA540,
+          ),
+          backgroundColor: Colors.transparent,
           padding: EmptyMailboxPopupDialogWidgetStyles.emptyButtonPadding,
-          onTapActionCallback: () => setState(() => _visible = true)
+          onTapActionCallback: () => _setVisible(true),
         )
       )
     );

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

@@ -12,7 +12,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/empty_mailbo
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_expand_button.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mailbox_item_widget.dart';
 
-class LabelMailboxItemWidget extends StatelessWidget {
+class LabelMailboxItemWidget extends StatefulWidget {
 
   final GlobalKey itemKey;
   final ResponsiveUtils responsiveUtils;
@@ -39,18 +39,26 @@ class LabelMailboxItemWidget extends StatelessWidget {
     this.onClickExpandMailboxNodeAction,
   });
 
+  @override
+  State<LabelMailboxItemWidget> createState() => _LabelMailboxItemWidgetState();
+}
+
+class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
+
+  bool _popupVisible = false;
+
   @override
   Widget build(BuildContext context) {
     final displayNameWidget = TextOverflowBuilder(
-      mailboxNode.item.getDisplayName(context),
-      style: isSelected
+      widget.mailboxNode.item.getDisplayName(context),
+      style: widget.isSelected
         ? ThemeUtils.textStyleInter700(color: Colors.black, fontSize: 14)
         : ThemeUtils.textStyleBodyBody3(color: Colors.black),
     );
 
     final nameWithExpandIcon = Row(
       children: [
-        if (mailboxNode.hasChildren())
+        if (widget.mailboxNode.hasChildren())
           Flexible(child: displayNameWidget)
         else
           Flexible(
@@ -59,25 +67,25 @@ class LabelMailboxItemWidget extends StatelessWidget {
               child: displayNameWidget,
             ),
           ),
-        if (mailboxNode.hasChildren())
+        if (widget.mailboxNode.hasChildren())
           MailboxExpandButton(
-            itemKey: itemKey,
-            mailboxNode: mailboxNode,
-            imagePaths: imagePaths,
-            onExpandFolderActionClick: onClickExpandMailboxNodeAction,
+            itemKey: widget.itemKey,
+            mailboxNode: widget.mailboxNode,
+            imagePaths: widget.imagePaths,
+            onExpandFolderActionClick: widget.onClickExpandMailboxNodeAction,
           ),
       ],
     );
 
-    if (!showTrailing) {
-      if (mailboxNode.item.isTeamMailboxes) {
+    if (!widget.showTrailing) {
+      if (widget.mailboxNode.item.isTeamMailboxes) {
         return Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisSize: MainAxisSize.min,
           children: [
             nameWithExpandIcon,
             TextOverflowBuilder(
-              mailboxNode.item.emailTeamMailBoxes,
+              widget.mailboxNode.item.emailTeamMailBoxes,
               style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                 fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
                 color: LabelMailboxItemWidgetStyles.teamMailboxEmailTextColor,
@@ -92,35 +100,40 @@ class LabelMailboxItemWidget extends StatelessWidget {
     }
 
     final trailingWidget = TrailingMailboxItemWidget(
-      mailboxNode: mailboxNode,
-      responsiveUtils: responsiveUtils,
-      imagePaths: imagePaths,
-      isItemHovered: isItemHovered,
-      onMenuActionClick: onMenuActionClick,
+      mailboxNode: widget.mailboxNode,
+      responsiveUtils: widget.responsiveUtils,
+      imagePaths: widget.imagePaths,
+      isItemHovered: widget.isItemHovered,
+      onMenuActionClick: widget.onMenuActionClick,
     );
 
     final childWidget = Row(
       children: [
         Expanded(child: nameWithExpandIcon),
-        if (responsiveUtils.isWebDesktop(context) &&
-            mailboxNode.item.allowedHasEmptyAction)
-          EmptyMailboxPopupDialogWidget(
-            mailboxNode: mailboxNode,
-            onEmptyMailboxActionCallback: (mailboxNode) =>
-                onEmptyMailboxActionCallback?.call(mailboxNode),
+        if (_showCleanButton(context))
+          Offstage(
+            offstage: !_shouldShowPopup,
+            child: EmptyMailboxPopupDialogWidget(
+              mailboxNode: widget.mailboxNode,
+              onEmptyMailboxActionCallback: (mailboxNode) {
+                _onPopupVisibleChange(false);
+                widget.onEmptyMailboxActionCallback?.call(mailboxNode);
+              },
+              onPopupVisibleChange: _onPopupVisibleChange,
+            ),
           ),
         trailingWidget,
       ],
     );
 
-    if (mailboxNode.item.isTeamMailboxes) {
+    if (widget.mailboxNode.item.isTeamMailboxes) {
       return Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,
         children: [
           childWidget,
           TextOverflowBuilder(
-            mailboxNode.item.emailTeamMailBoxes,
+            widget.mailboxNode.item.emailTeamMailBoxes,
             style: Theme.of(context).textTheme.bodyMedium?.copyWith(
               fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
               color: LabelMailboxItemWidgetStyles.teamMailboxEmailTextColor,
@@ -133,4 +146,17 @@ class LabelMailboxItemWidget extends StatelessWidget {
       return childWidget;
     }
   }
+
+  void _onPopupVisibleChange(bool visible) {
+    if (_popupVisible != visible) {
+      setState(() => _popupVisible = visible);
+    }
+  }
+
+  bool get _shouldShowPopup => widget.isItemHovered || _popupVisible;
+
+  bool _showCleanButton(BuildContext context) {
+    return widget.responsiveUtils.isWebDesktop(context) &&
+        widget.mailboxNode.item.allowedHasEmptyAction;
+  }
 }