eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-528 Update size for responsive on tablet and landscape mobile

Browse Source
This commit is contained in:
dab246
2022-05-04 10:52:57 +07:00
committed by Dat H. Pham
parent 2e3c4e8f88
commit dbbc13eab4
20 changed files with 316 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/utils/responsive_utils.dart
+12 -14
View File
@@ -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;
}
core/lib/presentation/views/list/tree_view.dart
+1
View File
@@ -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);
core/lib/presentation/views/responsive/responsive_widget.dart
+3
View File
@@ -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;
}
lib/features/composer/presentation/composer_view.dart
+6 -3
View File
@@ -29,6 +29,7 @@ class ComposerView extends GetWidget<ComposerController> {
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<ComposerController> {
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<ComposerController> {
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: [
lib/features/destination_picker/presentation/destination_picker_view.dart
+50 -45
View File
@@ -39,29 +39,28 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
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<DestinationPickerController> {
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<DestinationPickerController> {
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<DestinationPickerController> {
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<DestinationPickerController> {
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<DestinationPickerController> {
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<DestinationPickerController> {
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)));
lib/features/email/presentation/email_controller.dart
+1 -1
View File
@@ -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))
lib/features/email/presentation/email_view.dart
+1 -1
View File
@@ -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;
lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart
+1 -1
View File
@@ -84,7 +84,7 @@ class _AttachmentsPlaceHolderLoadingState extends State<AttachmentsPlaceHolderLo
Widget _placeHolderAttachment(BuildContext context) {
double width = MediaQuery.of(context).size.width;
final percentAttachment = widget.responsiveUtils.isMobileDevice(context)
final percentAttachment = widget.responsiveUtils.isScreenWithShortestSide(context)
? 0.4
: widget.responsiveUtils.isTablet(context) ? 0.22 : 0.14;
return Container(
lib/features/mailbox/presentation/mailbox_controller.dart
+8 -9
View File
@@ -221,14 +221,13 @@ class MailboxController extends BaseMailboxController {
}
void _initCollapseMailboxCategories() {
if (currentContext != null) {
if (kIsWeb && (_responsiveUtils.isMobile(currentContext!)) || _responsiveUtils.isTablet(currentContext!)) {
mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode(
defaultMailbox: ExpandMode.COLLAPSE,
folderMailbox: ExpandMode.COLLAPSE);
} else {
mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode.initial();
}
if (kIsWeb && currentContext != null
&& (_responsiveUtils.isMobile(currentContext!) || _responsiveUtils.isTablet(currentContext!))) {
mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode(
defaultMailbox: ExpandMode.COLLAPSE,
folderMailbox: ExpandMode.COLLAPSE);
} else {
mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode.initial();
}
}
@@ -567,7 +566,7 @@ class MailboxController extends BaseMailboxController {
..key(const Key('rename_mailbox_modal_sheet'))
..title(AppLocalizations.of(context).rename_mailbox)
..cancelText(AppLocalizations.of(context).cancel)
..boxConstraints(_responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context)
..boxConstraints(_responsiveUtils.isLandscapeMobile(context)
? const BoxConstraints(maxWidth: 400)
: null)
..onConfirmAction(AppLocalizations.of(context).rename,
lib/features/mailbox/presentation/mailbox_view.dart
+33 -35
View File
@@ -24,24 +24,27 @@ class MailboxView extends GetWidget<MailboxController> {
@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<MailboxController> {
? 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<MailboxController> {
: 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<MailboxController> {
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<MailboxController> {
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<MailboxController> {
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<MailboxController> {
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<MailboxController> {
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<MailboxController> {
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<MailboxController> {
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<MailboxController> {
? 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,
lib/features/mailbox/presentation/mailbox_view_web.dart
+1 -4
View File
@@ -147,10 +147,7 @@ class MailboxView extends GetWidget<MailboxController> {
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);
lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart
+12 -9
View File
@@ -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 {
lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart
+12 -9
View File
@@ -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))),
);
}
}
lib/features/mailbox_creator/presentation/mailbox_creator_view.dart
+4 -3
View File
@@ -24,16 +24,17 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
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)),
])
),
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart
+8 -6
View File
@@ -24,20 +24,22 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> 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<MailboxDashBoardController> with Ne
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
Expanded(child: _wrapContainerForThreadAndEmail(context))
],
);
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart
+4 -4
View File
@@ -41,8 +41,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> 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<MailboxDashBoardController> 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<MailboxDashBoardController> with Ne
tabletLarge: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
Expanded(child: _wrapContainerForThreadAndEmail(context))
],
),
lib/features/manage_account/presentation/manage_account_dashboard_view.dart
+2 -2
View File
@@ -32,7 +32,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
backgroundColor: Colors.white,
drawer: ResponsiveWidget(
responsiveUtils: _responsiveUtils,
mobile: SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
mobile: SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeDrawer),
desktop: const SizedBox.shrink()
),
drawerEnableOpenDragGesture: !_responsiveUtils.isDesktop(context),
@@ -73,7 +73,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
Expanded(child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenu),
Expanded(child: _viewDisplayedOfAccountMenuItem())
],
))
lib/features/thread/presentation/thread_view.dart
+36 -22
View File
@@ -1,5 +1,4 @@
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';
@@ -32,9 +31,12 @@ class ThreadView extends GetWidget<ThreadController> 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<ThreadController> 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<ThreadController> 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<ThreadController> 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<ThreadController> 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<ThreadController> 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<ThreadController> 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<ThreadController> 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<ThreadController> 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<ThreadController> 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(
lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart
+11 -3
View File
@@ -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;
}
}
}
lib/features/thread/presentation/widgets/email_tile_builder.dart
+110 -247
View File
@@ -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<ResponsiveUtils>();
final _imagePaths = Get.find<ImagePaths>();
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;
}