From 47b006f685d6c11f120cc25656a56966eec72fc0 Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 23 Jul 2024 13:32:32 +0700 Subject: [PATCH] TF-2893 Apply the standard navigation bar --- .../base_mailbox_dashboard_view.dart | 3 +- .../mailbox_dashboard_controller.dart | 25 +++- .../mailbox_dashboard_view_web.dart | 123 +++--------------- .../styles/navigation_bar_style.dart | 5 + .../navigation_bar/navigation_bar_widget.dart | 112 ++++++++++++++++ .../manage_account_dashboard_controller.dart | 18 ++- .../manage_account_dashboard_view.dart | 80 +++--------- 7 files changed, 190 insertions(+), 176 deletions(-) create mode 100644 lib/features/mailbox_dashboard/presentation/styles/navigation_bar_style.dart create mode 100644 lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart diff --git a/lib/features/mailbox_dashboard/presentation/base_mailbox_dashboard_view.dart b/lib/features/mailbox_dashboard/presentation/base_mailbox_dashboard_view.dart index 344dd661b..3427ab5a1 100644 --- a/lib/features/mailbox_dashboard/presentation/base_mailbox_dashboard_view.dart +++ b/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 - with UserSettingPopupMenuMixin, FilterEmailPopupMenuMixin, + with FilterEmailPopupMenuMixin, AppLoaderMixin { BaseMailboxDashBoardView({Key? key}) : super(key: key); } \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart b/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart index 1d098932d..e67d462f6 100644 --- a/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart +++ b/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(); final EmailReceiveManager _emailReceiveManager = Get.find(); @@ -2546,6 +2547,28 @@ class MailboxDashBoardController extends ReloadableController { List 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(); diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart index 5ebfb3bba..e742242d3 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/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: [ - Container( - width: ResponsiveUtils.defaultSizeMenu, - color: Colors.white, - padding: const EdgeInsetsDirectional.only(start: 28), - alignment: Alignment.center, - height: 80, - child: Row(children: [ - ApplicationLogoWidthTextWidget( - onTapAction: controller.redirectToInboxAction, - ), - ApplicationVersionWidget( - 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))) - ]), + Obx(() { + final accountId = controller.accountId.value; + if (accountId == null) { + return const SizedBox.shrink(); + } else { + return NavigationBarWidget( + avatarUserName: controller.sessionCurrent?.username.firstCharacter ?? '', + searchForm: SearchInputFormWidget(), + appGridController: controller.appGridDashboardController, + onShowAppDashboardAction: controller.showAppDashboardAction, + onTapApplicationLogoAction: controller.redirectToInboxAction, + onTapAvatarAction: (position) => controller.handleClickAvatarAction(context, position), + ); + } + }), 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(() { diff --git a/lib/features/mailbox_dashboard/presentation/styles/navigation_bar_style.dart b/lib/features/mailbox_dashboard/presentation/styles/navigation_bar_style.dart new file mode 100644 index 000000000..d1c97603b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart b/lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart new file mode 100644 index 000000000..ad13899bd --- /dev/null +++ b/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() + ] + ]), + ); + } +} diff --git a/lib/features/manage_account/presentation/manage_account_dashboard_controller.dart b/lib/features/manage_account/presentation/manage_account_dashboard_controller.dart index 40106ecbf..16f63df27 100644 --- a/lib/features/manage_account/presentation/manage_account_dashboard_controller.dart +++ b/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); diff --git a/lib/features/manage_account/presentation/manage_account_dashboard_view.dart b/lib/features/manage_account/presentation/manage_account_dashboard_view.dart index af811110b..bfe29c01a 100644 --- a/lib/features/manage_account/presentation/manage_account_dashboard_view.dart +++ b/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/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/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.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 - with UserSettingPopupMenuMixin { +class ManageAccountDashBoardView extends GetWidget { - 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 controller.backToMailboxDashBoard(context: context), - ), - ApplicationVersionWidget( - applicationManager: controller.applicationManager - ) - ]) - ), - Expanded(child: Padding( - padding: SettingsUtils.getPaddingRightHeaderSetting(context), - child: _buildRightHeader(context))) - ]), + Obx(() { + final accountId = controller.accountId.value; + if (accountId == null) { + return const SizedBox.shrink(); + } else { + return NavigationBarWidget( + avatarUserName: controller.sessionCurrent?.username.firstCharacter ?? '', + onTapApplicationLogoAction: () => controller.backToMailboxDashBoard(context: context), + onTapAvatarAction: (position) => controller.handleClickAvatarAction(context, position), + ); + } + }), Expanded(child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -119,41 +104,6 @@ class ManageAccountDashBoardView extends GetWidget (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) {