TF-2893 Apply the standard navigation bar

lib/features/mailbox_dashboard/presentation/base_mailbox_dashboard_view.dart

@@ -3,10 +3,9 @@ import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/filter_email_popup_menu_mixin.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/user_setting_popup_menu_mixin.dart';
 
 abstract class BaseMailboxDashBoardView extends GetWidget<MailboxDashBoardController>
-    with UserSettingPopupMenuMixin, FilterEmailPopupMenuMixin,
+    with FilterEmailPopupMenuMixin,
         AppLoaderMixin {
   BaseMailboxDashBoardView({Key? key}) : super(key: key);
 }

lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart

@@ -90,6 +90,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/search_controller.dart' as search;
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/spam_report_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/extensions/set_error_extension.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/user_setting_popup_menu_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/composer_overlay_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/dashboard_routes.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/download/download_task_state.dart';
@@ -156,7 +157,7 @@ import 'package:tmail_ui_user/main/utils/email_receive_manager.dart';
 import 'package:tmail_ui_user/main/utils/ios_notification_manager.dart';
 import 'package:uuid/uuid.dart';
 
-class MailboxDashBoardController extends ReloadableController {
+class MailboxDashBoardController extends ReloadableController with UserSettingPopupMenuMixin {
 
   final RemoveEmailDraftsInteractor _removeEmailDraftsInteractor = Get.find<RemoveEmailDraftsInteractor>();
   final EmailReceiveManager _emailReceiveManager = Get.find<EmailReceiveManager>();
@@ -2546,6 +2547,28 @@ class MailboxDashBoardController extends ReloadableController {
 
   List<Identity> get listIdentities => _identities ?? [];
 
+  void handleClickAvatarAction(BuildContext context, RelativeRect position) {
+    openPopupMenuAction(
+      context,
+      position,
+      popupMenuUserSettingActionTile(
+        context,
+        sessionCurrent?.username,
+        onLogoutAction: () {
+          popBack();
+          logout(
+            sessionCurrent,
+            accountId.value
+          );
+        },
+        onSettingAction: () {
+          popBack();
+          goToSettings();
+        }
+      )
+    );
+  }
+
   @override
   void onClose() {
     _emailReceiveManager.closeEmailReceiveManagerStream();

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -5,8 +5,6 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/extensions/username_extension.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
-import 'package:tmail_ui_user/features/base/widget/application_logo_with_text_widget.dart';
-import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/popup_item_no_icon_widget.dart';
 import 'package:tmail_ui_user/features/composer/presentation/composer_view_web.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
@@ -21,6 +19,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/sear
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_sort_order_type.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/download/download_task_item_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/recover_deleted_message_loading_banner_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/top_bar_thread_selection.dart';
@@ -38,12 +37,8 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/banner_delete
 import 'package:tmail_ui_user/features/thread/presentation/widgets/banner_empty_trash_widget.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_web_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
-import 'package:tmail_ui_user/main/routes/route_navigation.dart';
-import 'package:tmail_ui_user/main/utils/app_config.dart';
 import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
-import 'widgets/app_dashboard/app_grid_dashboard_overlay.dart';
-
 class MailboxDashBoardView extends BaseMailboxDashBoardView {
 
   MailboxDashBoardView({Key? key}) : super(key: key);
@@ -62,32 +57,21 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                 child: Container(
                   color: AppColor.colorBgDesktop,
                   child: Column(children: [
-                    Row(children: [
+                    Obx(() {
-                      Container(
+                      final accountId = controller.accountId.value;
-                        width: ResponsiveUtils.defaultSizeMenu,
+                      if (accountId == null) {
-                        color: Colors.white,
+                        return const SizedBox.shrink();
-                        padding: const EdgeInsetsDirectional.only(start: 28),
+                      } else {
-                        alignment: Alignment.center,
+                        return NavigationBarWidget(
-                        height: 80,
+                          avatarUserName: controller.sessionCurrent?.username.firstCharacter ?? '',
-                        child: Row(children: [
+                          searchForm: SearchInputFormWidget(),
-                          ApplicationLogoWidthTextWidget(
+                          appGridController: controller.appGridDashboardController,
-                            onTapAction: controller.redirectToInboxAction,
+                          onShowAppDashboardAction: controller.showAppDashboardAction,
-                          ),
+                          onTapApplicationLogoAction: controller.redirectToInboxAction,
-                          ApplicationVersionWidget(
+                          onTapAvatarAction: (position) => controller.handleClickAvatarAction(context, position),
-                            applicationManager: controller.applicationManager
+                        );
-                          )
+                      }
-                        ])
+                    }),
-                      ),
-                      Expanded(child: Container(
-                        color: Colors.white,
-                        alignment: Alignment.center,
-                        padding: EdgeInsets.only(
-                          right: AppUtils.isDirectionRTL(context) ? 0 : 10,
-                          left: AppUtils.isDirectionRTL(context) ? 10 : 0,
-                        ),
-                        height: 80,
-                        child: _buildRightHeader(context)))
-                    ]),
                     Expanded(child: Row(children: [
                       Column(children: [
                         _buildComposerButton(context),
@@ -278,81 +262,6 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
     );
   }
 
-  Widget _buildRightHeader(BuildContext context) {
-    return LayoutBuilder(builder: (context, constraint) {
-      return Row(children: [
-        SizedBox(
-          width: constraint.maxWidth / 2,
-          height: 52,
-          child: SearchInputFormWidget()
-        ),
-        const Spacer(),
-        AppConfig.appGridDashboardAvailable
-          ? Obx(() => PortalTarget(
-              visible: controller.appGridDashboardController.isAppGridDashboardOverlayOpen.isTrue,
-              portalFollower: GestureDetector(
-                behavior: HitTestBehavior.opaque,
-                onTap: () => controller.appGridDashboardController.toggleAppGridDashboard()),
-              child: PortalTarget(
-                anchor: Aligned(
-                  follower: AppUtils.isDirectionRTL(context)
-                    ? Alignment.topLeft
-                    : Alignment.topRight,
-                  target: AppUtils.isDirectionRTL(context)
-                    ? Alignment.bottomLeft
-                    : Alignment.bottomRight
-                ),
-                portalFollower: Obx(() {
-                  if (controller.appGridDashboardController.linagoraApplications.value != null) {
-                    return AppDashboardOverlay(controller.appGridDashboardController.linagoraApplications.value!);
-                  }
-                  return const SizedBox.shrink();
-                }),
-                visible: controller.appGridDashboardController.isAppGridDashboardOverlayOpen.isTrue,
-                child: buildIconWeb(
-                  onTap: controller.showAppDashboardAction,
-                  splashRadius: 20,
-                  icon: SvgPicture.asset(
-                    controller.imagePaths.icAppDashboard,
-                    width: 28,
-                    height: 28,
-                    fit: BoxFit.fill
-                  ),
-                ),
-              )
-            )
-          )
-          : const SizedBox.shrink(),
-        const SizedBox(width: 24),
-        Obx(() => (AvatarBuilder()
-          ..text(controller.accountId.value != null
-              ? controller.sessionCurrent?.username.firstCharacter ?? ''
-              : ''
-            )
-          ..backgroundColor(Colors.white)
-          ..textColor(Colors.black)
-          ..context(context)
-          ..addOnTapAvatarActionWithPositionClick((position) =>
-              controller.openPopupMenuAction(context, position, popupMenuUserSettingActionTile(context,
-                  controller.sessionCurrent?.username,
-                  onLogoutAction: () {
-                    popBack();
-                    controller.logout(controller.sessionCurrent, controller.accountId.value);
-                  },
-                  onSettingAction: () {
-                    popBack();
-                    controller.goToSettings();
-                  })))
-          ..addBoxShadows([const BoxShadow(
-              color: AppColor.colorShadowBgContentEmail,
-              spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))])
-          ..size(48))
-            .build()),
-        const SizedBox(width: 16)
-      ]);
-    });
-  }
-
   Widget _buildListButtonTopBar(BuildContext context) {
     return Row(children: [
       Obx(() {

lib/features/mailbox_dashboard/presentation/styles/navigation_bar_style.dart

@@ -0,0 +1,5 @@
+
+class NavigationBarStyle {
+  static const double barHeight = 80;
+  static const double horizontalMargin = 30;
+}

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

@@ -0,0 +1,112 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/image/avatar_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/base/widget/application_logo_with_text_widget.dart';
+import 'package:tmail_ui_user/features/base/widget/application_version_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/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/main/utils/app_config.dart';
+
+class NavigationBarWidget extends StatelessWidget {
+
+  final String avatarUserName;
+  final Widget? searchForm;
+  final AppGridDashboardController? appGridController;
+  final VoidCallback? onTapApplicationLogoAction;
+  final VoidCallback? onShowAppDashboardAction;
+  final OnTapAvatarActionWithPositionClick? onTapAvatarAction;
+
+  const NavigationBarWidget({
+    super.key,
+    required this.avatarUserName,
+    this.searchForm,
+    this.appGridController,
+    this.onShowAppDashboardAction,
+    this.onTapApplicationLogoAction,
+    this.onTapAvatarAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: NavigationBarStyle.barHeight,
+      color: Colors.white,
+      padding: const EdgeInsetsDirectional.symmetric(horizontal: NavigationBarStyle.horizontalMargin),
+      child: Row(children: [
+        SizedBox(
+          width: ResponsiveUtils.defaultSizeMenu - NavigationBarStyle.horizontalMargin,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              ApplicationLogoWidthTextWidget(onTapAction: onTapApplicationLogoAction),
+              const ApplicationVersionWidget()
+            ],
+          ),
+        ),
+        if (searchForm != null)
+          Expanded(child: LayoutBuilder(builder: (context, constraint) {
+            return Row(
+              children: [
+                SizedBox(
+                  width: constraint.maxWidth / 2,
+                  height: 52,
+                  child: searchForm
+                ),
+                const Spacer(),
+                if (AppConfig.appGridDashboardAvailable && appGridController != null)
+                  AppGridDashboardIcon(
+                    appGridController: appGridController!,
+                    onShowAppDashboardAction: onShowAppDashboardAction,
+                  ),
+                const SizedBox(width: 16),
+                (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()
+              ]
+            );
+          }))
+        else
+          ...[
+            const Spacer(),
+            if (AppConfig.appGridDashboardAvailable && appGridController != null)
+              AppGridDashboardIcon(
+                appGridController: appGridController!,
+                onShowAppDashboardAction: onShowAppDashboardAction,
+              ),
+            const SizedBox(width: 16),
+            (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()
+          ]
+      ]),
+    );
+  }
+}

lib/features/manage_account/presentation/manage_account_dashboard_controller.dart

@@ -15,6 +15,7 @@ import 'package:server_settings/server_settings/capability_server_settings.dart'
 import 'package:tmail_ui_user/features/base/action/ui_action.dart';
 import 'package:tmail_ui_user/features/base/reloadable/reloadable_controller.dart';
 import 'package:tmail_ui_user/features/base/state/banner_state.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/user_setting_popup_menu_mixin.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/state/get_all_vacation_state.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/state/update_vacation_state.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/usecases/get_all_vacation_interactor.dart';
@@ -39,7 +40,7 @@ import 'package:tmail_ui_user/main/routes/navigation_router.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 import 'package:tmail_ui_user/main/routes/route_utils.dart';
 
-class ManageAccountDashBoardController extends ReloadableController {
+class ManageAccountDashBoardController extends ReloadableController with UserSettingPopupMenuMixin {
 
   GetAllVacationInteractor? _getAllVacationInteractor;
   UpdateVacationInteractor? _updateVacationInteractor;
@@ -356,6 +357,21 @@ class ManageAccountDashBoardController extends ReloadableController {
     return false;
   }
 
+  void handleClickAvatarAction(BuildContext context, RelativeRect position) {
+    openPopupMenuAction(
+      context,
+      position,
+      popupMenuUserSettingActionTile(
+        context,
+        sessionCurrent?.username,
+        onLogoutAction: () {
+          popBack();
+          logout(sessionCurrent, accountId.value);
+        }
+      )
+    );
+  }
+
   @override
   void onClose() {
     BackButtonInterceptor.removeByName(AppRoutes.settings);

lib/features/manage_account/presentation/manage_account_dashboard_view.dart

@@ -1,15 +1,11 @@
-
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/image/avatar_builder.dart';
 import 'package:core/presentation/views/responsive/responsive_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/base/state/banner_state.dart';
-import 'package:tmail_ui_user/features/base/widget/application_logo_with_text_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart';
-import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/user_setting_popup_menu_mixin.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/always_read_receipt/always_read_receipt_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
@@ -20,17 +16,14 @@ import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visib
 import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/settings_view.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/profiles/profiles_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/vacation_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart';
-import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 
-class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardController>
+class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardController> {
-    with UserSettingPopupMenuMixin {
 
-  ManageAccountDashBoardView({Key? key}) : super(key: key);
+  const ManageAccountDashBoardView({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -42,26 +35,18 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
         child: ResponsiveWidget(
             responsiveUtils: controller.responsiveUtils,
             desktop: Column(children: [
-              Row(children: [
+              Obx(() {
-                Container(
+                final accountId = controller.accountId.value;
-                  width: ResponsiveUtils.defaultSizeMenu,
+                if (accountId == null) {
-                  color: Colors.white,
+                  return const SizedBox.shrink();
-                  padding: const EdgeInsetsDirectional.only(start: 28),
+                } else {
-                  alignment: Alignment.center,
+                  return NavigationBarWidget(
-                  height: 80,
+                    avatarUserName: controller.sessionCurrent?.username.firstCharacter ?? '',
-                  child: Row(children: [
+                    onTapApplicationLogoAction: () => controller.backToMailboxDashBoard(context: context),
-                    ApplicationLogoWidthTextWidget(
+                    onTapAvatarAction: (position) => controller.handleClickAvatarAction(context, position),
-                      onTapAction: () => controller.backToMailboxDashBoard(context: context),
+                  );
-                    ),
+                }
-                    ApplicationVersionWidget(
+              }),
-                      applicationManager: controller.applicationManager
-                    )
-                  ])
-                ),
-                Expanded(child: Padding(
-                    padding: SettingsUtils.getPaddingRightHeaderSetting(context),
-                    child: _buildRightHeader(context)))
-              ]),
               Expanded(child: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
@@ -119,41 +104,6 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
     );
   }
 
-  Widget _buildRightHeader(BuildContext context) {
-    return Row(children: [
-      const Spacer(),
-      const SizedBox(width: 16),
-      Obx(() => (AvatarBuilder()
-          ..text(controller.accountId.value != null
-              ? controller.sessionCurrent?.username.firstCharacter ?? ''
-              : ''
-            )
-          ..backgroundColor(Colors.white)
-          ..textColor(Colors.black)
-          ..context(context)
-          ..addOnTapAvatarActionWithPositionClick((position) {
-            return controller.openPopupMenuAction(
-              context,
-              position,
-              popupMenuUserSettingActionTile(
-                context,
-                controller.sessionCurrent?.username,
-                onLogoutAction: () {
-                  popBack();
-                  controller.logout(controller.sessionCurrent, controller.accountId.value);
-                }
-              )
-            );
-          })
-          ..addBoxShadows([const BoxShadow(
-              color: AppColor.colorShadowBgContentEmail,
-              spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))])
-          ..size(48))
-        .build()),
-      const SizedBox(width: 16)
-    ]);
-  }
-
   Widget _viewDisplayedOfAccountMenuItem() {
     return Obx(() {
       switch(controller.accountMenuItemSelected.value) {