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

TF-517 Add all screen for responsive

Browse Source
This commit is contained in:
dab246
2022-04-27 10:43:44 +07:00
committed by Dat H. Pham
parent e794f4343a
commit 72bb594369
6 changed files with 139 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart
+5 -2
View File
@@ -28,14 +28,17 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
? SizedBox(child: MailboxView(), width: double.infinity) ? SizedBox(child: MailboxView(), width: double.infinity)
: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), : SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet), tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
tabletLarge: SizedBox.shrink(), tabletLarge: const SizedBox.shrink(),
desktop: const SizedBox.shrink(),
), ),
drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context), drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context),
body: Stack(children: [ body: Stack(children: [
ResponsiveWidget( ResponsiveWidget(
responsiveUtils: _responsiveUtils, responsiveUtils: _responsiveUtils,
desktop: _buildLargeScreenView(context),
tabletLarge: _buildLargeScreenView(context), tabletLarge: _buildLargeScreenView(context),
mobile: ThreadView() tablet: ThreadView(),
mobile: ThreadView(),
), ),
Obx(() => controller.dashBoardAction.value is ComposeEmailAction Obx(() => controller.dashBoardAction.value is ComposeEmailAction
? ComposerView() ? ComposerView()
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart
+5 -2
View File
@@ -42,7 +42,9 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
drawer: ResponsiveWidget( drawer: ResponsiveWidget(
responsiveUtils: _responsiveUtils, responsiveUtils: _responsiveUtils,
mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
tabletLarge: const SizedBox.shrink() tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
tabletLarge: const SizedBox.shrink(),
desktop: const SizedBox.shrink(),
), ),
drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context), drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context),
body: Stack(children: [ body: Stack(children: [
@@ -93,7 +95,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
Expanded(child: _wrapContainerForThreadAndEmail(context)) Expanded(child: _wrapContainerForThreadAndEmail(context))
], ],
), ),
mobile: ThreadView() tablet: ThreadView(),
mobile: ThreadView(),
), ),
Obx(() => controller.dashBoardAction.value is ComposeEmailAction Obx(() => controller.dashBoardAction.value is ComposeEmailAction
? ComposerView() ? ComposerView()
lib/features/thread/presentation/thread_view.dart
+2 -3
View File
@@ -87,9 +87,8 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
Widget _buildListButtonSelectionForMobile(BuildContext context) { Widget _buildListButtonSelectionForMobile(BuildContext context) {
return Obx(() { return Obx(() {
if (controller.isSelectionEnabled() if ((!BuildUtils.isWeb || (BuildUtils.isWeb && controller.isSelectionEnabled()
&& controller.isSearchActive() && controller.isSearchActive() && !_responsiveUtils.isDesktop(context)))
&& !_responsiveUtils.isDesktop(context)
&& controller.listEmailSelected.isNotEmpty) { && controller.listEmailSelected.isNotEmpty) {
return Column(children: [ return Column(children: [
const Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2), const Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart
+2 -1
View File
@@ -65,7 +65,8 @@ class AppBarThreadWidgetBuilder {
alignment: Alignment.topCenter, alignment: Alignment.topCenter,
color: Colors.white, color: Colors.white,
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
padding: const EdgeInsets.only(left: 8, top: 16, bottom: 8, right: 8), padding: EdgeInsets.only(left: 8, bottom: 8, right: 8,
top: (!BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(_context)) ? 0 : 16),
child: MediaQuery( child: MediaQuery(
data: const MediaQueryData(padding: EdgeInsets.zero), data: const MediaQueryData(padding: EdgeInsets.zero),
child: kIsWeb child: kIsWeb
lib/features/thread/presentation/widgets/email_tile_builder.dart
+124 -139
View File
@@ -59,152 +59,134 @@ class EmailTileBuilder {
} }
Widget _wrapContainerForTile(Widget tile) { Widget _wrapContainerForTile(Widget tile) {
if (_responsiveUtils.isDesktop(_context)) { return Padding(
return Container( padding: const EdgeInsets.only(left: 16, right: 16, bottom: 4),
margin: _selectModeAll == SelectMode.ACTIVE ? const EdgeInsets.only(top: 3, left: 8, right: 8) : EdgeInsets.zero, child: tile);
padding: _selectModeAll == SelectMode.ACTIVE ? const EdgeInsets.symmetric(vertical: 8) : EdgeInsets.zero,
decoration: _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE
? BoxDecoration(borderRadius: BorderRadius.circular(14), color: AppColor.colorItemEmailSelectedDesktop)
: null,
child: tile);
} else {
return Container(
margin: EdgeInsets.zero,
padding: const EdgeInsets.only(bottom: 10, left: 16, right: 16),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.white),
alignment: Alignment.center,
child: tile);
}
} }
Widget _buildListTile() { Widget _buildListTile() {
return Container( return Column(children: [
margin: EdgeInsets.zero, ListTile(
padding: const EdgeInsets.only(bottom: 10, left: 16, right: 16), contentPadding: EdgeInsets.zero,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.white), onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail),
alignment: Alignment.center, onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail),
child: Column(children: [ leading: GestureDetector(
ListTile( onTap: () => _emailActionClick?.call(
contentPadding: EdgeInsets.zero, _selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview,
onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail), _presentationEmail),
onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail), child: Container(
leading: GestureDetector( width: 56,
onTap: () => _emailActionClick?.call( height: 56,
_selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview, color: Colors.transparent,
_presentationEmail), alignment: Alignment.center,
child: _buildAvatarIcon(), child: _buildAvatarIcon()),
), ),
title: Row( title: Row(
children: [ children: [
if (!_presentationEmail.hasRead) if (!_presentationEmail.hasRead)
Padding( Padding(
padding: const EdgeInsets.only(right: 5), padding: const EdgeInsets.only(right: 5),
child: SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)), child: SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)),
Expanded( Expanded(
child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
? RichTextBuilder( ? RichTextBuilder(
_getInformationSender(), _getInformationSender(),
_searchQuery!.value, _searchQuery!.value,
const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600), const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, backgroundColor: AppColor.bgWordSearch, fontWeight: FontWeight.w600)).build() const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, backgroundColor: AppColor.bgWordSearch, fontWeight: FontWeight.w600)).build()
: Text( : Text(
_getInformationSender(), _getInformationSender(),
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
),
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, maxLines: 1,
overflow:TextOverflow.ellipsis, overflow:TextOverflow.ellipsis,
style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail))), style: const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
SvgPicture.asset(_imagePaths.icChevron, width: 16, height: 16, fit: BoxFit.fill),
],
), ),
subtitle: Transform( if (_presentationEmail.hasAttachment == true)
transform: Matrix4.translationValues(0.0, 8.0, 0.0), Padding(
child: Column( padding: const EdgeInsets.only(left: 8),
crossAxisAlignment: CrossAxisAlignment.start, 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: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail))),
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, mainAxisSize: MainAxisSize.min,
children: [ children: [
Padding( Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
padding: EdgeInsets.zero, ? RichTextBuilder(
child: Row( _presentationEmail.getEmailTitle(),
mainAxisSize: MainAxisSize.min, _searchQuery!.value,
children: [ const TextStyle(fontSize: 13, color: AppColor.colorNameEmail),
Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty const TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: AppColor.colorNameEmail)).build()
? RichTextBuilder( : Text(
_presentationEmail.getEmailTitle(), _presentationEmail.getEmailTitle(),
_searchQuery!.value, maxLines: 1,
const TextStyle(fontSize: 13, color: AppColor.colorNameEmail), overflow: TextOverflow.ellipsis,
const TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: AppColor.colorNameEmail)).build() style: const TextStyle(fontSize: 13, color: AppColor.colorNameEmail))
: Text(
_presentationEmail.getEmailTitle(),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 13, color: AppColor.colorNameEmail))
),
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: 8),
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 (_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))
),
])
), ),
), ],
const Padding( ),
padding: EdgeInsets.only(top: 12, right: 12), ),
child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)), const Padding(
]), padding: EdgeInsets.only(top: 4),
); child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
]);
} }
Widget _buildListTileForDesktop() { Widget _buildListTileForDesktop() {
return InkWell( return GestureDetector(
onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail), onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail),
onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail), onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail),
child: Column(children: [ child: Column(children: [
Row(children: [ Row(children: [
Container( Container(
padding: const EdgeInsets.only(left: 16, right: 16),
alignment: Alignment.center, alignment: Alignment.center,
child: !_presentationEmail.hasRead child: !_presentationEmail.hasRead
? SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill) ? SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)
@@ -219,17 +201,21 @@ class EmailTileBuilder {
onTap: () => _emailActionClick?.call( onTap: () => _emailActionClick?.call(
_presentationEmail.hasStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred, _presentationEmail.hasStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred,
_presentationEmail)), _presentationEmail)),
if (_selectModeAll == SelectMode.INACTIVE) const SizedBox(width: 8),
GestureDetector( GestureDetector(
onTap: () => _emailActionClick?.call( onTap: () => _emailActionClick?.call(
_selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview, _selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview,
_presentationEmail), _presentationEmail),
child: _buildAvatarIcon( child: Container(
iconSize: 32, width: 40,
textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Colors.white), height: 56,
paddingIconSelect: const EdgeInsets.all(5)), color: Colors.transparent,
alignment: Alignment.center,
child: _buildAvatarIcon(
iconSize: 40,
textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Colors.white))
),
), ),
if (_selectModeAll == SelectMode.INACTIVE) const SizedBox(width: 10), const SizedBox(width: 10),
SizedBox( SizedBox(
width: 160, width: 160,
child: _isSearchEnabled child: _isSearchEnabled
@@ -271,7 +257,7 @@ class EmailTileBuilder {
]), ]),
if (_selectModeAll == SelectMode.INACTIVE) if (_selectModeAll == SelectMode.INACTIVE)
const Padding( const Padding(
padding: EdgeInsets.only(top: 7.5, bottom: 7.5, left: 70), padding: EdgeInsets.only(left: 85),
child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)), child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
]), ]),
); );
@@ -314,17 +300,16 @@ class EmailTileBuilder {
Widget _buildAvatarIcon({ Widget _buildAvatarIcon({
double? iconSize, double? iconSize,
EdgeInsets? paddingIconSelect,
TextStyle? textStyle TextStyle? textStyle
}) { }) {
if (_selectModeAll == SelectMode.ACTIVE) { if (_selectModeAll == SelectMode.ACTIVE) {
return Padding( return Container(
padding: const EdgeInsets.all(12), alignment: Alignment.center,
child: SvgPicture.asset( child: SvgPicture.asset(
_presentationEmail.selectMode == SelectMode.ACTIVE _presentationEmail.selectMode == SelectMode.ACTIVE
? _imagePaths.icSelected ? _imagePaths.icSelected
: _imagePaths.icUnSelected, : _imagePaths.icUnSelected,
fit: BoxFit.fill)); width: 24, height: 24));
} else { } else {
return Container( return Container(
width: iconSize ?? 56, width: iconSize ?? 56,
lib/features/thread/presentation/widgets/email_tile_web_builder.dart
+1
View File
@@ -54,6 +54,7 @@ class EmailTileBuilder {
responsiveUtils: _responsiveUtils, responsiveUtils: _responsiveUtils,
mobile: _wrapContainerForTile(_buildListTile()), mobile: _wrapContainerForTile(_buildListTile()),
tablet: _wrapContainerForTile(_buildListTileTablet()), tablet: _wrapContainerForTile(_buildListTileTablet()),
tabletLarge: _wrapContainerForTile(_buildListTileTablet()),
desktop: _wrapContainerForTile(_buildListTileForDesktop()), desktop: _wrapContainerForTile(_buildListTileForDesktop()),
) )
); );