TF-3759 Update style popup context menu for profile setting menu

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

lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart

@@ -4,7 +4,6 @@ import 'package:core/presentation/extensions/color_extension.dart';
 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/presentation/views/image/avatar_builder.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/account_id.dart';
@@ -12,32 +11,37 @@ import 'package:model/support/contact_support_capability.dart';
 import 'package:tmail_ui_user/features/base/mixin/contact_support_mixin.dart';
 import 'package:tmail_ui_user/features/base/widget/application_logo_with_text_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/app_grid_dashboard_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/profile_setting/profile_setting_action_type.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/navigation_bar_style.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/app_dashboard/app_grid_dashboard_icon.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/profile_setting/profile_setting_icon.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/profile_setting/profile_setting_menu_overlay.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class NavigationBarWidget extends StatelessWidget {
 
   final ImagePaths imagePaths;
   final AccountId? accountId;
-  final String avatarUserName;
+  final String ownEmailAddress;
   final ContactSupportCapability? contactSupportCapability;
   final Widget? searchForm;
   final AppGridDashboardController? appGridController;
+  final List<ProfileSettingActionType> settingActionTypes;
   final VoidCallback? onTapApplicationLogoAction;
-  final OnTapAvatarActionWithPositionClick? onTapAvatarAction;
   final OnTapContactSupportAction? onTapContactSupportAction;
+  final OnProfileSettingActionTypeClick onProfileSettingActionTypeClick;
 
   const NavigationBarWidget({
     super.key,
     required this.imagePaths,
     required this.accountId,
-    required this.avatarUserName,
+    required this.ownEmailAddress,
+    required this.onProfileSettingActionTypeClick,
     this.contactSupportCapability,
     this.searchForm,
     this.appGridController,
+    this.settingActionTypes = const [],
     this.onTapApplicationLogoAction,
-    this.onTapAvatarAction,
     this.onTapContactSupportAction,
   });
 
@@ -91,23 +95,11 @@ class NavigationBarWidget extends StatelessWidget {
                     return const SizedBox.shrink();
                   }),
                 const SizedBox(width: 16),
-                if (accountId != null)
-                  (AvatarBuilder()
-                    ..text(avatarUserName)
-                    ..backgroundColor(Colors.white)
-                    ..textColor(Colors.black)
-                    ..context(context)
-                    ..size(48)
-                    ..addOnTapAvatarActionWithPositionClick(onTapAvatarAction)
-                    ..addBoxShadows([
-                      const BoxShadow(
-                        color: AppColor.colorShadowBgContentEmail,
-                        spreadRadius: 1,
-                        blurRadius: 1,
-                        offset: Offset(0, 0.5)
-                      )
-                    ])
-                  ).build()
+                ProfileSettingIcon(
+                  ownEmailAddress: ownEmailAddress,
+                  settingActionTypes: settingActionTypes,
+                  onProfileSettingActionTypeClick: onProfileSettingActionTypeClick,
+                ),
               ]
             );
           }))
@@ -134,23 +126,11 @@ class NavigationBarWidget extends StatelessWidget {
                 return const SizedBox.shrink();
               }),
             const SizedBox(width: 16),
-            if (accountId != null)
-              (AvatarBuilder()
-                ..text(avatarUserName)
-                ..backgroundColor(Colors.white)
-                ..textColor(Colors.black)
-                ..context(context)
-                ..size(48)
-                ..addOnTapAvatarActionWithPositionClick(onTapAvatarAction)
-                ..addBoxShadows([
-                  const BoxShadow(
-                    color: AppColor.colorShadowBgContentEmail,
-                    spreadRadius: 1,
-                    blurRadius: 1,
-                    offset: Offset(0, 0.5)
-                  )
-                ])
-              ).build()
+            ProfileSettingIcon(
+              ownEmailAddress: ownEmailAddress,
+              settingActionTypes: settingActionTypes,
+              onProfileSettingActionTypeClick: onProfileSettingActionTypeClick,
+            ),
           ]
       ]),
     );

lib/features/mailbox_dashboard/presentation/widgets/profile_setting/profile_label_widget.dart

@@ -0,0 +1,47 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/copy_subaddress_widget.dart';
+
+class ProfileLabelWidget extends StatelessWidget {
+  final String label;
+  final String copyLabelIcon;
+  final OnCopyButtonAction onCopyButtonAction;
+
+  const ProfileLabelWidget({
+    super.key,
+    required this.label,
+    required this.copyLabelIcon,
+    required this.onCopyButtonAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 40,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Flexible(
+            child: SelectableText(
+              label,
+              style: ThemeUtils.textStyleM3BodyMedium,
+              maxLines: 1,
+            ),
+          ),
+          if (label.isNotEmpty)
+            TMailButtonWidget.fromIcon(
+              icon: copyLabelIcon,
+              backgroundColor: Colors.transparent,
+              iconSize: 20,
+              iconColor: AppColor.textSecondary.withOpacity(0.48),
+              padding: const EdgeInsets.all(5),
+              onTapActionCallback: onCopyButtonAction,
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/features/mailbox_dashboard/presentation/widgets/profile_setting/profile_setting_icon.dart

@@ -0,0 +1,110 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/extensions/string_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/app_toast.dart';
+import 'package:core/presentation/views/image/avatar_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_portal/flutter_portal.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/profile_setting/profile_setting_action_type.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/profile_setting/profile_setting_menu_overlay.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
+
+class ProfileSettingIcon extends StatefulWidget {
+  final String ownEmailAddress;
+  final List<ProfileSettingActionType> settingActionTypes;
+  final OnProfileSettingActionTypeClick onProfileSettingActionTypeClick;
+
+  const ProfileSettingIcon({
+    super.key,
+    required this.ownEmailAddress,
+    required this.settingActionTypes,
+    required this.onProfileSettingActionTypeClick,
+  });
+
+  @override
+  State<ProfileSettingIcon> createState() => _ProfileSettingIconState();
+}
+
+class _ProfileSettingIconState extends State<ProfileSettingIcon> {
+  final ValueNotifier<bool> _isExpandedNotifier = ValueNotifier<bool>(false);
+  final _imagePaths = ImagePaths();
+  final _appToast = AppToast();
+
+  @override
+  void dispose() {
+    _isExpandedNotifier.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder(
+      valueListenable: _isExpandedNotifier,
+      builder: (context, isExpanded, child) {
+        return PortalTarget(
+          visible: isExpanded,
+          portalFollower: GestureDetector(
+            behavior: HitTestBehavior.opaque,
+            onTap: _toggleOpenMenu,
+          ),
+          child: PortalTarget(
+            anchor: Aligned(
+              follower: AppUtils.isDirectionRTL(context)
+                  ? Alignment.topLeft
+                  : Alignment.topRight,
+              target: AppUtils.isDirectionRTL(context)
+                  ? Alignment.bottomLeft
+                  : Alignment.bottomRight,
+              offset: const Offset(0, 8),
+            ),
+            portalFollower: ProfileSettingMenuOverlay(
+              ownEmailAddress: widget.ownEmailAddress,
+              settingActionTypes: widget.settingActionTypes,
+              imagePaths: _imagePaths,
+              onCopyButtonAction: () => _onCopyProfileNameAction(
+                context,
+                widget.ownEmailAddress,
+              ),
+              onProfileSettingActionTypeClick: (actionType) {
+                _toggleOpenMenu();
+                widget.onProfileSettingActionTypeClick(actionType);
+              },
+              onCloseProfileSettingMenuAction: _toggleOpenMenu,
+            ),
+            visible: isExpanded,
+            child: (AvatarBuilder()
+                  ..text(widget.ownEmailAddress.firstCharacterToUpperCase)
+                  ..backgroundColor(Colors.white)
+                  ..textColor(Colors.black)
+                  ..context(context)
+                  ..size(48)
+                  ..addOnTapActionClick(_toggleOpenMenu)
+                  ..addBoxShadows([
+                    const BoxShadow(
+                      color: AppColor.colorShadowBgContentEmail,
+                      spreadRadius: 1,
+                      blurRadius: 1,
+                      offset: Offset(0, 0.5),
+                    )
+                  ]))
+                .build(),
+          ),
+        );
+      },
+    );
+  }
+
+  void _toggleOpenMenu() {
+    _isExpandedNotifier.value = !_isExpandedNotifier.value;
+  }
+
+  void _onCopyProfileNameAction(BuildContext context, String profileName) {
+    Clipboard.setData(ClipboardData(text: profileName));
+    _appToast.showToastSuccessMessage(
+      context,
+      AppLocalizations.of(context).email_address_copied_to_clipboard,
+    );
+  }
+}

lib/features/mailbox_dashboard/presentation/widgets/profile_setting/profile_setting_menu_overlay.dart

@@ -0,0 +1,105 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/base/widget/popup_menu/popup_menu_item_action_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/copy_subaddress_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/profile_setting/popup_menu_item_profile_setting_type_action.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/profile_setting/profile_setting_action_type.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/profile_setting/profile_label_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnProfileSettingActionTypeClick = void Function(
+    ProfileSettingActionType);
+typedef OnCloseProfileSettingMenuAction = void Function();
+
+class ProfileSettingMenuOverlay extends StatelessWidget {
+  final String ownEmailAddress;
+  final List<ProfileSettingActionType> settingActionTypes;
+  final ImagePaths imagePaths;
+  final OnCopyButtonAction onCopyButtonAction;
+  final OnProfileSettingActionTypeClick onProfileSettingActionTypeClick;
+  final OnCloseProfileSettingMenuAction onCloseProfileSettingMenuAction;
+
+  const ProfileSettingMenuOverlay({
+    Key? key,
+    required this.ownEmailAddress,
+    required this.settingActionTypes,
+    required this.imagePaths,
+    required this.onCopyButtonAction,
+    required this.onProfileSettingActionTypeClick,
+    required this.onCloseProfileSettingMenuAction,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: FocusManager.instance.primaryFocus?.unfocus,
+      child: Container(
+        width: 260,
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: const BorderRadius.all(Radius.circular(14)),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withOpacity(0.3),
+              blurRadius: 2,
+              spreadRadius: 0,
+            ),
+            BoxShadow(
+              color: Colors.black.withOpacity(0.15),
+              blurRadius: 6,
+              spreadRadius: 2,
+              offset: const Offset(0, 2),
+            ),
+          ],
+        ),
+        child: Stack(
+          children: [
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const SizedBox(height: 32),
+                ProfileLabelWidget(
+                  label: ownEmailAddress,
+                  copyLabelIcon: imagePaths.icCopy,
+                  onCopyButtonAction: onCopyButtonAction,
+                ),
+                const SizedBox(height: 4),
+                Divider(
+                  color: AppColor.profileMenuDivider.withOpacity(0.12),
+                  height: 1,
+                ),
+                ...settingActionTypes
+                    .map((actionType) => PopupMenuItemActionWidget(
+                          menuAction: PopupMenuItemProfileSettingTypeAction(
+                            actionType,
+                            AppLocalizations.of(context),
+                            imagePaths,
+                          ),
+                          menuActionClick: (menuAction) {
+                            onProfileSettingActionTypeClick(menuAction.action);
+                          },
+                        ))
+                    .toList(),
+              ],
+            ),
+            PositionedDirectional(
+              top: 6,
+              end: 6,
+              child: TMailButtonWidget.fromIcon(
+                icon: imagePaths.icComposerClose,
+                iconSize: 22,
+                iconColor: AppColor.m3Tertiary,
+                padding: const EdgeInsets.all(4),
+                borderRadius: 24,
+                backgroundColor: Colors.transparent,
+                onTapActionCallback: onCloseProfileSettingMenuAction,
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}