From 7d9089c21ba5984676ec1182d0c99d2a418804f0 Mon Sep 17 00:00:00 2001 From: dab246 Date: Mon, 2 Jun 2025 11:27:39 +0700 Subject: [PATCH] TF-3762 Update style for `Clean` button of Trash/Spam folder Signed-off-by: dab246 --- ...ty_mailbox_popup_dialog_widget_styles.dart | 14 +--- .../empty_mailbox_popup_dialog_widget.dart | 26 +++++-- .../widgets/label_mailbox_item_widget.dart | 76 +++++++++++++------ 3 files changed, 74 insertions(+), 42 deletions(-) diff --git a/lib/features/mailbox/presentation/styles/empty_mailbox_popup_dialog_widget_styles.dart b/lib/features/mailbox/presentation/styles/empty_mailbox_popup_dialog_widget_styles.dart index 627860aec..af7fde6ab 100644 --- a/lib/features/mailbox/presentation/styles/empty_mailbox_popup_dialog_widget_styles.dart +++ b/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); -} \ No newline at end of file +} diff --git a/lib/features/mailbox/presentation/widgets/empty_mailbox_popup_dialog_widget.dart b/lib/features/mailbox/presentation/widgets/empty_mailbox_popup_dialog_widget.dart index 16b662135..de193ca26 100644 --- a/lib/features/mailbox/presentation/widgets/empty_mailbox_popup_dialog_widget.dart +++ b/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 _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 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), ) ) ); diff --git a/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart b/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart index e2785ab9c..6c390eedc 100644 --- a/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart +++ b/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 createState() => _LabelMailboxItemWidgetState(); +} + +class _LabelMailboxItemWidgetState extends State { + + 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; + } } \ No newline at end of file