From dbbc13eab4c2c72a8415d5fc8565cd29b100aab1 Mon Sep 17 00:00:00 2001 From: dab246 Date: Wed, 4 May 2022 10:52:57 +0700 Subject: [PATCH] TF-528 Update size for responsive on tablet and landscape mobile --- .../presentation/utils/responsive_utils.dart | 26 +- .../presentation/views/list/tree_view.dart | 1 + .../views/responsive/responsive_widget.dart | 3 + .../composer/presentation/composer_view.dart | 9 +- .../presentation/destination_picker_view.dart | 95 ++--- .../email/presentation/email_controller.dart | 2 +- .../email/presentation/email_view.dart | 2 +- ...tachments_place_holder_loading_widget.dart | 2 +- .../presentation/mailbox_controller.dart | 17 +- .../mailbox/presentation/mailbox_view.dart | 68 ++-- .../presentation/mailbox_view_web.dart | 5 +- .../widgets/mailbox_folder_tile_builder.dart | 21 +- .../widgets/mailbox_search_tile_builder.dart | 21 +- .../presentation/mailbox_creator_view.dart | 7 +- .../presentation/mailbox_dashboard_view.dart | 14 +- .../mailbox_dashboard_view_web.dart | 8 +- .../manage_account_dashboard_view.dart | 4 +- .../thread/presentation/thread_view.dart | 58 +-- .../app_bar_thread_widget_builder.dart | 14 +- .../widgets/email_tile_builder.dart | 357 ++++++------------ 20 files changed, 316 insertions(+), 418 deletions(-) diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index 07b8412fb..ce7c9fef2 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -1,4 +1,3 @@ -import 'package:flutter/foundation.dart'; import 'package:flutter/widgets.dart'; import 'package:get/get.dart'; @@ -8,9 +7,8 @@ class ResponsiveUtils { final int minTabletWidth = 600; final int minTabletLargeWidth = 900; - final double defaultSizeDrawerWidthMobileTablet = 375; - final double defaultSizeDrawerWidthWeb = 320; - final double defaultSizeMenuWidthWeb = 262; + final double defaultSizeDrawer = 320; + final double defaultSizeMenu = 262; final double _loginTextFieldWidthSmallScreen = 280.0; final double _loginTextFieldWidthLargeScreen = 320.0; @@ -21,7 +19,7 @@ class ResponsiveUtils { final double desktopVerticalMargin = 120.0; final double desktopHorizontalMargin = 200.0; - bool isMobileDevice(BuildContext context) => context.mediaQueryShortestSide < minTabletWidth; + bool isScreenWithShortestSide(BuildContext context) => context.mediaQueryShortestSide < minTabletWidth; double getSizeScreenWidth(BuildContext context) => context.width; @@ -29,28 +27,28 @@ class ResponsiveUtils { double getSizeScreenShortestSide(BuildContext context) => context.mediaQueryShortestSide; - double getDeviceWidth(BuildContext context) { - final widthScreen = kIsWeb ? context.width : context.mediaQueryShortestSide; - return widthScreen; - } + double getDeviceWidth(BuildContext context) => context.width; bool isMobile(BuildContext context) => getDeviceWidth(context) < minTabletWidth; - bool isTablet(BuildContext context) => getDeviceWidth(context) >= minTabletWidth && getDeviceWidth(context) < minTabletLargeWidth; + bool isTablet(BuildContext context) => + getDeviceWidth(context) >= minTabletWidth && getDeviceWidth(context) < minTabletLargeWidth; bool isDesktop(BuildContext context) => getDeviceWidth(context) >= minDesktopWidth; - bool isTabletLarge(BuildContext context) => getDeviceWidth(context) >= minTabletLargeWidth && getDeviceWidth(context) < minDesktopWidth; + bool isTabletLarge(BuildContext context) => + getDeviceWidth(context) >= minTabletLargeWidth && getDeviceWidth(context) < minDesktopWidth; bool isPortrait(BuildContext context) => context.orientation == Orientation.portrait; bool isLandscape(BuildContext context) => context.orientation == Orientation.landscape; - bool isLandscapeMobile(BuildContext context) => isMobile(context) && isLandscape(context); + bool isLandscapeMobile(BuildContext context) => isScreenWithShortestSide(context) && isLandscape(context); - bool isPortraitMobile(BuildContext context) => isMobile(context) && isPortrait(context); + bool isPortraitMobile(BuildContext context) => isScreenWithShortestSide(context) && isPortrait(context); - double getWidthLoginTextField(BuildContext context) => isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen; + double getWidthLoginTextField(BuildContext context) => + isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen; double getWidthLoginButton() => _loginButtonWidth; } \ No newline at end of file diff --git a/core/lib/presentation/views/list/tree_view.dart b/core/lib/presentation/views/list/tree_view.dart index 2b3344043..825ead95c 100644 --- a/core/lib/presentation/views/list/tree_view.dart +++ b/core/lib/presentation/views/list/tree_view.dart @@ -42,6 +42,7 @@ class _TreeViewData extends StatelessWidget { key: PageStorageKey('tree_view'), shrinkWrap: true, primary: false, + padding: EdgeInsets.zero, itemCount: children.length, itemBuilder: (context, index) { return children.elementAt(index); diff --git a/core/lib/presentation/views/responsive/responsive_widget.dart b/core/lib/presentation/views/responsive/responsive_widget.dart index 65b14cd82..a0d286d02 100644 --- a/core/lib/presentation/views/responsive/responsive_widget.dart +++ b/core/lib/presentation/views/responsive/responsive_widget.dart @@ -3,6 +3,7 @@ import 'package:flutter/material.dart'; class ResponsiveWidget extends StatelessWidget { final Widget mobile; + final Widget? landscapeMobile; final Widget? tablet; final Widget? tabletLarge; final Widget? desktop; @@ -13,6 +14,7 @@ class ResponsiveWidget extends StatelessWidget { Key? key, required this.responsiveUtils, required this.mobile, + this.landscapeMobile, this.tablet, this.desktop, this.tabletLarge, @@ -22,6 +24,7 @@ class ResponsiveWidget extends StatelessWidget { Widget build(BuildContext context) { if (desktop != null && responsiveUtils.isDesktop(context)) return desktop!; if (tabletLarge != null && responsiveUtils.isTabletLarge(context)) return tabletLarge!; + if (landscapeMobile != null && responsiveUtils.isLandscapeMobile(context)) return landscapeMobile!; if (tablet != null && responsiveUtils.isTablet(context)) return tablet!; return mobile; } diff --git a/lib/features/composer/presentation/composer_view.dart b/lib/features/composer/presentation/composer_view.dart index 420a88f4c..4639dbe73 100644 --- a/lib/features/composer/presentation/composer_view.dart +++ b/lib/features/composer/presentation/composer_view.dart @@ -29,6 +29,7 @@ class ComposerView extends GetWidget { return ResponsiveWidget( responsiveUtils: responsiveUtils, mobile: _buildComposerViewForMobile(context), + landscapeMobile: _buildComposerViewForMobile(context), tablet: _buildComposerViewForTablet(context), tabletLarge: _buildComposerViewForTablet(context), desktop: _buildComposerViewForTablet(context), @@ -48,8 +49,8 @@ class ComposerView extends GetWidget { child: Scaffold( backgroundColor: Colors.white, body: SafeArea( - right: responsiveUtils.isMobile(context) && responsiveUtils.isLandscape(context), - left: responsiveUtils.isMobile(context) && responsiveUtils.isLandscape(context), + right: responsiveUtils.isLandscapeMobile(context), + left: responsiveUtils.isLandscapeMobile(context), child: Container( color: Colors.white, child: Column(children: [ @@ -108,7 +109,9 @@ class ComposerView extends GetWidget { Widget _buildAppBar(BuildContext context, bool isEnableSendButton) { return Container( - padding: responsiveUtils.isMobile(context) ? const EdgeInsets.all(8) : EdgeInsets.zero, + padding: responsiveUtils.isMobile(context) && responsiveUtils.isLandscapeMobile(context) + ? const EdgeInsets.all(8) + : EdgeInsets.zero, color: Colors.white, child: Row( children: [ diff --git a/lib/features/destination_picker/presentation/destination_picker_view.dart b/lib/features/destination_picker/presentation/destination_picker_view.dart index 2b21ccfcc..08e2178f0 100644 --- a/lib/features/destination_picker/presentation/destination_picker_view.dart +++ b/lib/features/destination_picker/presentation/destination_picker_view.dart @@ -39,29 +39,28 @@ class DestinationPickerView extends GetWidget { onTap: () => controller.closeDestinationPicker(), child: ResponsiveWidget( responsiveUtils: _responsiveUtils, - mobile: _responsiveUtils.isLandscapeMobile(context) - ? Row(children: [ - SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), - Expanded(child: Container(color: Colors.transparent)), - ]) - : SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity), + mobile: SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity), + landscapeMobile: Row(children: [ + SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer), + Expanded(child: Container(color: Colors.transparent)), + ]), tablet: Row(children: [ Expanded(child: Container(color: Colors.transparent)), SizedBox( child: _buildBodyMailboxLocation(context, actions), - width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer), ]), tabletLarge: Row(children: [ Expanded(child: Container(color: Colors.transparent)), SizedBox( child: _buildBodyMailboxLocation(context, actions), - width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer), ]), desktop: Row(children: [ Expanded(child: Container(color: Colors.transparent)), SizedBox( child: _buildBodyMailboxLocation(context, actions), - width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer), ]), ), ) @@ -75,22 +74,21 @@ class DestinationPickerView extends GetWidget { onTap: () => controller.closeDestinationPicker(), child: ResponsiveWidget( responsiveUtils: _responsiveUtils, - mobile: _responsiveUtils.isLandscapeMobile(context) - ? Row(children: [ - SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), - Expanded(child: Container(color: Colors.transparent)), - ]) - : SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity), + mobile: SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity), + landscapeMobile: Row(children: [ + SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer), + Expanded(child: Container(color: Colors.transparent)), + ]), tablet: Row(children: [ - SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer), Expanded(child: Container(color: Colors.transparent)), ]), tabletLarge: Row(children: [ - SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer), Expanded(child: Container(color: Colors.transparent)), ]), desktop: Row(children: [ - SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer), Expanded(child: Container(color: Colors.transparent)), ]), ), @@ -101,28 +99,31 @@ class DestinationPickerView extends GetWidget { Widget _buildBodyMailboxLocation(BuildContext context, MailboxActions? actions) { return SafeArea(top: _responsiveUtils.isPortraitMobile(context), bottom: false, left: false, right: false, - child: ClipRRect( - borderRadius: BorderRadius.only( - topRight: Radius.circular(_responsiveUtils.isPortraitMobile(context) ? 14 : 0), - topLeft: Radius.circular(_responsiveUtils.isPortraitMobile(context) ? 14 : 0)), - child: Container( - color: Colors.white, - child: Column(children: [ - SafeArea(left: false, right: false, bottom: false, child: _buildAppBar(context)), - Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), - Obx(() => controller.isSearchActive() - ? SafeArea(bottom: false, top: false, right: false, child: _buildInputSearchFormWidget(context)) - : SizedBox.shrink()), - Expanded(child: Container( - color: actions == MailboxActions.create ? AppColor.colorBgMailbox : Colors.white, - child: SafeArea( - top: false, - bottom: false, - left: _responsiveUtils.isLandscapeMobile(context) ? true : false, - right: false, - child: _buildBodyDestinationPicker(context, actions)))) - ]) - ) + child: GestureDetector( + onTap: () => {}, + child: ClipRRect( + borderRadius: BorderRadius.only( + topRight: Radius.circular(_responsiveUtils.isPortraitMobile(context) ? 14 : 0), + topLeft: Radius.circular(_responsiveUtils.isPortraitMobile(context) ? 14 : 0)), + child: Container( + color: Colors.white, + child: Column(children: [ + SafeArea(left: false, right: false, bottom: false, child: _buildAppBar(context)), + const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), + Obx(() => controller.isSearchActive() + ? SafeArea(bottom: false, top: false, right: false, child: _buildInputSearchFormWidget(context)) + : const SizedBox.shrink()), + Expanded(child: Container( + color: actions == MailboxActions.create ? AppColor.colorBgMailbox : Colors.white, + child: SafeArea( + top: false, + bottom: false, + left: _responsiveUtils.isLandscapeMobile(context) ? true : false, + right: false, + child: _buildBodyDestinationPicker(context, actions)))) + ]) + ) + ), ) ); } @@ -136,8 +137,8 @@ class DestinationPickerView extends GetWidget { Widget _buildSearchBarWidget(BuildContext context) { return Padding( padding: EdgeInsets.only( - top: _responsiveUtils.isMobile(context) || kIsWeb ? 12 : 0, - left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16, + top: _responsiveUtils.isScreenWithShortestSide(context) || kIsWeb ? 12 : 0, + left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 16), child: (SearchBarView(_imagePaths) ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes) @@ -174,6 +175,8 @@ class DestinationPickerView extends GetWidget { children: [ if (actions == MailboxActions.moveEmail) _buildSearchBarWidget(context), _buildLoadingView(), + if (actions == MailboxActions.create && !BuildUtils.isWeb && _responsiveUtils.isScreenWithShortestSide(context)) + const SizedBox(height: 12), if (actions == MailboxActions.create) _buildUnifiedMailbox(context), SizedBox(height: 12), Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false @@ -208,7 +211,7 @@ class DestinationPickerView extends GetWidget { Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) { return Padding( padding: EdgeInsets.only( - left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 8 : 28, + left: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28, right: 16), child: Row(children: [ Expanded(child: Text(categories.getTitle(context), @@ -231,8 +234,10 @@ class DestinationPickerView extends GetWidget { return Container( decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white), - margin: EdgeInsets.only(left: actions == MailboxActions.moveEmail ? 8 : 16, right: actions == MailboxActions.moveEmail ? 0 : 16), - padding: EdgeInsets.only(left: 12, right: 8), + margin: EdgeInsets.only( + left: actions == MailboxActions.moveEmail ? 8 : _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, + right: actions == MailboxActions.moveEmail ? 0 : 16), + padding: const EdgeInsets.only(left: 12, right: 8), child: TreeView( key: Key('${categories.keyValue}_mailbox_list'), children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode))); diff --git a/lib/features/email/presentation/email_controller.dart b/lib/features/email/presentation/email_controller.dart index a08edb3ca..8dda33df4 100644 --- a/lib/features/email/presentation/email_controller.dart +++ b/lib/features/email/presentation/email_controller.dart @@ -510,7 +510,7 @@ class EmailController extends BaseController { } void openEmailAddressDialog(BuildContext context, EmailAddress emailAddress) { - if (responsiveUtils.isMobile(context) || responsiveUtils.isMobileDevice(context)) { + if (responsiveUtils.isScreenWithShortestSide(context)) { (EmailAddressBottomSheetBuilder(context, imagePaths, emailAddress) ..addOnCloseContextMenuAction(() => popBack()) ..addOnCopyEmailAddressAction((emailAddress) => copyEmailAddress(context, emailAddress)) diff --git a/lib/features/email/presentation/email_view.dart b/lib/features/email/presentation/email_view.dart index 76b23b36e..c14cf5dd2 100644 --- a/lib/features/email/presentation/email_view.dart +++ b/lib/features/email/presentation/email_view.dart @@ -362,7 +362,7 @@ class EmailView extends GetView with NetworkConnectionMixin { } int _getAttachmentLimitDisplayed(BuildContext context) { - if (responsiveUtils.isMobileDevice(context)) { + if (responsiveUtils.isScreenWithShortestSide(context)) { return 2; } else if (responsiveUtils.isTablet(context)) { return 3; diff --git a/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart b/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart index bb06be50c..8ef6165cd 100644 --- a/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart +++ b/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart @@ -84,7 +84,7 @@ class _AttachmentsPlaceHolderLoadingState extends State { @override Widget build(BuildContext context) { - return _buildBodyMailbox(context); - } - - Widget _buildBodyMailbox(BuildContext context) { return SafeArea(bottom: false, left: false, right: false, top: _responsiveUtils.isMobile(context), child: ClipRRect( - borderRadius: _responsiveUtils.isMobile(context) && _responsiveUtils.isPortrait(context) - ? const BorderRadius.only(topRight: Radius.circular(14), topLeft: Radius.circular(14)) - : const BorderRadius.all(Radius.zero), + borderRadius: _responsiveUtils.isPortraitMobile(context) + ? const BorderRadius.only(topRight: Radius.circular(14), topLeft: Radius.circular(14)) + : const BorderRadius.all(Radius.zero), child: Drawer( child: Scaffold( - backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, + backgroundColor: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) + ? AppColor.colorBgDesktop + : Colors.white, body: Stack(children: [ Column(children: [ - if (_responsiveUtils.isDesktop(context)) _buildLogoApp(context), - if (!_responsiveUtils.isDesktop(context)) _buildHeaderMailbox(context), - if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context), - Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context) + if (BuildUtils.isWeb && _responsiveUtils.isDesktop(context)) + _buildLogoApp(context), + if ((BuildUtils.isWeb && !_responsiveUtils.isDesktop(context)) + || !BuildUtils.isWeb) + _buildHeaderMailbox(context), + if (BuildUtils.isWeb && _responsiveUtils.isDesktop(context)) + _buildComposerButton(context), + Obx(() => !controller.isSearchActive() && BuildUtils.isWeb + && _responsiveUtils.isDesktop(context) ? Row(children: [ Expanded(child: _buildSearchBarWidget(context)), _buildAddNewFolderButton(context), @@ -51,7 +54,7 @@ class MailboxView extends GetWidget { ? SafeArea(bottom: false, top: false, right: false, child: _buildInputSearchFormWidget(context)) : const SizedBox.shrink()), Expanded(child: Obx(() => Container( - color: _responsiveUtils.isDesktop(context) + color: _responsiveUtils.isDesktop(context) && BuildUtils.isWeb ? Colors.transparent : controller.isSearchActive() ? Colors.white : AppColor.colorBgMailbox, child: RefreshIndicator( @@ -66,8 +69,10 @@ class MailboxView extends GetWidget { : SafeArea( bottom: !controller.isSelectionEnabled(), right: false, + top: false, child: Padding( - padding: EdgeInsets.only(bottom: (_responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context)) || controller.isSelectionEnabled() ? 0 : 55), + padding: EdgeInsets.only(bottom: _responsiveUtils.isLandscapeMobile(context) + || controller.isSelectionEnabled() ? 0 : 55), child: _buildListMailbox(context))) ), ))), @@ -76,7 +81,7 @@ class MailboxView extends GetWidget { Obx(() { if (controller.mailboxDashBoardController.appInformation.value != null && !controller.isSearchActive() && !controller.isSelectionEnabled()) { - if (_responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context)) { + if (_responsiveUtils.isLandscapeMobile(context)) { return const SizedBox.shrink(); } return Align( @@ -219,7 +224,7 @@ class MailboxView extends GetWidget { return Column(children: [ Padding( padding: EdgeInsets.only( - left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16, + left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 16), child: (UserInformationWidgetBuilder(_imagePaths, context, controller.mailboxDashBoardController.userProfile.value) ..addOnLogoutAction(() => controller.mailboxDashBoardController.goToSettings())) @@ -233,7 +238,7 @@ class MailboxView extends GetWidget { padding: EdgeInsets.only( top: _responsiveUtils.isDesktop(context) ? 16 : 12, bottom: 16, - left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16, + left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 16), child: (SearchBarView(_imagePaths) ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes) @@ -263,15 +268,14 @@ class MailboxView extends GetWidget { padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 16 : 0), children: [ Obx(() { - if ((controller.isSelectionEnabled() - && _responsiveUtils.isMobile(context) - && _responsiveUtils.isLandscape(context)) - || _responsiveUtils.isDesktop(context)) { + if ((controller.isSelectionEnabled() && _responsiveUtils.isLandscapeMobile(context)) + || (BuildUtils.isWeb && _responsiveUtils.isDesktop(context))) { return const SizedBox.shrink(); } return _buildUserInformation(context); }), - if (!_responsiveUtils.isDesktop(context)) _buildSearchBarWidget(context), + if ((BuildUtils.isWeb && !_responsiveUtils.isDesktop(context)) + || !BuildUtils.isWeb) _buildSearchBarWidget(context), _buildLoadingView(), Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root) @@ -287,7 +291,7 @@ class MailboxView extends GetWidget { Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) { return Padding( padding: EdgeInsets.only( - left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 8 : 28, + left: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28, right: 16), child: Row(children: [ Expanded(child: Text(categories.getTitle(context), @@ -311,7 +315,7 @@ class MailboxView extends GetWidget { return Container( decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white), margin: EdgeInsets.only( - left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16, + left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 16), padding: const EdgeInsets.only(left: 12, right: 8), child: TreeView( @@ -384,16 +388,10 @@ class MailboxView extends GetWidget { Widget _buildBackSearchButton(BuildContext context) { return Padding( - padding: const EdgeInsets.only(left: 5), - child: Material( - shape: const CircleBorder(), - color: Colors.transparent, - child: IconButton( - splashRadius: 20, - color: AppColor.colorTextButton, - icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill), - onPressed: () => controller.disableSearch(context) - ) + padding: EdgeInsets.only(left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 5), + child: buildIconWeb( + onTap: () => controller.disableSearch(context), + icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton), )); } @@ -406,7 +404,7 @@ class MailboxView extends GetWidget { ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white) : null, child: ListView.builder( - padding: const EdgeInsets.only(left: 16, right: 8), + padding: EdgeInsets.only(left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 8), key: const Key('list_mailbox_searched'), itemCount: controller.listMailboxSearched.length, shrinkWrap: true, diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index f64676851..c104a7568 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -147,10 +147,7 @@ class MailboxView extends GetWidget { left: _responsiveUtils.isDesktop(context) ? 20 : 0), children: [ Obx(() { - if ((controller.isSelectionEnabled() - && _responsiveUtils.isMobile(context) - && _responsiveUtils.isLandscape(context)) - || _responsiveUtils.isDesktop(context)) { + if (controller.isSelectionEnabled() || _responsiveUtils.isDesktop(context)) { return const SizedBox.shrink(); } return _buildUserInformation(context); 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 13a2f5240..c55862137 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart @@ -161,15 +161,18 @@ class MailBoxFolderTileBuilder { } Widget _buildSelectModeIcon() { - return Transform( - transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0), - child: buildIconWeb( - icon: SvgPicture.asset( - _mailboxNode.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected, - width: kIsWeb ? 20 : 24, - height: kIsWeb ? 20 : 24, - fit: BoxFit.fill), - onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode))); + return Container( + color: Colors.transparent, + child: Transform( + transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0), + child: buildIconWeb( + icon: SvgPicture.asset( + _mailboxNode.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected, + width: kIsWeb ? 20 : 24, + height: kIsWeb ? 20 : 24, + fit: BoxFit.fill), + onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode))), + ); } Color get backgroundColorItem { diff --git a/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart index 1246b558d..76edce3da 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart @@ -116,14 +116,17 @@ class MailboxSearchTileBuilder { } Widget _buildSelectModeIcon() { - return Transform( - transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0), - child: buildIconWeb( - icon: SvgPicture.asset( - _presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected, - width: kIsWeb ? 20 : 24, - height: kIsWeb ? 20 : 24, - fit: BoxFit.fill), - onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox))); + return Container( + color: Colors.transparent, + child: Transform( + transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0), + child: buildIconWeb( + icon: SvgPicture.asset( + _presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected, + width: kIsWeb ? 20 : 24, + height: kIsWeb ? 20 : 24, + fit: BoxFit.fill), + onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox))), + ); } } \ No newline at end of file diff --git a/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart b/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart index b904099a6..51d89ac6b 100644 --- a/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart +++ b/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart @@ -24,16 +24,17 @@ class MailboxCreatorView extends GetWidget { child: ResponsiveWidget( responsiveUtils: _responsiveUtils, mobile: SizedBox(child: _buildBody(context), width: double.infinity), + landscapeMobile: SizedBox(child: _buildBody(context), width: double.infinity), tablet: Row(children: [ - SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer), Expanded(child: Container(color: Colors.transparent)), ]), tabletLarge: Row(children: [ - SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer), Expanded(child: Container(color: Colors.transparent)), ]), desktop: Row(children: [ - SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer), Expanded(child: Container(color: Colors.transparent)), ]) ), diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart index abefa71c0..e634f79f2 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart @@ -24,20 +24,22 @@ 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.defaultSizeDrawerWidthMobileTablet), - tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + mobile: SizedBox(child: MailboxView(), width: double.infinity), + landscapeMobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer), + tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer), tabletLarge: const SizedBox.shrink(), desktop: const SizedBox.shrink(), ), - drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context), + drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) + || _responsiveUtils.isLandscapeMobile(context) + || _responsiveUtils.isTablet(context), body: Stack(children: [ ResponsiveWidget( responsiveUtils: _responsiveUtils, desktop: _buildLargeScreenView(context), tabletLarge: _buildLargeScreenView(context), tablet: ThreadView(), + landscapeMobile: ThreadView(), mobile: ThreadView(), ), Obx(() => controller.dashBoardAction.value is ComposeEmailAction @@ -96,7 +98,7 @@ class MailboxDashBoardView extends GetWidget with Ne return Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), + SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer), Expanded(child: _wrapContainerForThreadAndEmail(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 9b9d62cbd..174baa165 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -41,8 +41,8 @@ class MailboxDashBoardView extends GetWidget with Ne backgroundColor: Colors.white, drawer: ResponsiveWidget( responsiveUtils: _responsiveUtils, - mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), - tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), + mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer), + tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer), tabletLarge: const SizedBox.shrink(), desktop: const SizedBox.shrink(), ), @@ -83,7 +83,7 @@ class MailboxDashBoardView extends GetWidget with Ne Expanded(child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb), + SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenu), Expanded(child: _wrapContainerForThreadAndEmail(context)) ], )) @@ -91,7 +91,7 @@ class MailboxDashBoardView extends GetWidget with Ne tabletLarge: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb), + SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer), Expanded(child: _wrapContainerForThreadAndEmail(context)) ], ), 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 272ac7207..c28f593c4 100644 --- a/lib/features/manage_account/presentation/manage_account_dashboard_view.dart +++ b/lib/features/manage_account/presentation/manage_account_dashboard_view.dart @@ -32,7 +32,7 @@ class ManageAccountDashBoardView extends GetWidget with AppLoaderMixin { onTap: () => FocusManager.instance.primaryFocus?.unfocus(), child: Scaffold( resizeToAvoidBottomInset: false, - backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, + backgroundColor: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) + ? AppColor.colorBgDesktop + : Colors.white, body: Row(children: [ - if ((!kIsWeb && !_responsiveUtils.isMobile(context)) || (kIsWeb && _responsiveUtils.isTabletLarge(context))) + if ((!BuildUtils.isWeb && _responsiveUtils.isDesktop(context) && _responsiveUtils.isTabletLarge(context)) + || (BuildUtils.isWeb && _responsiveUtils.isTabletLarge(context))) const VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2), Expanded(child: SafeArea( right: _responsiveUtils.isLandscapeMobile(context), @@ -42,26 +44,33 @@ class ThreadView extends GetWidget with AppLoaderMixin { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Obx(() => !controller.isSearchActive() && !_responsiveUtils.isDesktop(context) + Obx(() => !controller.isSearchActive() + && ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb) ? _buildAppBarNormal(context) : const SizedBox.shrink()), _buildSearchInputFormForMobile(context), Container( - color: kIsWeb ? AppColor.colorBgDesktop : Colors.white, + color: BuildUtils.isWeb ? AppColor.colorBgDesktop : Colors.white, padding: EdgeInsets.zero, child: _buildSearchButtonViewForMobile(context)), Obx(() => controller.isMailboxTrash && controller.emailList.isNotEmpty && !controller.isSearchActive() ? _buildEmptyTrashButton(context) : const SizedBox.shrink()), Expanded(child: Container( - color: kIsWeb ? AppColor.colorBgDesktop : Colors.white, - padding: _responsiveUtils.isDesktop(context) ? const EdgeInsets.only(left: 32, right: 24, top: 16, bottom: 24) : EdgeInsets.zero, + color: BuildUtils.isWeb ? AppColor.colorBgDesktop : Colors.white, + padding: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) + ? const EdgeInsets.only(left: 32, right: 24, top: 16, bottom: 24) + : EdgeInsets.zero, child: Stack(children: [ Container( alignment: Alignment.center, decoration: BoxDecoration( - borderRadius: _responsiveUtils.isDesktop(context) ? BorderRadius.circular(20) : null, - border: _responsiveUtils.isDesktop(context) ? Border.all(color: AppColor.colorBorderBodyThread, width: 1) : null, + 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: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -112,12 +121,13 @@ class ThreadView extends GetWidget with AppLoaderMixin { Widget _buildSearchButtonViewForMobile(BuildContext context) { return Obx(() { - if (!controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) { + if (!controller.isSearchActive() && + ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb)) { return Container( color: Colors.white, padding: const EdgeInsets.only(left: 16, right: 16, bottom: 10), child: (SearchBarView(_imagePaths) - ..hintTextSearch(kIsWeb ? AppLocalizations.of(context).search_emails : AppLocalizations.of(context).hint_search_emails) + ..hintTextSearch(BuildUtils.isWeb ? AppLocalizations.of(context).search_emails : AppLocalizations.of(context).hint_search_emails) ..addOnOpenSearchViewAction(() => controller.enableSearch(context))) .build()); } else { @@ -128,7 +138,8 @@ class ThreadView extends GetWidget with AppLoaderMixin { Widget _buildSearchInputFormForMobile(BuildContext context) { return Obx(() { - if (controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) { + if (controller.isSearchActive() && + ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb)) { return Column(children: [ _buildSearchForm(context), const Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2), @@ -172,7 +183,7 @@ class ThreadView extends GetWidget with AppLoaderMixin { ..addOnEmailSelectionAction((actionType, selectionEmail) => controller.pressEmailSelectionAction(context, actionType, selectionEmail)) ..addOnFilterEmailAction((filterMessageOption, position) => - _responsiveUtils.isMobileDevice(context) + _responsiveUtils.isScreenWithShortestSide(context) ? controller.openContextMenuAction( context, _filterMessagesCupertinoActionTile(context, filterMessageOption)) @@ -186,9 +197,12 @@ class ThreadView extends GetWidget with AppLoaderMixin { Widget _buildFloatingButtonCompose(BuildContext context) { return Obx(() { - if (!controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) { + if (!controller.isSearchActive() + && (!BuildUtils.isWeb || (BuildUtils.isWeb && !_responsiveUtils.isDesktop(context)))) { return Container( - padding: EdgeInsets.zero, + padding: BuildUtils.isWeb + ? EdgeInsets.zero + : controller.isSelectionEnabled() ? const EdgeInsets.only(bottom: 70) : EdgeInsets.zero, child: Align( alignment: Alignment.bottomRight, child: ScrollingFloatingButtonAnimated( @@ -317,7 +331,7 @@ class ThreadView extends GetWidget with AppLoaderMixin { Widget _buildListEmail(BuildContext context) { return Container( - margin: _responsiveUtils.isDesktop(context) + margin: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? EdgeInsets.symmetric(vertical: controller.isSelectionEnabled() ? 4 : 12, horizontal: 4) : EdgeInsets.only(top: controller.isSearchActive() ? 8 : 0), alignment: Alignment.center, @@ -381,7 +395,7 @@ class ThreadView extends GetWidget with AppLoaderMixin { physics: const AlwaysScrollableScrollPhysics(), key: const PageStorageKey('list_presentation_email_in_threads'), itemCount: listPresentationEmail.length, - padding: EdgeInsets.only(top: kIsWeb && !_responsiveUtils.isDesktop(context) ? 10 : 0), + padding: EdgeInsets.only(top: BuildUtils.isWeb && !_responsiveUtils.isDesktop(context) ? 10 : 0), itemBuilder: (context, index) => Obx(() => (EmailTileBuilder( context, listPresentationEmail[index], @@ -434,7 +448,7 @@ class ThreadView extends GetWidget with AppLoaderMixin { width: double.infinity, padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24), decoration: BoxDecoration( - borderRadius: _responsiveUtils.isDesktop(context) + borderRadius: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? const BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)) : null, color: AppColor.bgStatusResultSearch), @@ -456,10 +470,10 @@ class ThreadView extends GetWidget with AppLoaderMixin { border: Border.all(color: AppColor.colorLineLeftEmailView), color: Colors.white), 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), + 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), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: Row(children: [ Padding( 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 091de679a..bd7769e33 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 @@ -148,7 +148,7 @@ class AppBarThreadWidgetBuilder { padding: const EdgeInsets.only(left: 40, right: 40), child: _buildContentCenterAppBar()), Transform( - transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0), + transform: Matrix4.translationValues(_getXTranslationValues(), -8.0, 0.0), child: Text( _filterMessageOption.getTitle(_context), style: const TextStyle(fontSize: 11, color: AppColor.colorContentEmail))) @@ -213,7 +213,7 @@ class AppBarThreadWidgetBuilder { padding: const EdgeInsets.only(left: 16, right: 16), child: GestureDetector( onTap: () { - if (_onFilterEmailAction != null && _responsiveUtils.isMobileDevice(_context)) { + if (_onFilterEmailAction != null && _responsiveUtils.isScreenWithShortestSide(_context)) { _onFilterEmailAction!.call(_filterMessageOption, null); } }, @@ -224,7 +224,7 @@ class AppBarThreadWidgetBuilder { : AppColor.colorFilterMessageEnabled, fit: BoxFit.fill), onTapDown: (detail) { - if (_onFilterEmailAction != null && !_responsiveUtils.isMobileDevice(_context)) { + if (_onFilterEmailAction != null && !_responsiveUtils.isScreenWithShortestSide(_context)) { final screenSize = MediaQuery.of(_context).size; final offset = detail.globalPosition; final position = RelativeRect.fromLTRB( @@ -309,4 +309,12 @@ class AppBarThreadWidgetBuilder { final maxWidth = width > widthSiblingsWidget ? width - widthSiblingsWidget : 0.0; return maxWidth; } + + double _getXTranslationValues() { + if (BuildUtils.isWeb) { + return _responsiveUtils.isDesktop(_context) && BuildUtils.isWeb ? -2.0 : -16.0; + } else { + return _responsiveUtils.isTabletLarge(_context) ? 0.0 : -16.0; + } + } } \ No newline at end of file diff --git a/lib/features/thread/presentation/widgets/email_tile_builder.dart b/lib/features/thread/presentation/widgets/email_tile_builder.dart index 55b2e6027..d7789c0c7 100644 --- a/lib/features/thread/presentation/widgets/email_tile_builder.dart +++ b/lib/features/thread/presentation/widgets/email_tile_builder.dart @@ -6,14 +6,12 @@ import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart'; import 'package:tmail_ui_user/features/thread/presentation/model/search_status.dart'; -import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; typedef OnPressEmailActionClick = void Function(EmailActionType, PresentationEmail); typedef OnMoreActionClick = void Function(PresentationEmail, RelativeRect?); class EmailTileBuilder { - final _responsiveUtils = Get.find(); final _imagePaths = Get.find(); final PresentationEmail _presentationEmail; @@ -50,254 +48,125 @@ class EmailTileBuilder { return Theme( key: const Key('thread_tile'), data: ThemeData(splashColor: Colors.transparent, highlightColor: Colors.transparent), - child: ResponsiveWidget( - responsiveUtils: _responsiveUtils, - mobile: _wrapContainerForTile(_buildListTile()), - desktop: _wrapContainerForTile(_buildListTileForDesktop()), - ) - ); - } - - Widget _wrapContainerForTile(Widget tile) { - return Padding( - padding: const EdgeInsets.only(left: 16, right: 16, bottom: 4), - child: tile); - } - - Widget _buildListTile() { - return Column(children: [ - ListTile( - contentPadding: EdgeInsets.zero, - onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail), - onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail), - leading: GestureDetector( - onTap: () => _emailActionClick?.call( - _selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview, - _presentationEmail), - child: Container( - width: 56, - height: 56, - color: Colors.transparent, - alignment: Alignment.center, - child: _buildAvatarIcon()), - ), - title: Row( - children: [ - if (!_presentationEmail.hasRead) - Padding( - padding: const EdgeInsets.only(right: 5), - child: SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)), - Expanded( - child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty - ? RichTextBuilder( - _getInformationSender(), - _searchQuery!.value, - const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600), - TextStyle(fontSize: 15, color: _buildTextColorForReadEmail(), backgroundColor: AppColor.bgWordSearch, fontWeight: _buildFontForReadEmail())).build() - : Text( - _getInformationSender(), + child: Padding( + padding: const EdgeInsets.only(left: 16, right: 16, bottom: 4), + child: Column(children: [ + ListTile( + contentPadding: EdgeInsets.zero, + onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail), + onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail), + leading: GestureDetector( + onTap: () => _emailActionClick?.call( + _selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview, + _presentationEmail), + child: Container( + width: 56, + height: 56, + color: Colors.transparent, + alignment: Alignment.center, + child: _buildAvatarIcon()), + ), + title: Row( + children: [ + if (!_presentationEmail.hasRead) + Padding( + padding: const EdgeInsets.only(right: 5), + child: SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)), + Expanded( + child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty + ? RichTextBuilder( + _getInformationSender(), + _searchQuery!.value, + const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600), + TextStyle(fontSize: 15, color: _buildTextColorForReadEmail(), backgroundColor: AppColor.bgWordSearch, fontWeight: _buildFontForReadEmail())).build() + : Text( + _getInformationSender(), + maxLines: 1, + overflow:TextOverflow.ellipsis, + style: TextStyle(fontSize: 15, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail())) + ), + if (_presentationEmail.hasAttachment == true) + Padding( + padding: const EdgeInsets.only(left: 8), + child: SvgPicture.asset(_imagePaths.icAttachment, width: 16, height: 16, fit: BoxFit.fill)), + Padding( + padding: const EdgeInsets.only(right: 4, left: 8), + child: Text( + _presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag()), maxLines: 1, overflow:TextOverflow.ellipsis, - style: TextStyle(fontSize: 15, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail())) + style: TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()))), + SvgPicture.asset(_imagePaths.icChevron, width: 16, height: 16, fit: BoxFit.fill), + ], ), - if (_presentationEmail.hasAttachment == true) - Padding( - padding: const EdgeInsets.only(left: 8), - child: SvgPicture.asset(_imagePaths.icAttachment, width: 16, height: 16, fit: BoxFit.fill)), - Padding( - padding: const EdgeInsets.only(right: 4, left: 8), - child: Text( - _presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag()), - maxLines: 1, - overflow:TextOverflow.ellipsis, - style: TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()))), - SvgPicture.asset(_imagePaths.icChevron, width: 16, height: 16, fit: BoxFit.fill), - ], - ), - subtitle: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Padding( - padding: const EdgeInsets.only(top: 6), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty - ? RichTextBuilder( - _presentationEmail.getEmailTitle(), - _searchQuery!.value, - TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()), - TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail())).build() - : Text( - _presentationEmail.getEmailTitle(), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail())) - ), - if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty) - Container( - margin: const EdgeInsets.only(left: 8), - padding: const EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3), - constraints: const BoxConstraints(maxWidth: 100), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: AppColor.backgroundCounterMailboxColor), - child: Text( - _presentationEmail.mailboxName, - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold), - ) + subtitle: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Padding( + padding: const EdgeInsets.only(top: 6), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty + ? RichTextBuilder( + _presentationEmail.getEmailTitle(), + _searchQuery!.value, + TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()), + TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail())).build() + : Text( + _presentationEmail.getEmailTitle(), + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail())) + ), + if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty) + Container( + margin: const EdgeInsets.only(left: 8), + padding: const EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3), + constraints: const BoxConstraints(maxWidth: 100), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: AppColor.backgroundCounterMailboxColor), + child: Text( + _presentationEmail.mailboxName, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold), + ) + ), + if (_presentationEmail.hasStarred) + SvgPicture.asset(_imagePaths.icStar, width: 15, height: 15, fit: BoxFit.fill) + ], + )), + Padding( + padding: const EdgeInsets.only(top: 6), + child: Row(children: [ + Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty + ? RichTextBuilder( + _presentationEmail.getPartialContent(), + _searchQuery!.value, + const TextStyle(fontSize: 13, color: AppColor.colorContentEmail), + const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, backgroundColor: AppColor.bgWordSearch)).build() + : Text( + _presentationEmail.getPartialContent(), + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail)) ), - if (_presentationEmail.hasStarred) - SvgPicture.asset(_imagePaths.icStar, width: 15, height: 15, fit: BoxFit.fill) - ], - )), - Padding( - padding: const EdgeInsets.only(top: 6), - child: Row(children: [ - Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty - ? RichTextBuilder( - _presentationEmail.getPartialContent(), - _searchQuery!.value, - const TextStyle(fontSize: 13, color: AppColor.colorContentEmail), - const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, backgroundColor: AppColor.bgWordSearch)).build() - : Text( - _presentationEmail.getPartialContent(), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail)) - ), - ]) - ), - ], - ), - ), - const Padding( - padding: EdgeInsets.only(top: 4), - child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)), - ]); - } - - Widget _buildListTileForDesktop() { - return GestureDetector( - onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail), - onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail), - child: Column(children: [ - Row(children: [ - Container( - alignment: Alignment.center, - child: !_presentationEmail.hasRead - ? SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill) - : const SizedBox(width: 9)), - buildIconWeb( - icon: SvgPicture.asset( - _presentationEmail.hasStarred ? _imagePaths.icStar : _imagePaths.icUnStar, - width: 20, - height: 20, - fit: BoxFit.fill), - tooltip: _presentationEmail.hasStarred ? AppLocalizations.of(_context).starred : AppLocalizations.of(_context).not_starred, - onTap: () => _emailActionClick?.call( - _presentationEmail.hasStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred, - _presentationEmail)), - GestureDetector( - onTap: () => _emailActionClick?.call( - _selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview, - _presentationEmail), - child: Container( - width: 40, - height: 56, - color: Colors.transparent, - alignment: Alignment.center, - child: _buildAvatarIcon( - iconSize: 40, - textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Colors.white)) + ]) + ), + ], ), ), - const SizedBox(width: 10), - SizedBox( - width: 160, - child: _isSearchEnabled - ? RichTextBuilder( - _getInformationSender(), - _searchQuery!.value, - const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600), - const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, backgroundColor: AppColor.bgWordSearch, fontWeight: FontWeight.w600)).build() - : Text(_getInformationSender(), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)), - ), - const SizedBox(width: 24), - Expanded(child: _buildSubjectAndContent()), - const SizedBox(width: 16), - if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty) - Container( - margin: const EdgeInsets.only(left: 8), - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3), - constraints: const BoxConstraints(maxWidth: 80), - decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.backgroundCounterMailboxColor), - child: Text(_presentationEmail.mailboxName, - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold), - ) - ), - if (_presentationEmail.hasAttachment == true) - Padding(padding: const EdgeInsets.only(left: 8), - child: SvgPicture.asset(_imagePaths.icAttachment, width: 16, height: 16, fit: BoxFit.fill)), - Padding( - padding: const EdgeInsets.only(right: 20, left: 8), - child: Text(_presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag()), - maxLines: 1, - textAlign: TextAlign.right, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.normal))), - ]), - if (_selectModeAll == SelectMode.INACTIVE) const Padding( - padding: EdgeInsets.only(left: 85), + padding: EdgeInsets.only(top: 4), child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)), - ]), + ]), + ) ); } - Widget _buildSubjectAndContent() { - return LayoutBuilder(builder: (context, constraints) { - return Row(children: [ - Container( - constraints: BoxConstraints(maxWidth: constraints.maxWidth / 2), - child: _isSearchEnabled - ? RichTextBuilder( - _presentationEmail.getEmailTitle(), - _searchQuery!.value, - const TextStyle(fontSize: 13, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600), - const TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: AppColor.colorNameEmail)).build() - : Text(_presentationEmail.getEmailTitle(), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 13, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)) - ), - if (_presentationEmail.getEmailTitle().isNotEmpty) const SizedBox(width: 12), - Expanded( - child: Container( - child: _isSearchEnabled - ? RichTextBuilder( - _presentationEmail.getPartialContent(), - _searchQuery!.value, - const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.normal), - const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, backgroundColor: AppColor.bgWordSearch)).build() - : Text(_presentationEmail.getPartialContent(), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.normal)) - ) - ), - ]); - }); - } - Widget _buildAvatarIcon({ double? iconSize, TextStyle? textStyle @@ -334,13 +203,11 @@ class EmailTileBuilder { } FontWeight _buildFontForReadEmail() { - if (!_presentationEmail.hasRead) return FontWeight.w600; - return FontWeight.normal; + return !_presentationEmail.hasRead ? FontWeight.w600 : FontWeight.normal; } Color _buildTextColorForReadEmail() { - if (_presentationEmail.hasRead) return AppColor.colorContentEmail; - return AppColor.colorNameEmail; + return _presentationEmail.hasRead ? AppColor.colorContentEmail : AppColor.colorNameEmail; } String _getInformationSender() { @@ -351,8 +218,4 @@ class EmailTileBuilder { } return _presentationEmail.getSenderName(); } - - bool get _isSearchEnabled => _searchStatus == SearchStatus.ACTIVE - && _searchQuery != null - && _searchQuery!.value.isNotEmpty; } \ No newline at end of file