From 252df057ba2c9949a12ac440f5ec511cde5bd65f Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 6 Aug 2024 17:05:55 +0700 Subject: [PATCH] TF-2975 Change the layout main screen in mobile app --- .../views/search/search_bar_view.dart | 7 +- .../mobile_app_bar_thread_widget_style.dart | 12 ++- .../presentation/thread_controller.dart | 4 - .../thread/presentation/thread_view.dart | 1 - .../app_bar/app_bar_thread_widget.dart | 5 - .../default_mobile_app_bar_thread_widget.dart | 85 +++++++++++++++ .../app_bar/mobile_app_bar_thread_widget.dart | 100 +++++------------- ...election_mobile_app_bar_thread_widget.dart | 72 +++++++++++++ .../app_bar/web_app_bar_thread_widget.dart | 2 - 9 files changed, 194 insertions(+), 94 deletions(-) create mode 100644 lib/features/thread/presentation/widgets/app_bar/default_mobile_app_bar_thread_widget.dart create mode 100644 lib/features/thread/presentation/widgets/app_bar/selection_mobile_app_bar_thread_widget.dart diff --git a/core/lib/presentation/views/search/search_bar_view.dart b/core/lib/presentation/views/search/search_bar_view.dart index 1552ce1c6..3e4a43054 100644 --- a/core/lib/presentation/views/search/search_bar_view.dart +++ b/core/lib/presentation/views/search/search_bar_view.dart @@ -30,13 +30,13 @@ class SearchBarView extends StatelessWidget { onTap: onOpenSearchViewAction, mouseCursor: SystemMouseCursors.text, splashColor: Colors.transparent, - borderRadius: const BorderRadius.all(Radius.circular(12)), + borderRadius: const BorderRadius.all(Radius.circular(10)), child: Container( alignment: Alignment.center, - height: 40, + height: 44, width: double.infinity, decoration: const BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(12)), + borderRadius: BorderRadius.all(Radius.circular(10)), color: AppColor.colorBgSearchBar ), child: Row( @@ -45,6 +45,7 @@ class SearchBarView extends StatelessWidget { TMailButtonWidget.fromIcon( icon: imagePaths.icSearchBar, backgroundColor: Colors.transparent, + iconColor: AppColor.colorTextBody, onTapActionCallback: onOpenSearchViewAction ), Expanded( diff --git a/lib/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart b/lib/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart index fd5810d0e..fde95c7da 100644 --- a/lib/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart +++ b/lib/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart @@ -19,16 +19,18 @@ class MobileAppBarThreadWidgetStyle { return const EdgeInsets.symmetric(horizontal: 32, vertical: 8); } } + static const EdgeInsetsGeometry mailboxMenuPadding = EdgeInsets.all(5); + static const EdgeInsetsGeometry titlePadding = EdgeInsets.symmetric(horizontal: 16); - static const TextStyle editButtonStyle = TextStyle( - fontSize: 17, - color: AppColor.primaryColor - ); static const TextStyle emailCounterTitleStyle = TextStyle( fontSize: 17, color: AppColor.primaryColor ); - + static const TextStyle titleTextStyle = TextStyle( + fontSize: 21, + color: Colors.black, + fontWeight: FontWeight.bold + ); static Color getFilterButtonColor(FilterMessageOption option) { return option == FilterMessageOption.all ? AppColor.colorFilterMessageDisabled diff --git a/lib/features/thread/presentation/thread_controller.dart b/lib/features/thread/presentation/thread_controller.dart index ba22218fb..4d37da953 100644 --- a/lib/features/thread/presentation/thread_controller.dart +++ b/lib/features/thread/presentation/thread_controller.dart @@ -718,10 +718,6 @@ class ThreadController extends BaseController with EmailActionController { } } - void enableSelectionEmail() { - mailboxDashBoardController.currentSelectMode.value = SelectMode.ACTIVE; - } - void setSelectAllEmailAction() { final newEmailList = mailboxDashBoardController.emailsInCurrentMailbox .map((email) => email.toSelectedEmail(selectMode: SelectMode.ACTIVE)) diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index a9515f60e..59bc6deac 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -74,7 +74,6 @@ class ThreadView extends GetWidget filterOption: controller.mailboxDashBoardController.filterMessageOption.value, openMailboxAction: controller.openMailboxLeftMenu, cancelEditThreadAction: controller.cancelSelectEmail, - editThreadAction: controller.enableSelectionEmail, emailSelectionAction: (actionType, selectionEmail) { return controller.pressEmailSelectionAction( context, diff --git a/lib/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart b/lib/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart index b575d03e3..44314d242 100644 --- a/lib/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart +++ b/lib/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart @@ -11,7 +11,6 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/web_a typedef OnPopupMenuFilterEmailAction = void Function(FilterMessageOption, RelativeRect); typedef OnContextMenuFilterEmailAction = void Function(FilterMessageOption); -typedef OnEditThreadAction = void Function(); typedef OnOpenMailboxMenuActionClick = void Function(); typedef OnCancelEditThreadAction = void Function(); typedef OnEmailSelectionAction = void Function(EmailActionType, List); @@ -20,7 +19,6 @@ class AppBarThreadWidget extends StatelessWidget { final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction; final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction; final OnOpenMailboxMenuActionClick openMailboxAction; - final OnEditThreadAction editThreadAction; final OnCancelEditThreadAction cancelEditThreadAction; final OnEmailSelectionAction emailSelectionAction; final PresentationMailbox? mailboxSelected; @@ -35,7 +33,6 @@ class AppBarThreadWidget extends StatelessWidget { required this.selectMode, required this.filterOption, required this.openMailboxAction, - required this.editThreadAction, required this.cancelEditThreadAction, required this.emailSelectionAction, this.onPopupMenuFilterEmailAction, @@ -52,7 +49,6 @@ class AppBarThreadWidget extends StatelessWidget { selectMode: selectMode, filterOption: filterOption, openMailboxAction: openMailboxAction, - editThreadAction: editThreadAction, cancelEditThreadAction: cancelEditThreadAction, emailSelectionAction: emailSelectionAction, onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction, @@ -66,7 +62,6 @@ class AppBarThreadWidget extends StatelessWidget { selectMode: selectMode, filterOption: filterOption, openMailboxAction: openMailboxAction, - editThreadAction: editThreadAction, cancelEditThreadAction: cancelEditThreadAction, onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction, onContextMenuFilterEmailAction: onContextMenuFilterEmailAction, diff --git a/lib/features/thread/presentation/widgets/app_bar/default_mobile_app_bar_thread_widget.dart b/lib/features/thread/presentation/widgets/app_bar/default_mobile_app_bar_thread_widget.dart new file mode 100644 index 000000000..7ccba76ef --- /dev/null +++ b/lib/features/thread/presentation/widgets/app_bar/default_mobile_app_bar_thread_widget.dart @@ -0,0 +1,85 @@ + +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:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:model/email/presentation_email.dart'; +import 'package:model/mailbox/presentation_mailbox.dart'; +import 'package:model/mailbox/select_mode.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart'; +import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart'; +import 'package:tmail_ui_user/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class DefaultMobileAppBarThreadWidget extends StatelessWidget { + final _imagePaths = Get.find(); + final _responsiveUtils = Get.find(); + + final PresentationMailbox? mailboxSelected; + final List listEmailSelected; + final SelectMode selectMode; + final FilterMessageOption filterOption; + final OnOpenMailboxMenuActionClick openMailboxAction; + final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction; + final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction; + final OnCancelEditThreadAction cancelEditThreadAction; + + DefaultMobileAppBarThreadWidget({ + super.key, + required this.listEmailSelected, + required this.mailboxSelected, + required this.selectMode, + required this.filterOption, + required this.openMailboxAction, + required this.cancelEditThreadAction, + this.onPopupMenuFilterEmailAction, + this.onContextMenuFilterEmailAction, + }); + + @override + Widget build(BuildContext context) { + return LayoutBuilder(builder: (context, constraints) { + return Container( + color: MobileAppBarThreadWidgetStyle.backgroundColor, + padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils), + constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight), + child: Row( + children: [ + TMailButtonWidget.fromIcon( + key: const Key('mobile_mailbox_menu_button'), + icon: _imagePaths.icMenuDrawer, + backgroundColor: Colors.transparent, + padding: MobileAppBarThreadWidgetStyle.mailboxMenuPadding, + maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth, + tooltipMessage: AppLocalizations.of(context).openFolderMenu, + onTapActionCallback: openMailboxAction, + ), + Expanded( + child: Padding( + padding: MobileAppBarThreadWidgetStyle.titlePadding, + child: Text( + mailboxSelected?.getDisplayName(context) ?? '', + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: MobileAppBarThreadWidgetStyle.titleTextStyle + ), + ), + ), + TMailButtonWidget.fromIcon( + key: const Key('mobile_filter_message_button'), + icon: _imagePaths.icFilter, + iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption), + backgroundColor: Colors.transparent, + maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth, + tooltipMessage: AppLocalizations.of(context).filter_messages, + onTapActionCallback: () => onContextMenuFilterEmailAction?.call(filterOption), + onTapActionAtPositionCallback: (position) => onPopupMenuFilterEmailAction?.call(filterOption, position), + ), + ] + ), + ); + }); + } +} diff --git a/lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart b/lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart index ffd7df49a..f18acdde5 100644 --- a/lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart +++ b/lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart @@ -1,40 +1,29 @@ - -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:flutter/material.dart'; -import 'package:get/get.dart'; import 'package:model/email/presentation_email.dart'; import 'package:model/mailbox/presentation_mailbox.dart'; import 'package:model/mailbox/select_mode.dart'; import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart'; -import 'package:tmail_ui_user/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart'; import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart'; -import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/title_app_bar_thread_widget.dart'; -import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/default_mobile_app_bar_thread_widget.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/selection_mobile_app_bar_thread_widget.dart'; class MobileAppBarThreadWidget extends StatelessWidget { - final _imagePaths = Get.find(); - final _responsiveUtils = Get.find(); - final PresentationMailbox? mailboxSelected; final List listEmailSelected; final SelectMode selectMode; final FilterMessageOption filterOption; final OnOpenMailboxMenuActionClick openMailboxAction; - final OnEditThreadAction editThreadAction; final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction; final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction; final OnCancelEditThreadAction cancelEditThreadAction; - MobileAppBarThreadWidget({ + const MobileAppBarThreadWidget({ super.key, required this.listEmailSelected, required this.mailboxSelected, required this.selectMode, required this.filterOption, required this.openMailboxAction, - required this.editThreadAction, required this.cancelEditThreadAction, this.onPopupMenuFilterEmailAction, this.onContextMenuFilterEmailAction, @@ -42,66 +31,29 @@ class MobileAppBarThreadWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return LayoutBuilder(builder: (context, constraints) { - return Container( - color: MobileAppBarThreadWidgetStyle.backgroundColor, - padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils), - constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight), - child: Stack( - alignment: AlignmentDirectional.center, - children: [ - if (selectMode == SelectMode.INACTIVE) - PositionedDirectional( - start: 0, - child: TMailButtonWidget.fromText( - key: const Key('selection_thread_button'), - text: AppLocalizations.of(context).edit, - textStyle: MobileAppBarThreadWidgetStyle.editButtonStyle, - backgroundColor: Colors.transparent, - maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth, - maxLines: 1, - tooltipMessage: AppLocalizations.of(context).edit, - onTapActionCallback: editThreadAction, - ), - ) - else - PositionedDirectional( - start: 0, - child: TMailButtonWidget( - key: const Key('cancel_selection_thread_button'), - text: '${listEmailSelected.length}', - icon: _imagePaths.icBack, - iconColor: MobileAppBarThreadWidgetStyle.backButtonColor, - textStyle: MobileAppBarThreadWidgetStyle.emailCounterTitleStyle, - backgroundColor: Colors.transparent, - onTapActionCallback: cancelEditThreadAction, - ), - ), - Center( - child: TitleAppBarThreadWidget( - key: const Key('title_app_bar_thread'), - mailboxSelected: mailboxSelected, - filterOption: filterOption, - maxWidth: constraints.maxWidth - MobileAppBarThreadWidgetStyle.titleOffset, - openMailboxAction: openMailboxAction, - ), - ), - PositionedDirectional( - end: 0, - child: TMailButtonWidget.fromIcon( - key: const Key('filter_message_button'), - icon: _imagePaths.icFilter, - iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption), - backgroundColor: Colors.transparent, - maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth, - tooltipMessage: AppLocalizations.of(context).filter_messages, - onTapActionCallback: () => onContextMenuFilterEmailAction?.call(filterOption), - onTapActionAtPositionCallback: (position) => onPopupMenuFilterEmailAction?.call(filterOption, position), - ), - ), - ] - ), + if (selectMode == SelectMode.ACTIVE) { + return SelectionMobileAppBarThreadWidget( + key: const Key('selection_mobile_app_bar_thread_widget'), + listEmailSelected: listEmailSelected, + mailboxSelected: mailboxSelected, + selectMode: selectMode, + filterOption: filterOption, + cancelEditThreadAction: cancelEditThreadAction, + onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction, + onContextMenuFilterEmailAction: onContextMenuFilterEmailAction, ); - }); + } else { + return DefaultMobileAppBarThreadWidget( + key: const Key('default_mobile_app_bar_thread_widget'), + listEmailSelected: listEmailSelected, + mailboxSelected: mailboxSelected, + selectMode: selectMode, + filterOption: filterOption, + openMailboxAction: openMailboxAction, + cancelEditThreadAction: cancelEditThreadAction, + onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction, + onContextMenuFilterEmailAction: onContextMenuFilterEmailAction, + ); + } } } diff --git a/lib/features/thread/presentation/widgets/app_bar/selection_mobile_app_bar_thread_widget.dart b/lib/features/thread/presentation/widgets/app_bar/selection_mobile_app_bar_thread_widget.dart new file mode 100644 index 000000000..232c14568 --- /dev/null +++ b/lib/features/thread/presentation/widgets/app_bar/selection_mobile_app_bar_thread_widget.dart @@ -0,0 +1,72 @@ + +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:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:model/email/presentation_email.dart'; +import 'package:model/mailbox/presentation_mailbox.dart'; +import 'package:model/mailbox/select_mode.dart'; +import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart'; +import 'package:tmail_ui_user/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class SelectionMobileAppBarThreadWidget extends StatelessWidget { + final _imagePaths = Get.find(); + final _responsiveUtils = Get.find(); + + final PresentationMailbox? mailboxSelected; + final List listEmailSelected; + final SelectMode selectMode; + final FilterMessageOption filterOption; + final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction; + final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction; + final OnCancelEditThreadAction cancelEditThreadAction; + + SelectionMobileAppBarThreadWidget({ + super.key, + required this.listEmailSelected, + required this.mailboxSelected, + required this.selectMode, + required this.filterOption, + required this.cancelEditThreadAction, + this.onPopupMenuFilterEmailAction, + this.onContextMenuFilterEmailAction, + }); + + @override + Widget build(BuildContext context) { + return LayoutBuilder(builder: (context, constraints) { + return Container( + color: MobileAppBarThreadWidgetStyle.backgroundColor, + padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils), + constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight), + child: Row( + children: [ + TMailButtonWidget( + key: const Key('mobile_cancel_selection_thread_button'), + text: '${listEmailSelected.length}', + icon: _imagePaths.icBack, + iconColor: MobileAppBarThreadWidgetStyle.backButtonColor, + textStyle: MobileAppBarThreadWidgetStyle.emailCounterTitleStyle, + backgroundColor: Colors.transparent, + onTapActionCallback: cancelEditThreadAction, + ), + const Spacer(), + TMailButtonWidget.fromIcon( + key: const Key('mobile_filter_message_button'), + icon: _imagePaths.icFilter, + iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption), + backgroundColor: Colors.transparent, + maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth, + tooltipMessage: AppLocalizations.of(context).filter_messages, + onTapActionCallback: () => onContextMenuFilterEmailAction?.call(filterOption), + onTapActionAtPositionCallback: (position) => onPopupMenuFilterEmailAction?.call(filterOption, position), + ), + ] + ), + ); + }); + } +} diff --git a/lib/features/thread/presentation/widgets/app_bar/web_app_bar_thread_widget.dart b/lib/features/thread/presentation/widgets/app_bar/web_app_bar_thread_widget.dart index 36148d275..af5443d27 100644 --- a/lib/features/thread/presentation/widgets/app_bar/web_app_bar_thread_widget.dart +++ b/lib/features/thread/presentation/widgets/app_bar/web_app_bar_thread_widget.dart @@ -15,7 +15,6 @@ class WebAppBarThreadWidget extends StatelessWidget { final SelectMode selectMode; final FilterMessageOption filterOption; final OnOpenMailboxMenuActionClick openMailboxAction; - final OnEditThreadAction editThreadAction; final OnCancelEditThreadAction cancelEditThreadAction; final OnEmailSelectionAction emailSelectionAction; final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction; @@ -28,7 +27,6 @@ class WebAppBarThreadWidget extends StatelessWidget { required this.selectMode, required this.filterOption, required this.openMailboxAction, - required this.editThreadAction, required this.cancelEditThreadAction, required this.emailSelectionAction, this.onPopupMenuFilterEmailAction,