From 3c0eac12ac309d14731275f289f38d08cd140fe0 Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 15 Sep 2022 18:18:27 +0700 Subject: [PATCH] TF-933 Update new position all button action of AppBar on Web Desktop --- .../extensions/color_extension.dart | 2 + .../presentation/utils/responsive_utils.dart | 3 + .../mailbox_dashboard_view_web.dart | 70 ++--- .../thread/presentation/thread_view.dart | 282 +++++++++--------- 4 files changed, 171 insertions(+), 186 deletions(-) diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 7849d82d4..1f0ab44ae 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -143,6 +143,8 @@ extension AppColor on Color { static const colorVacationSettingExplanation = Color(0xFF686E76); static const colorBackgroundVacationSettingField = Color(0xFFF2F3F5); static const colorBackgroundNotificationVacationSetting= Color(0xFFFFF5C2); + static const colorDivider = Color(0xFFE7E8EC); + static const colorDividerVertical = Color(0xFF99A2AD); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index 6c26c7580..bac4f483d 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -95,6 +95,9 @@ class ResponsiveUtils { bool isWebDesktop(BuildContext context) => BuildUtils.isWeb && isDesktop(context); + bool isWebNotDesktop(BuildContext context) => + BuildUtils.isWeb && !isDesktop(context); + bool mailboxDashboardHasMailboxAndEmailView(BuildContext context) { if (BuildUtils.isWeb) { return isDesktop(context) || 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 4694e724c..adb21f88c 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -110,7 +110,30 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { Expanded(child: Obx(() { switch(controller.routePath.value) { case AppRoutes.THREAD: - return ThreadView(); + return Container( + margin: const EdgeInsets.only(right: 16, top: 16, bottom: 16), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + border: Border.all(color: AppColor.colorBorderBodyThread, width: 1), + color: Colors.white), + child: ClipRRect( + borderRadius: BorderRadius.circular(20), + child: Column(children: [ + if (controller.isSelectionEnabled()) + Padding( + padding: const EdgeInsets.all(12.0), + child: _buildListButtonTopBarSelection(context), + ) + else + Padding( + padding: const EdgeInsets.all(16.0), + child: _buildListButtonTopBar(context), + ), + const Divider(color: AppColor.colorDivider, height: 1), + Expanded(child: ThreadView()) + ]), + ), + ); case AppRoutes.EMAIL: return EmailView(); default: @@ -162,19 +185,6 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { Widget _buildRightHeader(BuildContext context) { return Row(children: [ - Obx(() { - if (controller.routePath.value != AppRoutes.THREAD) { - return const SizedBox.shrink(); - } - if (controller.isSelectionEnabled()) { - return _buildListButtonTopBarSelection(context); - } else { - return searchController.isSearchActive() - ? _buildListButtonTopBarSearchActive(context) - : _buildListButtonTopBar(context); - } - }), - const SizedBox(width: 16), Obx(() => !searchController.isSearchActive() ? const Spacer() : const SizedBox.shrink()), Obx(() { if (searchController.isSearchActive()) { @@ -308,38 +318,6 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { ]); } - Widget _buildListButtonTopBarSearchActive(BuildContext context) { - return Row(children: [ - (ButtonBuilder(imagePaths.icSelectAll) - ..key(const Key('button_select_all')) - ..decoration(BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: AppColor.colorButtonHeaderThread)) - ..paddingIcon(const EdgeInsets.only(right: 8)) - ..size(16) - ..radiusSplash(10) - ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8)) - ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread)) - ..onPressActionClick(() => controller.dispatchAction(SelectionAllEmailAction())) - ..text(AppLocalizations.of(context).select_all, isVertical: false)) - .build(), - const SizedBox(width: 16), - (ButtonBuilder(imagePaths.icMarkAllAsRead) - ..key(const Key('button_mark_all_as_read')) - ..decoration(BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: AppColor.colorButtonHeaderThread)) - ..paddingIcon(const EdgeInsets.only(right: 8)) - ..size(16) - ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8)) - ..radiusSplash(10) - ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread)) - ..onPressActionClick(() => controller.markAsReadMailboxAction()) - ..text(AppLocalizations.of(context).mark_all_as_read, isVertical: false)) - .build(), - ]); - } - Widget _buildListButtonTopBarSelection(BuildContext context) { return Row(children: [ buildIconWeb( diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index db3bd2f4b..e78dfd716 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -45,108 +45,33 @@ class ThreadView extends GetWidget with AppLoaderMixin, onTap: () => FocusManager.instance.primaryFocus?.unfocus(), child: Scaffold( resizeToAvoidBottomInset: false, - backgroundColor: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) - ? AppColor.colorBgDesktop - : Colors.white, + backgroundColor: Colors.white, body: Portal( child: Row(children: [ - if ((!BuildUtils.isWeb && _responsiveUtils.isDesktop(context) && _responsiveUtils.isTabletLarge(context)) - || (BuildUtils.isWeb && _responsiveUtils.isTabletLarge(context))) - const VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2), + if (supportVerticalDivider(context)) + const VerticalDivider( + color: AppColor.colorDividerVertical, + width: 1, + thickness: 0.2), Expanded(child: SafeArea( right: _responsiveUtils.isLandscapeMobile(context), left: _responsiveUtils.isLandscapeMobile(context), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - if ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb) + if (!_responsiveUtils.isWebDesktop(context)) ... [ _buildAppBarNormal(context), - Obx(() { - return Stack(children: [ - if (!controller.isSearchActive()) - Container( - color: Colors.white, - padding: EdgeInsets.symmetric( - horizontal: 16, - vertical: BuildUtils.isWeb && !_responsiveUtils.isDesktop(context) ? 8 : 0), - margin: const EdgeInsets.only( - bottom: !BuildUtils.isWeb ? 16 : 0), - child: _buildSearchFormInActive(context)) - else - Container( - color: Colors.white, - padding: EdgeInsets.symmetric( - horizontal: 8, - vertical: BuildUtils.isWeb && !_responsiveUtils.isDesktop(context) ? 8 : 0), - margin: const EdgeInsets.only( - bottom: !BuildUtils.isWeb ? 16 : 0), - child: _buildSearchFormActive(context)) - ]); - }), - Obx(() { - if (controller.mailboxDashBoardController.vacationResponse.value?.vacationResponderIsValid == true) { - return Padding( - padding: const EdgeInsets.only(bottom: 8, top: 4), - child: VacationNotificationMessageWidget( - vacationResponse: controller.mailboxDashBoardController.vacationResponse.value!, - actionGotoVacationSetting: () => controller.mailboxDashBoardController.goToVacationSetting(), - actionEndNow: () => controller.mailboxDashBoardController.disableVacationResponder()), - ); - } else { - return const SizedBox.shrink(); - } - }), - ] - else - const SizedBox.shrink(), - Obx(() { - if (controller.isMailboxTrash - && controller.emailList.isNotEmpty - && !controller.isSearchActive()) { - return _buildEmptyTrashButton(context); - } else { - return const SizedBox.shrink(); - } - }), - Obx(() { - if (controller.isSearchActive() - && controller.searchIsActive.isTrue - && _responsiveUtils.isDesktop(context) - && BuildUtils.isWeb) { - return _buildListButtonQuickSearchFilter(context); - } else { - return const SizedBox.shrink(); - } - }), + _buildSearchBarView(context), + _buildVacationNotificationMessage(context), + ], + _buildEmptyTrashButton(context), + _buildListButtonQuickSearchFilter(context), if (!_responsiveUtils.isDesktop(context)) _buildMarkAsMailboxReadLoading(context), - Expanded(child: Container( - alignment: Alignment.center, - margin: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) - ? const EdgeInsets.only(right: 16, top: 16, bottom: 16) - : EdgeInsets.zero, - decoration: BoxDecoration( - borderRadius: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) - ? BorderRadius.circular(20) - : null, - border: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) - ? Border.all(color: AppColor.colorBorderBodyThread, width: 1) - : null, - color: Colors.white), - child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular( - BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 20 : 0)), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - _buildLoadingView(), - Expanded(child: _buildListEmail(context)), - _buildLoadingViewLoadMore(), - ] - ), - ) - )), + _buildLoadingView(), + Expanded(child: _buildListEmail(context)), + _buildLoadingViewLoadMore(), _buildListButtonSelectionForMobile(context), ] ) @@ -158,6 +83,55 @@ class ThreadView extends GetWidget with AppLoaderMixin, ); } + bool supportVerticalDivider(BuildContext context) { + if (BuildUtils.isWeb) { + return _responsiveUtils.isTabletLarge(context); + } else { + return _responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context); + } + } + + Widget _buildSearchBarView(BuildContext context) { + return Obx(() { + if (!controller.isSearchActive()) { + return Container( + color: Colors.white, + padding: EdgeInsets.symmetric( + horizontal: 16, + vertical: _responsiveUtils.isWebNotDesktop(context) ? 8 : 0), + margin: const EdgeInsets.only( + bottom: !BuildUtils.isWeb ? 16 : 0), + child: _buildSearchFormInActive(context)); + } else { + return Container( + color: Colors.white, + padding: EdgeInsets.symmetric( + horizontal: 8, + vertical: _responsiveUtils.isWebNotDesktop(context) ? 8 : 0), + margin: const EdgeInsets.only( + bottom: !BuildUtils.isWeb ? 16 : 0), + child: _buildSearchFormActive(context)); + } + }); + } + + Widget _buildVacationNotificationMessage(BuildContext context) { + return Obx(() { + final vacation = controller.mailboxDashBoardController.vacationResponse.value; + if (vacation?.vacationResponderIsValid == true) { + return Padding( + padding: const EdgeInsets.only(bottom: 8, top: 4), + child: VacationNotificationMessageWidget( + vacationResponse: vacation!, + actionGotoVacationSetting: () => controller.mailboxDashBoardController.goToVacationSetting(), + actionEndNow: () => controller.mailboxDashBoardController.disableVacationResponder()), + ); + } else { + return const SizedBox.shrink(); + } + }); + } + Widget _buildListButtonSelectionForMobile(BuildContext context) { return Obx(() { if ((!BuildUtils.isWeb || (BuildUtils.isWeb && controller.isSelectionEnabled() @@ -631,43 +605,64 @@ class ThreadView extends GetWidget with AppLoaderMixin, ); } + bool supportEmptyTrash(BuildContext context) { + return controller.isMailboxTrash + && controller.emailList.isNotEmpty + && !controller.isSearchActive(); + } + Widget _buildEmptyTrashButton(BuildContext context) { - return Container( - decoration: BoxDecoration( - borderRadius: const BorderRadius.all(Radius.circular(14)), - border: Border.all(color: AppColor.colorLineLeftEmailView), - color: Colors.white), - margin: EdgeInsets.only( - left: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16, - right: 16, - bottom: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16, - top: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 16 : 0), - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - child: Row(children: [ - Padding( - padding: const EdgeInsets.only(right: 16), - child: SvgPicture.asset(_imagePaths.icDeleteTrash, fit: BoxFit.fill)), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Padding( - padding: const EdgeInsets.only(left: 8), - child: Text( - AppLocalizations.of(context).message_delete_all_email_in_trash_button, - style: const TextStyle(color: AppColor.colorContentEmail, fontSize: 13, fontWeight: FontWeight.w500))), - TextButton( - onPressed: () => controller.deleteSelectionEmailsPermanently(context, DeleteActionType.all), - child: Text( - AppLocalizations.of(context).empty_trash_now, - style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton) + return Obx(() { + if (supportEmptyTrash(context)) { + return Container( + decoration: BoxDecoration( + borderRadius: const BorderRadius.all(Radius.circular(14)), + border: Border.all(color: AppColor.colorLineLeftEmailView), + color: Colors.white), + margin: EdgeInsets.only( + left: _responsiveUtils.isWebDesktop(context) ? 0 : 16, + right: 16, + bottom: _responsiveUtils.isWebDesktop(context) ? 0 : 16, + top: _responsiveUtils.isWebDesktop(context) ? 16 : 0), + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), + child: Row(children: [ + Padding( + padding: const EdgeInsets.only(right: 16), + child: SvgPicture.asset( + _imagePaths.icDeleteTrash, + fit: BoxFit.fill)), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.only(left: 8), + child: Text( + AppLocalizations.of(context).message_delete_all_email_in_trash_button, + style: const TextStyle( + color: AppColor.colorContentEmail, + fontSize: 13, + fontWeight: FontWeight.w500))), + TextButton( + onPressed: () => + controller.deleteSelectionEmailsPermanently(context, DeleteActionType.all), + child: Text( + AppLocalizations.of(context).empty_trash_now, + style: const TextStyle( + fontSize: 17, + fontWeight: FontWeight.w500, + color: AppColor.colorTextButton) + ) ) - ) - ] + ] + ) ) - ) - ]), - ); + ]), + ); + } else { + return const SizedBox.shrink(); + } + }); } List _contextMenuActionTile(BuildContext context, PresentationEmail email) { @@ -706,23 +701,30 @@ class ThreadView extends GetWidget with AppLoaderMixin, ]; } + bool supportListButtonQuickSearchFilter(BuildContext context) { + return controller.isSearchActive() + && controller.searchIsActive.isTrue + && _responsiveUtils.isWebDesktop(context); + } + Widget _buildListButtonQuickSearchFilter(BuildContext context) { - final listQuickSearchFilter = [ - QuickSearchFilter.hasAttachment, - QuickSearchFilter.last7Days, - QuickSearchFilter.fromMe, - ]; - return Padding( - padding: EdgeInsets.only( - left: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 32 : 16, - right: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 20 : 16, - bottom: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16, - top: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 16 : 0), - child: Row( - children: listQuickSearchFilter - .map((filter) => _buildQuickSearchFilterButton(context, filter)) - .toList()), - ); + return Obx(() { + if (supportListButtonQuickSearchFilter(context)) { + return Padding( + padding: EdgeInsets.only( + left: _responsiveUtils.isWebDesktop(context) ? 32 : 16, + right: _responsiveUtils.isWebDesktop(context) ? 20 : 16, + bottom: _responsiveUtils.isWebDesktop(context) ? 0 : 16, + top: _responsiveUtils.isWebDesktop(context) ? 16 : 0), + child: Row( + children: QuickSearchFilter.values + .map((filter) => _buildQuickSearchFilterButton(context, filter)) + .toList()), + ); + } else { + return const SizedBox.shrink(); + } + }); } Widget _buildQuickSearchFilterButton(