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

TF-248 Update list email, email content for tablet

Browse Source
This commit is contained in:
dab246
2022-02-09 16:59:32 +07:00
committed by Dat H. Pham
parent 818d65b3a6
commit 2c8cd967c0
21 changed files with 216 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/email/presentation/email_controller.dart
+4 -2
View File
@@ -161,7 +161,8 @@ class EmailController extends BaseController {
if (success is MarkAsEmailReadSuccess
&& success.readActions == ReadActions.markAsUnread
&& Get.context != null
&& !responsiveUtils.isDesktop(Get.context!)) {
&& !responsiveUtils.isDesktop(Get.context!)
&& !responsiveUtils.isTabletLarge(Get.context!)) {
backToThreadView();
}
}
@@ -170,7 +171,8 @@ class EmailController extends BaseController {
if (failure is MarkAsEmailReadFailure
&& failure.readActions == ReadActions.markAsUnread
&& Get.context != null
&& !responsiveUtils.isDesktop(Get.context!)) {
&& !responsiveUtils.isDesktop(Get.context!)
&& !responsiveUtils.isTabletLarge(Get.context!)) {
backToThreadView();
}
}
lib/features/email/presentation/email_view.dart
+32 -11
View File
@@ -1,7 +1,6 @@
import 'dart:io';
import 'package:core/core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
@@ -11,7 +10,6 @@ import 'package:tmail_ui_user/features/email/presentation/widgets/app_bar_mail_w
import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_file_tile_builder.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart';
import 'package:model/extensions/list_attachment_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_item_builder.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/sender_and_receiver_information_tile_builder.dart';
@@ -63,14 +61,18 @@ class EmailView extends GetView {
Widget _buildBottomBar(BuildContext context) {
return Padding(
padding: EdgeInsets.only(left: 6, top: 6, right: 6, bottom: 6),
child: (BottomBarMailWidgetBuilder(context, imagePaths, responsiveUtils)
child: (BottomBarMailWidgetBuilder(
context,
imagePaths,
responsiveUtils,
emailController.mailboxDashBoardController.selectedEmail.value)
..addOnPressEmailAction((emailActionType) => emailController.pressEmailAction(emailActionType)))
.build());
}
Widget _buildEmailBody(BuildContext context) {
return Container(
color: AppColor.bgMessenger,
color: Colors.white,
margin: EdgeInsets.zero,
alignment: Alignment.topCenter,
child: Obx(() => emailController.mailboxDashBoardController.selectedEmail.value != null
@@ -80,14 +82,17 @@ class EmailView extends GetView {
margin: EdgeInsets.zero,
width: double.infinity,
alignment: Alignment.center,
padding: EdgeInsets.all(16),
color: AppColor.bgMessenger,
padding: EdgeInsets.only(
left: responsiveUtils.isMobile(context) ? 16 : 24,
right: responsiveUtils.isMobile(context) ? 16 : 24,
bottom: responsiveUtils.isMobile(context) ? 16 : 24,
top: responsiveUtils.isMobile(context) ? 10 : 16),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
_buildEmailSubject(),
_buildEmailMessage(context),
])
))
@@ -105,19 +110,31 @@ class EmailView extends GetView {
Widget _buildEmailSubject() {
return Padding(
padding: EdgeInsets.only(left: 8, top: 4, bottom: 16),
padding: EdgeInsets.only(left: 8, top: 25, bottom: 16),
child: Text(
'${emailController.mailboxDashBoardController.selectedEmail.value?.getEmailTitle()}',
style: TextStyle(fontSize: 18, color: AppColor.mailboxTextColor, fontWeight: FontWeight.w500)
style: TextStyle(fontSize: 22, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700)
));
}
Widget _buildEmailMessage(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: 12, right: 12, top: 16, bottom: 16),
padding: EdgeInsets.only(
bottom: responsiveUtils.isMobile(context) ? 16 : 24,
left: responsiveUtils.isMobile(context) ? 16 : 24,
right: responsiveUtils.isMobile(context) ? 16 : 24,
top: 10),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: AppColor.colorShadowBgContentEmail,
spreadRadius: 3,
blurRadius: 3,
offset: Offset(0, 2), // changes position of shadow
),
],
color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
@@ -131,6 +148,10 @@ class EmailView extends GetView {
emailController.emailAddressExpandMode.value)
.onOpenExpandAddressReceiverActionClick(() => emailController.toggleDisplayEmailAddressAction(expandMode: ExpandMode.EXPAND))
.build()),
Padding(
padding: EdgeInsets.zero,
child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.1)),
_buildEmailSubject(),
_buildAttachments(context),
_buildListEmailContent(),
],
lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart
+17 -16
View File
@@ -57,12 +57,13 @@ class AppBarMailWidgetBuilder {
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (!_responsiveUtils.isDesktop(_context) || Get.currentRoute != AppRoutes.MAILBOX_DASHBOARD)
if ((!_responsiveUtils.isDesktop(_context) && !_responsiveUtils.isTabletLarge(_context))
|| Get.currentRoute != AppRoutes.MAILBOX_DASHBOARD)
Expanded(child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children:[_buildBackButton()])),
_buildListOptionButton(),
if (_presentationEmail != null) _buildListOptionButton(),
]
)
)
@@ -94,31 +95,31 @@ class AppBarMailWidgetBuilder {
// _onBackActionClick!();
// }
// }),
IconButton(
key: Key('button_mark_as_unread_email'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icEyeDisable, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {
if (_onUnreadEmailActionClick != null && _presentationEmail != null && _presentationEmail!.isReadEmail()) {
_onUnreadEmailActionClick!(_presentationEmail!);
}
}),
IconButton(
key: Key('button_mark_as_star_email'),
icon: SvgPicture.asset(
(_presentationEmail != null && _presentationEmail!.isFlaggedEmail())
? _imagePaths.icFlagged
: _imagePaths.icFlag,
fit: BoxFit.fill),
(_presentationEmail != null && _presentationEmail!.isFlaggedEmail())
? _imagePaths.icStar
: _imagePaths.icUnStar,
fit: BoxFit.fill),
onPressed: () {
if (_markAsStarActionClick != null && _presentationEmail != null) {
_markAsStarActionClick!(_presentationEmail!);
}
}),
IconButton(
key: Key('button_mark_as_unread_email'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icUnreadEmail, fit: BoxFit.fill),
onPressed: () {
if (_onUnreadEmailActionClick != null && _presentationEmail != null && _presentationEmail!.isReadEmail()) {
_onUnreadEmailActionClick!(_presentationEmail!);
}
}),
IconButton(
key: Key('button_move_to_mailbox_email'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icFolder, color: AppColor.baseTextColor, fit: BoxFit.fill),
icon: SvgPicture.asset(_imagePaths.icMoveEmail, fit: BoxFit.fill),
onPressed: () {
if (_onMoveToMailboxActionClick != null && _presentationEmail != null) {
_onMoveToMailboxActionClick!(_presentationEmail!);
lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart
+4 -6
View File
@@ -75,15 +75,13 @@ class _AttachmentsPlaceHolderLoadingState extends State<AttachmentsPlaceHolderLo
children: [
Row(children: [
_placeHolderAttachment(context),
SizedBox(width: 16),
_placeHolderAttachment(context),
if (!widget.responsiveUtils.isMobileDevice(context))
if (widget.responsiveUtils.isDesktop(context))
SizedBox(width: 16),
if (!widget.responsiveUtils.isMobileDevice(context))
if (widget.responsiveUtils.isDesktop(context))
_placeHolderAttachment(context),
if (!widget.responsiveUtils.isMobileDevice(context) && widget.responsiveUtils.isTablet(context))
if (widget.responsiveUtils.isDesktop(context))
SizedBox(width: 16),
if (!widget.responsiveUtils.isMobileDevice(context) && widget.responsiveUtils.isTablet(context))
if (widget.responsiveUtils.isDesktop(context))
_placeHolderAttachment(context),
]),
],
lib/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart
+33 -5
View File
@@ -1,6 +1,5 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -11,6 +10,7 @@ class BottomBarMailWidgetBuilder {
final BuildContext _context;
final ImagePaths _imagePaths;
final ResponsiveUtils _responsiveUtils;
final PresentationEmail? _presentationEmail;
OnPressEmailActionClick? _onPressEmailActionClick;
@@ -18,6 +18,7 @@ class BottomBarMailWidgetBuilder {
this._context,
this._imagePaths,
this._responsiveUtils,
this._presentationEmail,
);
void addOnPressEmailAction(OnPressEmailActionClick onPressEmailActionClick) {
@@ -31,7 +32,7 @@ class BottomBarMailWidgetBuilder {
color: Colors.white,
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: _buildListOptionButton()
child: _presentationEmail != null ? _buildListOptionButton() : SizedBox.shrink()
)
);
}
@@ -41,24 +42,51 @@ class BottomBarMailWidgetBuilder {
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
(ButtonBuilder(_imagePaths.icReplyAll)
(ButtonBuilder(_imagePaths.icReplyAllV2)
..key(Key('button_reply_all_message'))
..size(20)
..paddingIcon(EdgeInsets.only(
top: _responsiveUtils.isMobileDevice(_context) ? 10 : 16,
bottom: _responsiveUtils.isMobileDevice(_context) ? 8 : 16,
right: 5))
..textStyle(TextStyle(
fontWeight: FontWeight.w500,
fontSize: _responsiveUtils.isMobileDevice(_context) ? 13 : 16,
color: AppColor.colorTextButton))
..onPressActionClick(() {
if (_onPressEmailActionClick != null) {
_onPressEmailActionClick!(EmailActionType.replyAll);
}})
..text(AppLocalizations.of(_context).reply_all, isVertical: _responsiveUtils.isMobile(_context)))
.build(),
(ButtonBuilder(_imagePaths.icReply)
(ButtonBuilder(_imagePaths.icReplyV2)
..key(Key('button_reply_message'))
..size(20)
..paddingIcon(EdgeInsets.only(
top: _responsiveUtils.isMobileDevice(_context) ? 10 : 16,
bottom: _responsiveUtils.isMobileDevice(_context) ? 8 : 16,
right: 5))
..textStyle(TextStyle(
fontWeight: FontWeight.w500,
fontSize: _responsiveUtils.isMobileDevice(_context) ? 13 : 16,
color: AppColor.colorTextButton))
..onPressActionClick(() {
if (_onPressEmailActionClick != null) {
_onPressEmailActionClick!(EmailActionType.reply);
}})
..text(AppLocalizations.of(_context).reply, isVertical: _responsiveUtils.isMobile(_context)))
.build(),
(ButtonBuilder(_imagePaths.icForward)
(ButtonBuilder(_imagePaths.icForwardV2)
..key(Key('button_forward_message'))
..size(20)
..paddingIcon(EdgeInsets.only(
top: _responsiveUtils.isMobileDevice(_context) ? 10 : 16,
bottom: _responsiveUtils.isMobileDevice(_context) ? 8 : 16,
right: 5))
..textStyle(TextStyle(
fontWeight: FontWeight.w500,
fontSize: _responsiveUtils.isMobileDevice(_context) ? 13 : 16,
color: AppColor.colorTextButton))
..onPressActionClick(() {
if (_onPressEmailActionClick != null) {
_onPressEmailActionClick!(EmailActionType.forward);
lib/features/email/presentation/widgets/sender_and_receiver_information_tile_builder.dart
+36 -21
View File
@@ -43,36 +43,51 @@ class SenderAndReceiverInformationTileBuilder {
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: ListTile(
contentPadding: EdgeInsets.zero,
leading: Transform(
transform: Matrix4.translationValues(-15.0, -8.0, 0.0),
transform: Matrix4.translationValues(0.0, 0.0, 0.0),
child: (AvatarBuilder()
..text('${_presentationEmail!.getAvatarText()}')
..textColor(Colors.white)
..avatarColor(_presentationEmail?.avatarColors)
..size(40))
// .iconStatus(_imagePaths.icOffline)
.build()),
title: Transform(
transform: Matrix4.translationValues(-15.0, 0.0, 0.0),
child: Text(
'${AppLocalizations.of(_context).from_email_address_prefix}: ${_presentationEmail!.getSenderName()}',
style: TextStyle(fontSize: 16, color: AppColor.nameUserColor, fontWeight: FontWeight.w500),
)),
transform: Matrix4.translationValues(0.0, 0.0, 0.0),
child: Row(children: [
Expanded(child: Text(
'${_presentationEmail!.getSenderName()}',
style: TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.w500),
)),
Padding(
padding: EdgeInsets.only(left: 8),
child: Text(
'${_presentationEmail!.getReceivedAt(Localizations.localeOf(_context).toLanguageTag())}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, color: AppColor.colorContentEmail)))
])),
subtitle: Transform(
transform: Matrix4.translationValues(-15.0, 0.0, 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_presentationEmail!.to.numberEmailAddress() > 0) _buildAddressToReceiverWidget(),
if (_presentationEmail!.cc.numberEmailAddress() > 0) _buildAddressCcReceiverWidget(),
if (_presentationEmail!.bcc.numberEmailAddress() > 0) _buildAddressBccReceiverWidget(),
transform: Matrix4.translationValues(0.0, 0.0, 0.0),
child: Row(children: [
Expanded(child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_presentationEmail!.to.numberEmailAddress() > 0) _buildAddressToReceiverWidget(),
if (_presentationEmail!.cc.numberEmailAddress() > 0) _buildAddressCcReceiverWidget(),
if (_presentationEmail!.bcc.numberEmailAddress() > 0) _buildAddressBccReceiverWidget(),
],
)),
if (_presentationEmail?.hasAttachment == true)
Padding(
padding: EdgeInsets.only(top: 6),
child: Text(
'${_presentationEmail!.getReceivedAt(Localizations.localeOf(_context).toLanguageTag(), pattern: 'dd/MM/yyyy h:mm a')}',
style: TextStyle(fontSize: 12, color: AppColor.baseTextColor),
))
],
))
padding: EdgeInsets.only(left: 8),
child: (ButtonBuilder(_imagePaths.icAttachment)
..paddingIcon(EdgeInsets.zero)
..size(16))
.build()),
]))
)
)
);
lib/features/mailbox/presentation/mailbox_controller.dart
+1 -1
View File
@@ -189,7 +189,7 @@ class MailboxController extends BaseController {
mailboxDashBoardController.setSelectedMailbox(presentationMailboxSelected);
mailboxDashBoardController.clearSelectedEmail();
if (responsiveUtils.isMobileDevice(context)) {
if (!responsiveUtils.isDesktop(context)) {
mailboxDashBoardController.closeDrawer();
}
}
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart
+44 -22
View File
@@ -14,31 +14,53 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> {
Widget build(BuildContext context) {
return Scaffold(
key: controller.scaffoldKey,
drawer: responsiveUtils.isMobileDevice(context)
? Container(
drawer: ResponsiveWidget(
responsiveUtils: responsiveUtils,
mobile: Container(
child: MailboxView(),
width: responsiveUtils.isPortrait(context)
? responsiveUtils.getSizeWidthScreen(context)
: responsiveUtils.getSizeWidthScreen(context) / 2)
: null,
drawerEnableOpenDragGesture: responsiveUtils.isMobileDevice(context),
body: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
if (!responsiveUtils.isMobileDevice(context))
Expanded(
flex: responsiveUtils.isDesktop(context) ? 1 : 2,
child: MailboxView()),
Expanded(
flex: responsiveUtils.isDesktop(context) ? 1 : 3,
child: ThreadView(),
),
if (responsiveUtils.isDesktop(context)) Expanded(flex: 2, child: EmailView()),
],
),
? responsiveUtils.getSizeWidthScreen(context)
: responsiveUtils.getSizeWidthScreen(context) / 2),
tablet: Container(
child: MailboxView(),
width: responsiveUtils.getSizeWidthScreen(context) * 0.35),
desktop: null
),
drawerEnableOpenDragGesture: !responsiveUtils.isDesktop(context),
body: ResponsiveWidget(
responsiveUtils: responsiveUtils,
desktop: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(flex: 1, child: MailboxView()),
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: ThreadView(),
)),
Expanded(flex: 2, child: EmailView()),
],
),
),
tabletLarge: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: responsiveUtils.getSizeWidthScreen(context) * 0.35,
padding: EdgeInsets.symmetric(horizontal: 16),
child: ThreadView()
),
Expanded(child: EmailView()),
],
),
),
tablet: ThreadView(),
mobile: ThreadView()),
);
}
}
lib/features/thread/presentation/thread_controller.dart
+1 -1
View File
@@ -297,7 +297,7 @@ class ThreadController extends BaseController {
void previewEmail(BuildContext context, PresentationEmail presentationEmailSelected) {
mailboxDashBoardController.setSelectedEmail(presentationEmailSelected);
if (!responsiveUtils.isDesktop(context)) {
if (!responsiveUtils.isDesktop(context) && !responsiveUtils.isTabletLarge(context)) {
goToEmail(context);
}
}
lib/features/thread/presentation/thread_view.dart
+3 -1
View File
@@ -74,7 +74,9 @@ class ThreadView extends GetWidget<ThreadController> {
),
floatingActionButton: Obx(() => !controller.isSearchActive() && !controller.isSelectionEnabled()
? Container(
padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 80 : 0),
padding: EdgeInsets.only(bottom: controller.isSelectionEnabled()
? 80
: responsiveUtils.isMobileDevice(context) ? 0 : 16),
child: Align(
alignment: Alignment.bottomRight,
child: ScrollingFloatingButtonAnimated(
lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart
+4 -2
View File
@@ -2,7 +2,6 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:model/mailbox/presentation_mailbox.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -169,11 +168,14 @@ class AppBarThreadWidgetBuilder {
if (_responsiveUtils.isTablet(_context)) {
width = width * 0.7;
widthSiblingsWidget = 300;
} else if (_responsiveUtils.isTabletLarge(_context)) {
width = width * 0.35;
widthSiblingsWidget = 250;
} else if (_responsiveUtils.isDesktop(_context)) {
width = width * 0.2;
widthSiblingsWidget = 300;
}
final maxWidth = width - widthSiblingsWidget;
final maxWidth = width > widthSiblingsWidget ? width - widthSiblingsWidget : 0.0;
return maxWidth;
}
}
lib/features/thread/presentation/widgets/bottom_bar_thread_selection_widget.dart
+4 -2
View File
@@ -76,7 +76,8 @@ class BottomBarThreadSelectionWidget {
}})
..text(AppLocalizations.of(_context).move, isVertical: _responsiveUtils.isMobile(_context)))
.build(),
(ButtonBuilder(_imagePaths.icSpamV2)
if (!_responsiveUtils.isDesktop(_context) && !_responsiveUtils.isTabletLarge(_context))
(ButtonBuilder(_imagePaths.icSpamV2)
..key(Key('button_spam_email'))
..paddingIcon(EdgeInsets.all(8))
..textStyle(TextStyle(fontSize: 12, color: AppColor.colorTextButton))
@@ -86,7 +87,8 @@ class BottomBarThreadSelectionWidget {
}})
..text(AppLocalizations.of(_context).spam, isVertical: _responsiveUtils.isMobile(_context)))
.build(),
(ButtonBuilder(_imagePaths.icDeleteV2)
if (!_responsiveUtils.isDesktop(_context) && !_responsiveUtils.isTabletLarge(_context))
(ButtonBuilder(_imagePaths.icDeleteV2)
..key(Key('button_delete_email'))
..paddingIcon(EdgeInsets.all(8))
..textStyle(TextStyle(fontSize: 12, color: AppColor.colorTextButton))