TF-1984 Show popup dialog when clicking on Empty button

(cherry picked from commit 7504d6ec3cceff0d6697fddb93bd5212f9d9028f)

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

@@ -0,0 +1,46 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class EmptyMailboxDialogOverlayStyles {
+  static const double width = 300;
+  static const double radius = 16;
+  static const double closeButtonIconSize = 28;
+  static const double space = 12;
+  static const double buttonSpace = 9;
+  static const double buttonRadius = 8;
+  static const double elevation = 8;
+
+  static const EdgeInsetsGeometry margin = EdgeInsetsDirectional.only(start: 12);
+  static const EdgeInsetsGeometry padding = EdgeInsets.all(12);
+  static const EdgeInsetsGeometry iconPadding = EdgeInsets.zero;
+  static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 12);
+  static const EdgeInsetsGeometry emptyButtonPadding = EdgeInsetsDirectional.symmetric(vertical: 2, horizontal: 5);
+
+  static const Color backgroundColor = Colors.white;
+  static const Color closeButtonColor = AppColor.colorClosePopupDialogButton;
+  static const Color cancelButtonColor = AppColor.colorCancelPopupDialogButton;
+  static const Color emptyButtonColor = AppColor.colorEmptyPopupDialogButton;
+  static const Color emptyButtonBackground = Colors.transparent;
+  static Color get shadowColor => Colors.grey.shade500;
+
+  static const TextStyle titleTextStyle = TextStyle(
+    fontSize: 17,
+    fontWeight: FontWeight.bold,
+    color: Colors.black
+  );
+  static const TextStyle messageTextStyle = TextStyle(
+    fontSize: 14,
+    fontWeight: FontWeight.w400,
+    color: Colors.black
+  );
+  static const TextStyle buttonTextStyle = TextStyle(
+    fontSize: 13,
+    fontWeight: FontWeight.w400,
+    color: Colors.black
+  );
+  static const TextStyle emptyButtonTextStyle = TextStyle(
+    fontWeight: FontWeight.w400,
+    fontSize: 15,
+    color: AppColor.colorTextBody
+  );
+}

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

@@ -0,0 +1,16 @@
+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 Offset dialogOverlayOffset = Offset(0.0, 50.0);
+}

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

@@ -10,17 +10,8 @@ class LabelMailboxItemWidgetStyles {
   static const Color labelTeamMailboxTextColor = Colors.black;
   static const Color labelFolderTextColor = AppColor.colorNameEmail;
   static const Color teamMailboxTextColor = AppColor.colorEmailAddressFull;
-  static const Color emptyButtonBackground = Colors.transparent;
 
   static const FontWeight labelTeamMailboxTextFontWeight = FontWeight.bold;
   static const FontWeight labelFolderTextFontWeight = FontWeight.normal;
   static const FontWeight teamMailboxTextFontWeight = FontWeight.w400;
-
-  static const EdgeInsetsGeometry emptyButtonPadding = EdgeInsetsDirectional.symmetric(vertical: 2, horizontal: 5);
-
-  static const TextStyle emptyButtonTextStyle = TextStyle(
-    fontWeight: FontWeight.w400,
-    fontSize: 15,
-    color: AppColor.colorTextBody
-  );
 }

lib/features/mailbox/presentation/utils/mailbox_method_action_define.dart

@@ -15,4 +15,5 @@ typedef OnClickOpenMailboxNodeAction = void Function(MailboxNode);
 typedef OnSelectMailboxNodeAction = void Function(MailboxNode);
 typedef OnClickOpenMenuMailboxNodeAction = void Function(RelativeRect, MailboxNode);
 typedef OnLongPressMailboxNodeAction = void Function(MailboxNode);
-typedef OnClickSubscribeMailboxAction = void Function(MailboxNode);
+typedef OnClickSubscribeMailboxAction = void Function(MailboxNode);
+typedef OnEmptyMailboxActionCallback = void Function(MailboxNode);

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

@@ -0,0 +1,104 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/bottom_popup/confirmation_dialog_action_sheet_builder.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/presentation/views/clipper/side_arrow_clipper.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/empty_mailbox_dialog_overlay_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class EmptyMailboxDialogOverlay extends StatelessWidget {
+
+  final MailboxNode mailboxNode;
+  final OnEmptyMailboxActionCallback onEmptyMailboxActionCallback;
+  final OnCancelActionClick onCancelActionClick;
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final _imagePaths = Get.find<ImagePaths>();
+
+  EmptyMailboxDialogOverlay({
+    Key? key,
+    required this.mailboxNode,
+    required this.onEmptyMailboxActionCallback,
+    required this.onCancelActionClick,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return PointerInterceptor(
+      child: PhysicalShape(
+        clipBehavior: Clip.antiAlias,
+        clipper: SideArrowClipper(),
+        color: EmptyMailboxDialogOverlayStyles.backgroundColor,
+        shadowColor: EmptyMailboxDialogOverlayStyles.shadowColor,
+        elevation: EmptyMailboxDialogOverlayStyles.elevation,
+        child: Container(
+          constraints: BoxConstraints(
+            maxHeight: _responsiveUtils.getSizeScreenHeight(context)
+          ),
+          width: EmptyMailboxDialogOverlayStyles.width,
+          padding: EmptyMailboxDialogOverlayStyles.padding,
+          margin: EmptyMailboxDialogOverlayStyles.margin,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Row(
+                children: [
+                  Expanded(
+                    child: Text(
+                     AppLocalizations.of(context).clearFolder,
+                     style: EmptyMailboxDialogOverlayStyles.titleTextStyle
+                    ),
+                  ),
+                  TMailButtonWidget.fromIcon(
+                    icon: _imagePaths.icClose,
+                    iconSize: EmptyMailboxDialogOverlayStyles.closeButtonIconSize,
+                    iconColor: EmptyMailboxDialogOverlayStyles.closeButtonColor,
+                    backgroundColor: Colors.transparent,
+                    padding: EmptyMailboxDialogOverlayStyles.iconPadding,
+                    onTapActionCallback: onCancelActionClick,
+                  )
+                ]
+              ),
+              const SizedBox(height: EmptyMailboxDialogOverlayStyles.space),
+              Flexible(
+                child: Text(
+                  AppLocalizations.of(context).messageEmptyFolderDialog(mailboxNode.item.getDisplayName(context)),
+                  style: EmptyMailboxDialogOverlayStyles.messageTextStyle
+                ),
+              ),
+              const SizedBox(height: EmptyMailboxDialogOverlayStyles.space),
+              Row(
+                children: [
+                  const Spacer(),
+                  TMailButtonWidget.fromText(
+                    text: AppLocalizations.of(context).cancel,
+                    backgroundColor: EmptyMailboxDialogOverlayStyles.cancelButtonColor,
+                    padding: EmptyMailboxDialogOverlayStyles.buttonPadding,
+                    textStyle: EmptyMailboxDialogOverlayStyles.buttonTextStyle,
+                    borderRadius: EmptyMailboxDialogOverlayStyles.buttonRadius,
+                    onTapActionCallback: onCancelActionClick,
+                  ),
+                  const SizedBox(width: EmptyMailboxDialogOverlayStyles.buttonSpace),
+                  TMailButtonWidget.fromText(
+                    text: AppLocalizations.of(context).empty,
+                    backgroundColor: EmptyMailboxDialogOverlayStyles.emptyButtonColor,
+                    padding: EmptyMailboxDialogOverlayStyles.buttonPadding,
+                    textStyle: EmptyMailboxDialogOverlayStyles.buttonTextStyle,
+                    borderRadius: EmptyMailboxDialogOverlayStyles.buttonRadius,
+                    onTapActionCallback: () => onEmptyMailboxActionCallback.call(mailboxNode),
+                  )
+                ],
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,59 @@
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_portal/flutter_portal.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/empty_mailbox_popup_dialog_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/empty_mailbox_dialog_overlay.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class EmptyMailboxPopupDialogWidget extends StatefulWidget {
+
+  final MailboxNode mailboxNode;
+  final OnEmptyMailboxActionCallback onEmptyMailboxActionCallback;
+
+  const EmptyMailboxPopupDialogWidget({
+    super.key,
+    required this.mailboxNode,
+    required this.onEmptyMailboxActionCallback,
+  });
+
+  @override
+  State<EmptyMailboxPopupDialogWidget> createState() => _EmptyMailboxPopupDialogWidgetState();
+}
+
+class _EmptyMailboxPopupDialogWidgetState extends State<EmptyMailboxPopupDialogWidget> {
+
+  bool _visible = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return PortalTarget(
+      visible: _visible,
+      portalFollower: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: () => setState(() => _visible = false)
+      ),
+      child: PortalTarget(
+        anchor: const Aligned(
+          follower: Alignment.bottomLeft,
+          target: Alignment.topRight,
+          offset: EmptyMailboxPopupDialogWidgetStyles.dialogOverlayOffset
+        ),
+        portalFollower: EmptyMailboxDialogOverlay(
+          mailboxNode: widget.mailboxNode,
+          onCancelActionClick: () => setState(() => _visible = false),
+          onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
+        ),
+        visible: _visible,
+        child: TMailButtonWidget.fromText(
+          text: AppLocalizations.of(context).empty,
+          textStyle: EmptyMailboxPopupDialogWidgetStyles.emptyButtonTextStyle,
+          backgroundColor: EmptyMailboxPopupDialogWidgetStyles.emptyButtonBackground,
+          padding: EmptyMailboxPopupDialogWidgetStyles.emptyButtonPadding,
+          onTapActionCallback: () => setState(() => _visible = true)
+        )
+      )
+    );
+  }
+}

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

@@ -1,14 +1,14 @@
-
-import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/text/text_overflow_builder.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/styles/label_mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/empty_mailbox_popup_dialog_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mailbox_item_widget.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class LabelMailboxItemWidget extends StatelessWidget {
 
@@ -16,13 +16,17 @@ class LabelMailboxItemWidget extends StatelessWidget {
   final bool showTrailing;
   final bool isItemHovered;
   final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
+  final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
 
-  const LabelMailboxItemWidget({
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  LabelMailboxItemWidget({
     super.key,
     required this.mailboxNode,
     this.showTrailing = true,
     this.isItemHovered = false,
     this.onMenuActionClick,
+    this.onEmptyMailboxActionCallback,
   });
 
   @override
@@ -43,13 +47,10 @@ class LabelMailboxItemWidget extends StatelessWidget {
                   ),
                 ),
               ),
-              if (mailboxNode.item.allowedHasEmptyAction)
-                TMailButtonWidget.fromText(
-                  text: AppLocalizations.of(context).empty,
-                  textStyle: LabelMailboxItemWidgetStyles.emptyButtonTextStyle,
-                  backgroundColor: LabelMailboxItemWidgetStyles.emptyButtonBackground,
-                  padding: LabelMailboxItemWidgetStyles.emptyButtonPadding,
-                  onTapActionCallback: () => {},
+              if (_responsiveUtils.isWebDesktop(context) && mailboxNode.item.allowedHasEmptyAction)
+                EmptyMailboxPopupDialogWidget(
+                  mailboxNode: mailboxNode,
+                  onEmptyMailboxActionCallback: (mailboxNode) => onEmptyMailboxActionCallback?.call(mailboxNode),
                 ),
               TrailingMailboxItemWidget(
                 mailboxNode: mailboxNode,

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

@@ -32,6 +32,7 @@ class MailboxItemWidget extends StatefulWidget {
   final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
   final OnDragEmailToMailboxAccepted? onDragItemAccepted;
   final OnLongPressMailboxNodeAction? onLongPressMailboxNodeAction;
+  final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
 
   const MailboxItemWidget({
     super.key,
@@ -47,6 +48,7 @@ class MailboxItemWidget extends StatefulWidget {
     this.onMenuActionClick,
     this.onDragItemAccepted,
     this.onLongPressMailboxNodeAction,
+    this.onEmptyMailboxActionCallback,
   });
 
   @override
@@ -87,7 +89,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                     child: LabelMailboxItemWidget(
                       mailboxNode: widget.mailboxNode,
                       isItemHovered: _isItemHovered,
-                      onMenuActionClick: widget.onMenuActionClick
+                      onMenuActionClick: widget.onMenuActionClick,
+                      onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
                     )
                   ),
                 ]
@@ -122,7 +125,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                     child: LabelMailboxItemWidget(
                       mailboxNode: widget.mailboxNode,
                       isItemHovered: _isItemHovered,
-                      onMenuActionClick: widget.onMenuActionClick
+                      onMenuActionClick: widget.onMenuActionClick,
+                      onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
                     )
                   ),
                 ]
@@ -161,7 +165,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                           child: LabelMailboxItemWidget(
                             mailboxNode: widget.mailboxNode,
                             isItemHovered: _isItemHovered,
-                            onMenuActionClick: widget.onMenuActionClick
+                            onMenuActionClick: widget.onMenuActionClick,
+                            onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
                         )
                         ),
                         if (_isSelectActionNoValid)
@@ -211,7 +216,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                           mailboxNode: widget.mailboxNode,
                           showTrailing: false,
                           isItemHovered: _isItemHovered,
-                          onMenuActionClick: widget.onMenuActionClick
+                          onMenuActionClick: widget.onMenuActionClick,
+                          onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
                         )
                       ),
                       if (_isSelectActionNoValid)

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

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
@@ -17,6 +18,7 @@ class TrailingMailboxItemWidget extends StatelessWidget {
   final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
 
   final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   TrailingMailboxItemWidget({
     super.key,
@@ -30,19 +32,23 @@ class TrailingMailboxItemWidget extends StatelessWidget {
     if (PlatformInfo.isWeb) {
       if (isItemHovered) {
         return TMailButtonWidget.fromIcon(
-          margin: TrailingMailboxItemWidgetStyles.menuIconMargin,
+          margin: _responsiveUtils.isDesktop(context) && mailboxNode.item.allowedHasEmptyAction
+            ? EdgeInsets.zero
+            : TrailingMailboxItemWidgetStyles.menuIconMargin,
           icon: _imagePaths.icComposerMenu,
           iconSize: TrailingMailboxItemWidgetStyles.menuIconSize,
           padding: TrailingMailboxItemWidgetStyles.menuIconPadding,
           backgroundColor: TrailingMailboxItemWidgetStyles.menuIconBackgroundColor,
           onTapActionAtPositionCallback: (position) => onMenuActionClick?.call(position, mailboxNode),
         );
-      } else if (mailboxNode.item.countUnreadEmails > 0 && mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
+      } else if (_responsiveUtils.isDesktop(context) && mailboxNode.item.allowedHasEmptyAction) {
+        return const SizedBox();
+      } else if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
         return Padding(
           padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
           child: CountOfEmailsWidget(value: mailboxNode.item.countUnReadEmailsAsString),
         );
-      } else if (mailboxNode.item.countTotalEmails > 0 && mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
+      } else if (mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
         return Padding(
           padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
           child: CountOfEmailsWidget(value: mailboxNode.item.countTotalEmailsAsString),
@@ -51,12 +57,12 @@ class TrailingMailboxItemWidget extends StatelessWidget {
         return const SizedBox();
       }
     } else {
-      if (mailboxNode.item.countUnreadEmails > 0 && mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
+      if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
         return Padding(
           padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
           child: CountOfEmailsWidget(value: mailboxNode.item.countUnReadEmailsAsString),
         );
-      } else if (mailboxNode.item.countTotalEmails > 0 && mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
+      } else if (mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
         return Padding(
           padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
           child: CountOfEmailsWidget(value: mailboxNode.item.countTotalEmailsAsString),

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2023-08-28T17:04:30.893394",
+  "@@last_modified": "2023-08-30T16:14:12.029258",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -3189,5 +3189,27 @@
     "placeholders": {
       "action": {}
     }
+  },
+  "empty": "Empty",
+  "@empty": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "clearFolder": "Clear folder",
+  "@clearFolder": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "messageEmptyFolderDialog": "The messages in {folder} folder will be permanently deleted and you will not be able to restore them",
+  "@messageEmptyFolderDialog": {
+    "type": "text",
+    "placeholders_order": [
+      "folder"
+    ],
+    "placeholders": {
+      "folder": {}
+    }
   }
 }

lib/main/localizations/app_localizations.dart

@@ -3295,4 +3295,19 @@ class AppLocalizations {
       name: 'empty',
     );
   }
+
+  String get clearFolder {
+    return Intl.message(
+      'Clear folder',
+      name: 'clearFolder',
+    );
+  }
+
+  String messageEmptyFolderDialog(String folder) {
+    return Intl.message(
+      'The messages in $folder folder will be permanently deleted and you will not be able to restore them',
+      name: 'messageEmptyFolderDialog',
+      args: [folder]
+    );
+  }
 }