From 8248ad2f48183a5b252c39e09f5139fb54280212 Mon Sep 17 00:00:00 2001 From: dab246 Date: Fri, 8 Apr 2022 22:28:38 +0700 Subject: [PATCH] TF-467 Apply new UI for threadView --- .../presentation/utils/responsive_utils.dart | 3 +- .../presentation/destination_picker_view.dart | 8 +- .../presentation/mailbox_controller.dart | 2 + .../mailbox/presentation/mailbox_view.dart | 2 +- .../presentation/mailbox_view_web.dart | 42 ++--- .../widgets/mailbox_folder_tile_builder.dart | 16 +- .../mailbox_dashboard_view_web.dart | 6 +- .../presentation/thread_controller.dart | 10 +- .../thread/presentation/thread_view.dart | 66 +++---- .../app_bar_thread_widget_builder.dart | 167 +++++++++++++----- .../widgets/email_tile_builder.dart | 26 ++- .../widgets/search_app_bar_widget.dart | 23 +-- 12 files changed, 233 insertions(+), 138 deletions(-) diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index e2bc07b0b..07b8412fb 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -9,7 +9,8 @@ class ResponsiveUtils { final int minTabletLargeWidth = 900; final double defaultSizeDrawerWidthMobileTablet = 375; - final double defaultSizeDrawerWidthWeb = 262; + final double defaultSizeDrawerWidthWeb = 320; + final double defaultSizeMenuWidthWeb = 262; final double _loginTextFieldWidthSmallScreen = 280.0; final double _loginTextFieldWidthLargeScreen = 320.0; diff --git a/lib/features/destination_picker/presentation/destination_picker_view.dart b/lib/features/destination_picker/presentation/destination_picker_view.dart index 1ee209497..2b21ccfcc 100644 --- a/lib/features/destination_picker/presentation/destination_picker_view.dart +++ b/lib/features/destination_picker/presentation/destination_picker_view.dart @@ -1,4 +1,5 @@ import 'package:core/core.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -135,7 +136,7 @@ class DestinationPickerView extends GetWidget { Widget _buildSearchBarWidget(BuildContext context) { return Padding( padding: EdgeInsets.only( - top: _responsiveUtils.isMobile(context) ? 12 : 0, + top: _responsiveUtils.isMobile(context) || kIsWeb ? 12 : 0, left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16, right: 16), child: (SearchBarView(_imagePaths) @@ -179,7 +180,7 @@ class DestinationPickerView extends GetWidget { ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root, actions) : SizedBox.shrink()), if (actions == MailboxActions.create) SizedBox(height: 12), - if (actions != MailboxActions.create) + if (actions != MailboxActions.create && !kIsWeb) Padding( padding: EdgeInsets.only(left: 60), child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)), @@ -289,6 +290,7 @@ class DestinationPickerView extends GetWidget { alignment: Alignment.center, margin: EdgeInsets.only( left: !_responsiveUtils.isLandscapeMobile(context) ? 16 : 0, + top: kIsWeb ? 16 : 0, right: 16), decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white), child: MediaQuery( @@ -347,7 +349,7 @@ class DestinationPickerView extends GetWidget { ..addPadding(EdgeInsets.zero) ..setMargin(EdgeInsets.only(right: 16)) ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar)) - ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill)) + ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 18, height: 18, fit: BoxFit.fill)) ..setHintText(AppLocalizations.of(context).hint_search_mailboxes) ..addOnClearTextSearchAction(() => controller.clearSearchText()) ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query)) diff --git a/lib/features/mailbox/presentation/mailbox_controller.dart b/lib/features/mailbox/presentation/mailbox_controller.dart index dbbbe3ff8..64ad19a47 100644 --- a/lib/features/mailbox/presentation/mailbox_controller.dart +++ b/lib/features/mailbox/presentation/mailbox_controller.dart @@ -234,6 +234,8 @@ class MailboxController extends BaseMailboxController { mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode( defaultMailbox: ExpandMode.COLLAPSE, folderMailbox: ExpandMode.COLLAPSE); + } else { + mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode.initial(); } } } diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index aaa91b7ec..0be86d4ad 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -371,7 +371,7 @@ class MailboxView extends GetWidget { ..addPadding(EdgeInsets.zero) ..setMargin(EdgeInsets.only(right: 16)) ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar)) - ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill)) + ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 18, height: 18, fit: BoxFit.fill)) ..setHintText(AppLocalizations.of(context).hint_search_mailboxes) ..addOnClearTextSearchAction(() => controller.clearSearchText()) ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query)) diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index 4a697602b..d3c3f7107 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -34,11 +34,11 @@ class MailboxView extends GetWidget { color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, child: Column(children: [ if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context), - SizedBox(height: 16), Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()), Expanded(child: Obx(() => Container( color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, padding: EdgeInsets.zero, + margin: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 0), child: RefreshIndicator( color: AppColor.primaryColor, onRefresh: () async => controller.refreshAllMailbox(), @@ -122,14 +122,14 @@ class MailboxView extends GetWidget { Widget _buildLoadingView() { return Obx(() => controller.viewState.value.fold( - (failure) => SizedBox.shrink(), - (success) => success is LoadingState + (failure) => SizedBox.shrink(), + (success) => success is LoadingState ? Center(child: Padding( - padding: EdgeInsets.only(top: 16), - child: SizedBox( - width: 24, - height: 24, - child: CupertinoActivityIndicator(color: AppColor.colorTextButton)))) + padding: EdgeInsets.only(top: 16), + child: SizedBox( + width: 24, + height: 24, + child: CupertinoActivityIndicator(color: AppColor.colorTextButton)))) : SizedBox.shrink())); } @@ -166,17 +166,17 @@ class MailboxView extends GetWidget { Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root) : SizedBox.shrink()), - Obx(() => !controller.isSearchActive() - ? Row(children: [ - Expanded(child: _buildSearchBarWidget(context)), - Padding( - padding: EdgeInsets.only(right: 8), - child: buildIconWeb( - icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill), - tooltip: AppLocalizations.of(context).new_mailbox, - onTap: () => controller.goToCreateNewMailboxView())), - ]) - : SizedBox.shrink()), + SizedBox(height: 8), + Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), + Row(children: [ + Expanded(child: _buildSearchBarWidget(context)), + Padding( + padding: EdgeInsets.only(right: 8), + child: buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill), + tooltip: AppLocalizations.of(context).new_mailbox, + onTap: () => controller.goToCreateNewMailboxView())), + ]), ] ); } @@ -262,7 +262,7 @@ class MailboxView extends GetWidget { Widget _buildInputSearchFormWidget(BuildContext context) { return Padding( - padding: EdgeInsets.only(left: 8), + padding: EdgeInsets.only(left: 8, top: 16), child: Row( children: [ buildIconWeb( @@ -273,7 +273,7 @@ class MailboxView extends GetWidget { ..addPadding(EdgeInsets.zero) ..setMargin(EdgeInsets.only(right: 16)) ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar)) - ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill)) + ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 16, height: 16, fit: BoxFit.fill)) ..setHintText(AppLocalizations.of(context).hint_search_mailboxes) ..addOnClearTextSearchAction(() => controller.clearSearchText()) ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query)) diff --git a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart index 20565131d..67604bee8 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart @@ -173,13 +173,17 @@ class MailBoxFolderTileBuilder { } Color get backgroundColorItem { - if (kIsWeb) { - if (mailboxNodeSelected?.id == _mailboxNode.item.id) { - return AppColor.colorBgMailboxSelected; - } - return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white; - } else { + if (mailboxDisplayed == MailboxDisplayed.destinationPicker) { return Colors.white; + } else { + if (kIsWeb) { + if (mailboxNodeSelected?.id == _mailboxNode.item.id) { + return AppColor.colorBgMailboxSelected; + } + return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white; + } else { + return Colors.white; + } } } } \ No newline at end of file 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 a041bfee3..51b1f2958 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -22,9 +22,7 @@ class MailboxDashBoardView extends GetWidget with Ne key: controller.scaffoldKey, drawer: ResponsiveWidget( responsiveUtils: _responsiveUtils, - mobile: _responsiveUtils.isPortrait(context) - ? SizedBox(child: MailboxView(), width: double.infinity) - : SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), + mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), tabletLarge: SizedBox.shrink(), desktop: SizedBox.shrink() @@ -95,7 +93,7 @@ class MailboxDashBoardView extends GetWidget with Ne child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), + SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb), Expanded(child: _buildThreadAndEmailContainer(context)) ], ), diff --git a/lib/features/thread/presentation/thread_controller.dart b/lib/features/thread/presentation/thread_controller.dart index f9c54ae45..1ed56e87a 100644 --- a/lib/features/thread/presentation/thread_controller.dart +++ b/lib/features/thread/presentation/thread_controller.dart @@ -733,10 +733,14 @@ class ThreadController extends BaseController { countMarkStarSuccess = success.countMarkStarSuccess; } - if (currentContext != null && markStarAction != null) { - _appToast.showSuccessToast(markStarAction == MarkStarAction.unMarkStar + if (currentContext != null && markStarAction != null && currentOverlayContext != null) { + final message = markStarAction == MarkStarAction.unMarkStar ? AppLocalizations.of(currentContext!).marked_unstar_multiple_item(countMarkStarSuccess) - : AppLocalizations.of(currentContext!).marked_star_multiple_item(countMarkStarSuccess)); + : AppLocalizations.of(currentContext!).marked_star_multiple_item(countMarkStarSuccess); + _appToast.showToastWithIcon( + currentOverlayContext!, + message: message, + icon: markStarAction == MarkStarAction.unMarkStar ? _imagePaths.icUnStar : _imagePaths.icStar); } _refreshEmailChanges(); diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index d6962c0b3..1f96bd39e 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -32,11 +32,11 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi resizeToAvoidBottomInset: false, backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, body: Row(children: [ - if (!kIsWeb && !_responsiveUtils.isMobile(context)) + if ((!kIsWeb && !_responsiveUtils.isMobile(context)) || (kIsWeb && _responsiveUtils.isTabletLarge(context))) VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2), Expanded(child: SafeArea( - right: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context), - left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context), + right: _responsiveUtils.isLandscapeMobile(context), + left: _responsiveUtils.isLandscapeMobile(context), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -45,23 +45,20 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi color: Colors.white, padding: EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 32), child: _buildHeader(context)), - Padding( - padding: EdgeInsets.only( - left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0), - child: _buildSearchInputFormForMobile(context)), + Obx(() => !controller.isSearchActive() && !_responsiveUtils.isDesktop(context) + ? _buildAppBarNormal(context) + : SizedBox.shrink()), + _buildSearchInputFormForMobile(context), Container( color: kIsWeb ? AppColor.colorBgDesktop : Colors.white, - padding: EdgeInsets.only( - left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0), + padding: EdgeInsets.zero, child: _buildSearchButtonViewForMobile(context)), Obx(() => controller.isMailboxTrash && controller.emailList.isNotEmpty && !controller.isSearchActive() ? _buildEmptyTrashButton(context) : SizedBox.shrink()), Expanded(child: Container( - padding: EdgeInsets.only( - left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0), color: kIsWeb ? AppColor.colorBgDesktop : Colors.white, - margin: _responsiveUtils.isDesktop(context) ? EdgeInsets.all(16) : EdgeInsets.zero, + padding: _responsiveUtils.isDesktop(context) ? EdgeInsets.only(left: 32, right: 24, top: 16, bottom: 24) : EdgeInsets.zero, child: Stack(children: [ Container( alignment: Alignment.center, @@ -81,7 +78,7 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi ), _buildSuggestionBox(context) ]))), - _buildListButtonSelectionForMobile(context), + if (!kIsWeb) _buildListButtonSelectionForMobile(context), ] ) )) @@ -93,14 +90,10 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi Widget _buildHeader(BuildContext context) { return Row(children: [ - Obx(() => !controller.isSelectionEnabled() && _responsiveUtils.isDesktop(context) - ? _buildListButtonTopBar(context) - : SizedBox.shrink()), - Obx(() => controller.isSelectionEnabled() && _responsiveUtils.isDesktop(context) - ? _buildListButtonSelectionForDesktop(context) - : SizedBox.shrink()), + Obx(() => !controller.isSelectionEnabled() ? _buildListButtonTopBar(context) : SizedBox.shrink()), + Obx(() => controller.isSelectionEnabled() ? _buildListButtonSelectionForDesktop(context) : SizedBox.shrink()), SizedBox(width: 16), - Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context) ? Spacer() : SizedBox.shrink()), + Obx(() => !controller.isSearchActive() ? Spacer() : SizedBox.shrink()), Expanded(child: _buildSearchInputFormForDesktop(context)), _buildSearchButtonViewForDesktop(context), Padding( @@ -124,7 +117,6 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi Widget _buildListButtonTopBar(BuildContext context) { return Row(children: [ - if (!controller.isSearchActive()) SizedBox(width: 16), if (!controller.isSearchActive()) (ButtonBuilder(_imagePaths.icRefresh) ..key(Key('button_reload_thread')) @@ -135,7 +127,7 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi ..padding(EdgeInsets.symmetric(horizontal: 8, vertical: 8)) ..onPressActionClick(() => controller.refreshAllEmail())) .build(), - SizedBox(width: 16), + if (!controller.isSearchActive()) SizedBox(width: 16), (ButtonBuilder(_imagePaths.icSelectAll) ..key(Key('button_select_all')) ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorButtonHeaderThread)) @@ -198,7 +190,6 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi Widget _buildListButtonSelectionForDesktop(BuildContext context) { return Row(children: [ - SizedBox(width: 16), buildIconWeb( icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill), tooltip: AppLocalizations.of(context).cancel, @@ -265,7 +256,7 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi color: Colors.white, padding: EdgeInsets.only(left: 16, right: 16, bottom: 10), child: (SearchBarView(_imagePaths) - ..hintTextSearch(AppLocalizations.of(context).hint_search_emails) + ..hintTextSearch(kIsWeb ? AppLocalizations.of(context).search_emails : AppLocalizations.of(context).hint_search_emails) ..addOnOpenSearchViewAction(() => controller.enableSearch(context))) .build()); } else { @@ -277,9 +268,12 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi Widget _buildSearchInputFormForMobile(BuildContext context) { return Obx(() { if (controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) { - return _buildSearchForm(context); + return Column(children: [ + _buildSearchForm(context), + Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2), + ]); } else { - return _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildAppBarNormal(context); + return SizedBox.shrink(); } }); } @@ -342,7 +336,7 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi controller.mailboxDashBoardController.searchInputController, suggestionSearch: controller.mailboxDashBoardController.suggestionSearch,) ..addDecoration(BoxDecoration(color: Colors.white)) - ..setMargin(EdgeInsets.only(right: 10, top: _responsiveUtils.isTabletLarge(context) ? 32 : 0)) + ..setMargin(EdgeInsets.only(right: 10)) ..setHintText(AppLocalizations.of(context).search_mail) ..addOnCancelSearchPressed(() => controller.disableSearch()) ..addOnClearTextSearchAction(() => controller.mailboxDashBoardController.clearSearchText()) @@ -360,8 +354,10 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi controller.listEmailSelected, controller.currentSelectMode.value, controller.filterMessageOption.value) - ..addOpenListMailboxActionClick(() => controller.openMailboxLeftMenu()) + ..addOpenMailboxMenuActionClick(() => controller.openMailboxLeftMenu()) ..addOnEditThreadAction(() => controller.enableSelectionEmail()) + ..addOnEmailSelectionAction((actionType, selectionEmail) => + controller.pressEmailSelectionAction(context, actionType, selectionEmail)) ..addOnFilterEmailAction((filterMessageOption, position) => _responsiveUtils.isMobileDevice(context) ? controller.openFilterMessagesCupertinoActionSheet( @@ -380,7 +376,9 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi return Obx(() { if (!controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) { return Container( - padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 80 : _responsiveUtils.isMobileDevice(context) ? 0 : 16), + padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() && controller.listEmailSelected.isNotEmpty + ? 80 + : _responsiveUtils.isMobileDevice(context) ? 0 : 16), child: Align( alignment: Alignment.bottomRight, child: ScrollingFloatingButtonAnimated( @@ -528,8 +526,8 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi Widget _buildListEmail(BuildContext context) { return Container( margin: _responsiveUtils.isDesktop(context) - ? EdgeInsets.only(top: 16, bottom: 16) - : EdgeInsets.zero, + ? EdgeInsets.symmetric(vertical: controller.isSelectionEnabled() ? 4 : 12, horizontal: 4) + : EdgeInsets.only(top: controller.isSearchActive() ? 8 : 0), alignment: Alignment.center, padding: EdgeInsets.zero, color: Colors.white, @@ -591,6 +589,7 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi physics: AlwaysScrollableScrollPhysics(), key: PageStorageKey('list_presentation_email_in_threads'), itemCount: listPresentationEmail.length, + padding: EdgeInsets.zero, itemBuilder: (context, index) => Obx(() => (EmailTileBuilder( context, listPresentationEmail[index], @@ -646,7 +645,6 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi return controller.emailListSearch.length > 0 ? Container( width: double.infinity, - margin: EdgeInsets.only(bottom: 16), padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24), decoration: BoxDecoration( borderRadius: _responsiveUtils.isDesktop(context) @@ -670,7 +668,9 @@ class ThreadView extends GetWidget with UserSettingPopupMenuMi borderRadius: BorderRadius.all(Radius.circular(14)), border: Border.all(color: AppColor.colorLineLeftEmailView), color: Colors.white), - margin: EdgeInsets.only(left: 16, right: 16, + margin: EdgeInsets.only( + left: _responsiveUtils.isDesktop(context) ? 32 : 16, + right: _responsiveUtils.isDesktop(context) ? 20 : 16, bottom: _responsiveUtils.isDesktop(context) ? 0 : 16, top: _responsiveUtils.isDesktop(context) ? 16 : 0), padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), diff --git a/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart b/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart index 886d6ee14..e51bf09ee 100644 --- a/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart +++ b/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart @@ -1,5 +1,6 @@ import 'package:core/core.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -9,14 +10,16 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; typedef OnFilterEmailAction = void Function(FilterMessageOption, RelativeRect? position); typedef OnEditThreadAction = void Function(); -typedef OnOpenListMailboxActionClick = void Function(); +typedef OnOpenMailboxMenuActionClick = void Function(); typedef OnCancelEditThread = void Function(); +typedef OnEmailSelectionAction = void Function(EmailActionType actionType, List); class AppBarThreadWidgetBuilder { OnFilterEmailAction? _onFilterEmailAction; - OnOpenListMailboxActionClick? _onOpenListMailboxActionClick; + OnOpenMailboxMenuActionClick? _onOpenMailboxMenuActionClick; OnEditThreadAction? _onEditThreadAction; OnCancelEditThread? _onCancelEditThread; + OnEmailSelectionAction? _onEmailSelectionAction; final BuildContext _context; final ImagePaths _imagePaths; @@ -40,8 +43,8 @@ class AppBarThreadWidgetBuilder { _onFilterEmailAction = onFilterEmailAction; } - void addOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) { - _onOpenListMailboxActionClick = onOpenListMailboxActionClick; + void addOpenMailboxMenuActionClick(OnOpenMailboxMenuActionClick actionClick) { + _onOpenMailboxMenuActionClick = actionClick; } void addOnEditThreadAction(OnEditThreadAction onEditThreadAction) { @@ -52,6 +55,10 @@ class AppBarThreadWidgetBuilder { _onCancelEditThread = onCancelEditThread; } + void addOnEmailSelectionAction(OnEmailSelectionAction onEmailSelectionAction) { + _onEmailSelectionAction = onEmailSelectionAction; + } + Widget build() { return Container( key: Key('app_bar_thread_widget'), @@ -61,36 +68,113 @@ class AppBarThreadWidgetBuilder { padding: EdgeInsets.only(left: 8, top: 16, bottom: 8, right: 8), child: MediaQuery( data: MediaQueryData(padding: EdgeInsets.zero), - child: Row(children: [ - Expanded(child: Stack( - alignment: Alignment.center, - children: [ - if (_selectMode != SelectMode.ACTIVE) - Positioned(left: 0,child: _buildEditButton()), - if (_selectMode == SelectMode.ACTIVE) - Positioned(left: 0, child: _buildBackButton()), - if (_selectMode == SelectMode.ACTIVE) - Positioned(left: 40, child: _buildCountItemSelected()), - Positioned(right: 0, child: _buildFilterButton()), - _filterMessageOption.getTitle(_context).isNotEmpty + child: kIsWeb + ? _selectMode == SelectMode.INACTIVE ? _buildBodyAppBarForWeb() : _buildBodyAppBarForWebSelection() + : _selectMode == SelectMode.INACTIVE ? _buildBodyAppBarForMobile() : _buildBodyAppBarForMobileSelection() + ) + ); + } + + Widget _buildBodyAppBarForWeb() { + return Row(children: [ + if (!_responsiveUtils.isTabletLarge(_context)) _buildMenuButton(), + if (_responsiveUtils.isTabletLarge(_context)) SizedBox(width: 16), + Expanded(child: Text( + '${_presentationMailbox?.name?.name.capitalizeFirstEach ?? ''}', + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontSize: 21, color: Colors.black, fontWeight: FontWeight.bold))), + _buildFilterButton(), + ]); + } + + Widget _buildBodyAppBarForWebSelection() { + return Row(children: [ + buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill), + tooltip: AppLocalizations.of(_context).cancel, + onTap: () => _onCancelEditThread?.call()), + Expanded(child: Text( + AppLocalizations.of(_context).count_email_selected(_listSelectionEmail.length), + style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton))), + buildIconWeb( + icon: SvgPicture.asset(_listSelectionEmail.isAllEmailRead ? _imagePaths.icUnread : _imagePaths.icRead, fit: BoxFit.fill), + tooltip: _listSelectionEmail.isAllEmailRead ? AppLocalizations.of(_context).unread : AppLocalizations.of(_context).read, + onTap: () => _onEmailSelectionAction?.call( + _listSelectionEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead, + _listSelectionEmail)), + buildIconWeb( + icon: SvgPicture.asset(_listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar, fit: BoxFit.fill), + tooltip: _listSelectionEmail.isAllEmailStarred ? AppLocalizations.of(_context).not_starred : AppLocalizations.of(_context).starred, + onTap: () => _onEmailSelectionAction?.call( + _listSelectionEmail.isAllEmailStarred ? EmailActionType.markAsUnStar : EmailActionType.markAsStar, + _listSelectionEmail)), + buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icMove, fit: BoxFit.fill), + tooltip: AppLocalizations.of(_context).move, + onTap: () => _onEmailSelectionAction?.call(EmailActionType.move, _listSelectionEmail)), + buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icDelete, fit: BoxFit.fill), + tooltip: _presentationMailbox?.role != PresentationMailbox.roleTrash + ? AppLocalizations.of(_context).move_to_trash + : AppLocalizations.of(_context).delete_permanently, + onTap: () => _presentationMailbox?.role != PresentationMailbox.roleTrash + ? _onEmailSelectionAction?.call(EmailActionType.moveToTrash, _listSelectionEmail) + : _onEmailSelectionAction?.call(EmailActionType.deletePermanently, _listSelectionEmail)), + ]); + } + + Widget _buildBodyAppBarForMobile() { + return Row(children: [ + Expanded(child: Stack( + alignment: Alignment.center, + children: [ + Positioned(left: 0,child: _buildEditButton()), + Positioned(right: 0, child: _buildFilterButton()), + _filterMessageOption.getTitle(_context).isNotEmpty ? Column(mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( - padding: EdgeInsets.only(left: 40, right: 40), - child: _buildContentCenterAppBar()), + padding: EdgeInsets.only(left: 40, right: 40), + child: _buildContentCenterAppBar()), Transform( - transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0), - child: Text( - _filterMessageOption.getTitle(_context), - style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail))) + transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0), + child: Text( + _filterMessageOption.getTitle(_context), + style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail))) ]) : Padding( padding: EdgeInsets.only(left: 60, right: 40), child: _buildContentCenterAppBar()), - ] - )) - ]) - ) - ); + ] + )) + ]); + } + + Widget _buildBodyAppBarForMobileSelection() { + return Row(children: [ + Expanded(child: Stack( + alignment: Alignment.center, + children: [ + Positioned(left: 0, child: _buildBackButton()), + Positioned(left: 40, child: _buildCountItemSelected()), + Positioned(right: 0, child: _buildFilterButton()), + _filterMessageOption.getTitle(_context).isNotEmpty + ? Column(mainAxisAlignment: MainAxisAlignment.center, children: [ + Padding( + padding: EdgeInsets.only(left: 40, right: 40), + child: _buildContentCenterAppBar()), + Transform( + transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0), + child: Text( + _filterMessageOption.getTitle(_context), + style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail))) + ]) + : Padding( + padding: EdgeInsets.only(left: 60, right: 40), + child: _buildContentCenterAppBar()), + ] + )) + ]); } Widget _buildEditButton() { @@ -145,21 +229,16 @@ class AppBarThreadWidgetBuilder { ); } + Widget _buildMenuButton() { + return buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icMenuDrawer, fit: BoxFit.fill), + onTap:() => _onOpenMailboxMenuActionClick?.call()); + } + Widget _buildBackButton() { - return Material( - borderRadius: BorderRadius.circular(12), - color: Colors.transparent, - child: IconButton( - color: AppColor.baseTextColor, - icon: SvgPicture.asset( - _imagePaths.icBack, - width: 20, - height: 20, - color: AppColor.colorTextButton, - fit: BoxFit.fill), - onPressed: () => _onCancelEditThread?.call() - ) - ); + return buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill), + onTap:() => _onCancelEditThread?.call()); } Widget _buildCountItemSelected() { @@ -177,8 +256,8 @@ class AppBarThreadWidgetBuilder { mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ - GestureDetector( - onTap: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenListMailboxActionClick?.call() : null, + InkWell( + onTap: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenMailboxMenuActionClick?.call() : null, child: Padding( padding: !_responsiveUtils.isTabletLarge(_context) ? EdgeInsets.zero : EdgeInsets.only(bottom: 8, top: 8), child: Container( @@ -198,7 +277,7 @@ class AppBarThreadWidgetBuilder { padding: EdgeInsets.zero, color: AppColor.baseTextColor, icon: SvgPicture.asset(_imagePaths.icChevronDown, width: 20, height: 16, fit: BoxFit.fill), - onPressed: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenListMailboxActionClick?.call() : null)) + onPressed: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenMailboxMenuActionClick?.call() : null)) ] ); } diff --git a/lib/features/thread/presentation/widgets/email_tile_builder.dart b/lib/features/thread/presentation/widgets/email_tile_builder.dart index 9bb4cb623..e2a0089b5 100644 --- a/lib/features/thread/presentation/widgets/email_tile_builder.dart +++ b/lib/features/thread/presentation/widgets/email_tile_builder.dart @@ -59,7 +59,7 @@ class EmailTileBuilder { mobile: _buildListTile(), desktop: Container( margin: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.only(top: 3, left: 8, right: 8) : EdgeInsets.zero, - padding: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.symmetric(vertical: 10) : EdgeInsets.zero, + padding: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.symmetric(vertical: 8) : EdgeInsets.zero, decoration: _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE ? BoxDecoration( borderRadius: BorderRadius.circular(14), @@ -73,8 +73,15 @@ class EmailTileBuilder { Widget _buildListTile() { return Container( - color: Colors.white, - padding: EdgeInsets.only(bottom: 10, left: 20, right: 6), + margin: kIsWeb && _selectModeAll == SelectMode.ACTIVE + ? EdgeInsets.only(top: 3, left: 16, right: 16) + : EdgeInsets.zero, + padding: kIsWeb && _selectModeAll == SelectMode.ACTIVE + ? EdgeInsets.only(top: 8, bottom: 16, right: 8) + : EdgeInsets.only(bottom: 10, left: 16, right: 16), + decoration: kIsWeb && _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE + ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: AppColor.colorItemEmailSelectedDesktop) + : BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.white), alignment: Alignment.center, child: Column(children: [ ListTile( @@ -194,14 +201,19 @@ class EmailTileBuilder { overflow:TextOverflow.ellipsis, style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail)) ), - ])) + ])), + if (kIsWeb && _selectModeAll == SelectMode.INACTIVE) + Padding( + padding: EdgeInsets.only(top: 12), + child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)), ], ) ), ), - Padding( - padding: EdgeInsets.only(top: 12, right: 12), - child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)), + if (!kIsWeb) + Padding( + padding: EdgeInsets.only(top: 12, right: 12), + child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)), ]), ); } diff --git a/lib/features/thread/presentation/widgets/search_app_bar_widget.dart b/lib/features/thread/presentation/widgets/search_app_bar_widget.dart index 6b8c781de..9604bd25e 100644 --- a/lib/features/thread/presentation/widgets/search_app_bar_widget.dart +++ b/lib/features/thread/presentation/widgets/search_app_bar_widget.dart @@ -112,26 +112,19 @@ class SearchAppBarWidget { } Widget _buildBackButton() { - return Material( - shape: CircleBorder(), - color: Colors.transparent, - child: Padding( - padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(_context) ? 0 : 8), - child: IconButton( - splashRadius: 20, - icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill), - onPressed: () { - _searchInputController?.clear(); - if (_onCancelSearchPressed != null) { - _onCancelSearchPressed!(); - } + return buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill), + onTap: () { + _searchInputController?.clear(); + if (_onCancelSearchPressed != null) { + _onCancelSearchPressed!(); } - ))); + }); } Widget _buildClearTextSearchButton() { return buildIconWeb( - icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 12, height: 12, fit: BoxFit.fill), + icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 18, height: 18, fit: BoxFit.fill), onTap: () { _searchInputController?.clear(); _onClearTextSearchAction?.call();