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

TF-381 Apply new UI for list emails

Browse Source
This commit is contained in:
dab246
2022-03-21 23:23:21 +07:00
committed by Dat H. Pham
parent f942041701
commit 61f3f0d00f
22 changed files with 671 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/thread/presentation/widgets/email_tile_builder.dart
+226 -123
View File
@@ -1,6 +1,7 @@
import 'dart:math';
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';
@@ -8,13 +9,17 @@ 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 OnOpenEmailActionClick = void Function(PresentationEmail selectedEmail);
typedef OnSelectEmailActionClick = void Function(PresentationEmail selectedEmail);
typedef OnMarkAsStarActionClick = void Function(PresentationEmail selectedEmail);
class EmailTileBuilder {
final ImagePaths _imagePaths;
final _responsiveUtils = Get.find<ResponsiveUtils>();
final _imagePaths = Get.find<ImagePaths>();
final PresentationEmail _presentationEmail;
final BuildContext _context;
final SelectMode _selectModeAll;
@@ -24,10 +29,10 @@ class EmailTileBuilder {
OnOpenEmailActionClick? _onOpenEmailActionClick;
OnSelectEmailActionClick? _onSelectEmailActionClick;
OnMarkAsStarActionClick? _onMarkAsStarActionClick;
EmailTileBuilder(
this._context,
this._imagePaths,
this._presentationEmail,
this._mailboxRole,
this._selectModeAll,
@@ -43,126 +48,124 @@ class EmailTileBuilder {
_onSelectEmailActionClick = onSelectEmailActionClick;
}
void addOnMarkAsStarActionClick(OnMarkAsStarActionClick onMarkAsStarActionClick) {
_onMarkAsStarActionClick = onMarkAsStarActionClick;
}
Widget build() {
return Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent),
child: Container(
key: Key('thread_tile'),
margin: EdgeInsets.zero,
key: Key('thread_tile'),
data: ThemeData(splashColor: Colors.transparent, highlightColor: Colors.transparent),
child: ResponsiveWidget(
responsiveUtils: _responsiveUtils,
mobile: _buildListTile(),
desktop: _buildListTileForDesktop(),
)
);
}
Widget _buildListTile() {
return Container(
color: Colors.white,
padding: EdgeInsets.only(bottom: 10, left: 20, right: 6),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(0),
color: Colors.white),
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Column(children: [
ListTile(
contentPadding: EdgeInsets.zero,
onTap: () => {
if (_onOpenEmailActionClick != null) {
_onOpenEmailActionClick!(_presentationEmail)
}
},
onLongPress: () => {
if (_onSelectEmailActionClick != null) {
_onSelectEmailActionClick!(_presentationEmail)
}
},
leading: Transform(
transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
child: _buildAvatarIcon()),
title: Transform(
transform: Matrix4.translationValues(-8.0, 0.0, 0.0),
child: Row(
children: [
if (_presentationEmail.isUnReadEmail())
Padding(
child: Column(children: [
ListTile(
contentPadding: EdgeInsets.zero,
onTap: () => _onOpenEmailActionClick?.call(_presentationEmail),
onLongPress: () => _onSelectEmailActionClick!.call(_presentationEmail),
leading: Transform(
transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
child: _buildAvatarIcon()),
title: Transform(
transform: Matrix4.translationValues(-8.0, 0.0, 0.0),
child: Row(
children: [
if (_presentationEmail.isUnReadEmail())
Padding(
padding: 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}',
TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
TextStyle(fontSize: 15, color: AppColor.colorNameEmail, backgroundColor: AppColor.bgWordSearch, fontWeight: FontWeight.w600)).build()
: Text(
_getInformationSender(),
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
),
if (_presentationEmail.hasAttachment == true)
Padding(
Expanded(
child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
? RichTextBuilder(
_getInformationSender(),
'${_searchQuery!.value}',
TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
TextStyle(fontSize: 15, color: AppColor.colorNameEmail, backgroundColor: AppColor.bgWordSearch, fontWeight: FontWeight.w600)).build()
: Text(
_getInformationSender(),
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
),
if (_presentationEmail.hasAttachment == true)
Padding(
padding: EdgeInsets.only(left: 8),
child: (ButtonBuilder(_imagePaths.icAttachment)
..paddingIcon(EdgeInsets.zero)
..size(16))
.build()),
Padding(
padding: EdgeInsets.only(right: 4, left: 8),
child: Text(
'${_presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag())}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail))),
(ButtonBuilder(_imagePaths.icChevron)
..paddingIcon(EdgeInsets.zero)
..size(16))
..paddingIcon(EdgeInsets.zero)
..size(16))
.build()),
Padding(
padding: EdgeInsets.only(right: 4, left: 8),
child: Text(
'${_presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag())}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail))),
(ButtonBuilder(_imagePaths.icChevron)
..paddingIcon(EdgeInsets.zero)
..size(16))
.build(),
],
)
),
subtitle: Transform(
transform: Matrix4.translationValues(-8.0, 8.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.zero,
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: AppColor.colorNameEmail),
TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: AppColor.colorNameEmail)).build()
: Text(
'${_presentationEmail.getEmailTitle()}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail))
],
)
),
subtitle: Transform(
transform: Matrix4.translationValues(-8.0, 8.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.zero,
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: AppColor.colorNameEmail),
TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: AppColor.colorNameEmail)).build()
: Text(
'${_presentationEmail.getEmailTitle()}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail))
),
if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
Container(
margin: EdgeInsets.only(left: 8),
padding: EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
constraints: BoxConstraints(maxWidth: 100),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColor.backgroundCounterMailboxColor),
child: Text(
'${_presentationEmail.mailboxName}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
)
),
if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
Container(
margin: EdgeInsets.only(left: 8),
padding: EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
constraints: BoxConstraints(maxWidth: 100),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColor.backgroundCounterMailboxColor),
child: Text(
'${_presentationEmail.mailboxName}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
)
),
if (_presentationEmail.isFlaggedEmail() )
(ButtonBuilder(_imagePaths.icStar)
..paddingIcon(EdgeInsets.zero)
..size(15))
.build(),
],
)),
Padding(
if (_presentationEmail.isFlaggedEmail() )
(ButtonBuilder(_imagePaths.icStar)
..paddingIcon(EdgeInsets.zero)
..size(15))
.build(),
],
)),
Padding(
padding: EdgeInsets.only(top: 8),
child: Row(children: [
Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
@@ -178,27 +181,124 @@ class EmailTileBuilder {
style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail))
),
]))
],
)
),
],
)
),
Padding(
),
Padding(
padding: EdgeInsets.only(top: 12, right: 12),
child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
]),
)
)
]),
);
}
Widget _buildAvatarIcon() {
Widget _buildListTileForDesktop() {
return InkWell(
onTap: () => _onOpenEmailActionClick?.call(_presentationEmail),
onLongPress: () => _onSelectEmailActionClick?.call(_presentationEmail),
child: Column(children: [
Row(children: [
Container(
padding: EdgeInsets.only(left: 16, right: 16),
alignment: Alignment.center,
child: _presentationEmail.isUnReadEmail()
? SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)
: SizedBox(width: 9)),
buildIconWeb(
icon: SvgPicture.asset(
_presentationEmail.isFlaggedEmail() ? _imagePaths.icStar : _imagePaths.icUnStar,
width: 20,
height: 20,
fit: BoxFit.fill),
tooltip: _presentationEmail.isFlaggedEmail() ? AppLocalizations.of(_context).starred : AppLocalizations.of(_context).not_starred,
onTap: () => _onMarkAsStarActionClick?.call(_presentationEmail)),
SizedBox(width: 8),
_buildAvatarIcon(
iconSize: 32,
iconSizeSelect: 32,
textStyle: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Colors.white),
paddingIconSelect: EdgeInsets.all(5)),
SizedBox(width: 10),
Container(width: 180, child: _isSearchEnabled
? RichTextBuilder(
_getInformationSender(),
'${_searchQuery!.value}',
TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
TextStyle(fontSize: 15, color: AppColor.colorNameEmail, backgroundColor: AppColor.bgWordSearch, fontWeight: FontWeight.w600)).build()
: Text('${_getInformationSender()}',
maxLines: 1,
overflow: kIsWeb ? null : TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)),
),
SizedBox(width: 16),
Container(width: 150, child: _isSearchEnabled
? RichTextBuilder(
'${_presentationEmail.getEmailTitle()}',
'${_searchQuery!.value}',
TextStyle(fontSize: 13, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: AppColor.colorNameEmail)).build()
: Text('${_presentationEmail.getEmailTitle()}',
maxLines: 1,
overflow: kIsWeb ? null : TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
),
SizedBox(width: 12),
Expanded(flex: 3, child: _isSearchEnabled
? RichTextBuilder(
'${_presentationEmail.getPartialContent()}',
'${_searchQuery!.value}',
TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.normal),
TextStyle(fontSize: 13, color: AppColor.colorContentEmail, backgroundColor: AppColor.bgWordSearch)).build()
: Text('${_presentationEmail.getPartialContent()}',
maxLines: 1,
overflow: kIsWeb ? null : TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.normal))
),
SizedBox(width: 10),
if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
Container(
margin: EdgeInsets.only(left: 8),
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 3),
constraints: BoxConstraints(maxWidth: 100),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.backgroundCounterMailboxColor),
child: Text('${_presentationEmail.mailboxName}',
maxLines: 1,
overflow: kIsWeb ? null: TextOverflow.ellipsis,
style: TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
)
),
if (_presentationEmail.hasAttachment == true)
Padding(padding: EdgeInsets.only(left: 8),
child: (ButtonBuilder(_imagePaths.icAttachment)
..paddingIcon(EdgeInsets.zero)
..size(16))
.build()),
Padding(padding: EdgeInsets.only(right: 20, left: 8),
child: Text('${_presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag())}',
maxLines: 1,
overflow: kIsWeb ? null: TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail))),
]),
Padding(
padding: EdgeInsets.only(top: 10, bottom: 10, left: 70),
child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
]),
);
}
Widget _buildAvatarIcon({
double? iconSize,
double? iconSizeSelect,
EdgeInsets? paddingIconSelect,
TextStyle? textStyle
}) {
if (_selectModeAll == SelectMode.ACTIVE) {
return AnimatedSwitcher(
duration: Duration(milliseconds: 600),
transitionBuilder: _transitionBuilder,
child: (IconBuilder(_presentationEmail.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected)
..padding(EdgeInsets.all(14))
..size(GetPlatform.isWeb ? 48 : 56)
..padding(paddingIconSelect ?? EdgeInsets.all(14))
..size(iconSize ?? (GetPlatform.isWeb ? 48 : 56))
..addOnTapActionClick(() {
if (_selectModeAll == SelectMode.ACTIVE && _onSelectEmailActionClick != null) {
_onSelectEmailActionClick!(_presentationEmail);
@@ -208,8 +308,9 @@ class EmailTileBuilder {
} else {
return (AvatarBuilder()
..text('${_presentationEmail.getAvatarText()}')
..size(GetPlatform.isWeb ? 48 : 56)
..size(iconSize ?? (GetPlatform.isWeb ? 48 : 56))
..textColor(Colors.white)
..addTextStyle(textStyle)
..avatarColor(_presentationEmail.avatarColors))
.build();
}
@@ -240,4 +341,6 @@ class EmailTileBuilder {
}
return '${_presentationEmail.getSenderName()}';
}
bool get _isSearchEnabled => _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty;
}
lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart
-82
View File
@@ -1,82 +0,0 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
typedef OnOpenSearchViewAction = Function();
class SearchBarThreadViewWidget {
OnOpenSearchViewAction? _onOpenSearchViewAction;
final ImagePaths _imagePaths;
double? _heightSearchBar;
EdgeInsets? _padding;
EdgeInsets? _margin;
String? _hintTextSearch;
SearchBarThreadViewWidget(this._imagePaths);
void addOnOpenSearchViewAction(OnOpenSearchViewAction onOpenSearchViewAction) {
_onOpenSearchViewAction = onOpenSearchViewAction;
}
void setHeightSearchBar(double heightSearchBar) {
_heightSearchBar = heightSearchBar;
}
void addPadding(EdgeInsets padding) {
_padding = padding;
}
void addMargin(EdgeInsets margin) {
_margin = margin;
}
void hintTextSearch(String text) {
_hintTextSearch = text;
}
Widget build() {
return GestureDetector(
onTap: () => _onOpenSearchViewAction?.call(),
child: Container(
key: Key('search_bar_widget'),
alignment: Alignment.topCenter,
height: _heightSearchBar ?? 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColor.colorBgSearchBar),
padding: _padding ?? EdgeInsets.zero,
margin: _margin ?? EdgeInsets.only(left: 16, right: 16, bottom: 10),
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_buildSearchButton(),
Expanded(child: Text(
_hintTextSearch ?? '',
maxLines: 1,
style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar)))
]
)
)
),
);
}
Widget _buildSearchButton() {
return Material(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
child: Padding(
padding: EdgeInsets.only(left: 2),
child: IconButton(
icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill),
onPressed: () => _onOpenSearchViewAction?.call()
)
)
);
}
}