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

TF-467 Apply new UI for threadView

Browse Source
This commit is contained in:
dab246
2022-04-08 22:28:38 +07:00
committed by Dat H. Pham
parent 09be1eb833
commit 8248ad2f48
12 changed files with 233 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/utils/responsive_utils.dart
+2 -1
View File
@@ -9,7 +9,8 @@ class ResponsiveUtils {
final int minTabletLargeWidth = 900;
final double defaultSizeDrawerWidthMobileTablet = 375;
final double defaultSizeDrawerWidthWeb = 262;
final double defaultSizeDrawerWidthWeb = 320;
final double defaultSizeMenuWidthWeb = 262;
final double _loginTextFieldWidthSmallScreen = 280.0;
final double _loginTextFieldWidthLargeScreen = 320.0;
lib/features/destination_picker/presentation/destination_picker_view.dart
+5 -3
View File
@@ -1,4 +1,5 @@
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';
@@ -135,7 +136,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
Widget _buildSearchBarWidget(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
top: _responsiveUtils.isMobile(context) ? 12 : 0,
top: _responsiveUtils.isMobile(context) || kIsWeb ? 12 : 0,
left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16,
right: 16),
child: (SearchBarView(_imagePaths)
@@ -179,7 +180,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root, actions)
: SizedBox.shrink()),
if (actions == MailboxActions.create) SizedBox(height: 12),
if (actions != MailboxActions.create)
if (actions != MailboxActions.create && !kIsWeb)
Padding(
padding: EdgeInsets.only(left: 60),
child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
@@ -289,6 +290,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
alignment: Alignment.center,
margin: EdgeInsets.only(
left: !_responsiveUtils.isLandscapeMobile(context) ? 16 : 0,
top: kIsWeb ? 16 : 0,
right: 16),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
child: MediaQuery(
@@ -347,7 +349,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
..addPadding(EdgeInsets.zero)
..setMargin(EdgeInsets.only(right: 16))
..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 18, height: 18, fit: BoxFit.fill))
..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
..addOnClearTextSearchAction(() => controller.clearSearchText())
..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))
lib/features/mailbox/presentation/mailbox_controller.dart
+2
View File
@@ -234,6 +234,8 @@ class MailboxController extends BaseMailboxController {
mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode(
defaultMailbox: ExpandMode.COLLAPSE,
folderMailbox: ExpandMode.COLLAPSE);
} else {
mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode.initial();
}
}
}
lib/features/mailbox/presentation/mailbox_view.dart
+1 -1
View File
@@ -371,7 +371,7 @@ class MailboxView extends GetWidget<MailboxController> {
..addPadding(EdgeInsets.zero)
..setMargin(EdgeInsets.only(right: 16))
..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 18, height: 18, fit: BoxFit.fill))
..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
..addOnClearTextSearchAction(() => controller.clearSearchText())
..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))
lib/features/mailbox/presentation/mailbox_view_web.dart
+21 -21
View File
@@ -34,11 +34,11 @@ class MailboxView extends GetWidget<MailboxController> {
color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
child: Column(children: [
if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context),
SizedBox(height: 16),
Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()),
Expanded(child: Obx(() => Container(
color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
padding: EdgeInsets.zero,
margin: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 0),
child: RefreshIndicator(
color: AppColor.primaryColor,
onRefresh: () async => controller.refreshAllMailbox(),
@@ -122,14 +122,14 @@ class MailboxView extends GetWidget<MailboxController> {
Widget _buildLoadingView() {
return Obx(() => controller.viewState.value.fold(
(failure) => SizedBox.shrink(),
(success) => success is LoadingState
(failure) => SizedBox.shrink(),
(success) => success is LoadingState
? Center(child: Padding(
padding: EdgeInsets.only(top: 16),
child: SizedBox(
width: 24,
height: 24,
child: CupertinoActivityIndicator(color: AppColor.colorTextButton))))
padding: EdgeInsets.only(top: 16),
child: SizedBox(
width: 24,
height: 24,
child: CupertinoActivityIndicator(color: AppColor.colorTextButton))))
: SizedBox.shrink()));
}
@@ -166,17 +166,17 @@ class MailboxView extends GetWidget<MailboxController> {
Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root)
: SizedBox.shrink()),
Obx(() => !controller.isSearchActive()
? Row(children: [
Expanded(child: _buildSearchBarWidget(context)),
Padding(
padding: EdgeInsets.only(right: 8),
child: buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).new_mailbox,
onTap: () => controller.goToCreateNewMailboxView())),
])
: SizedBox.shrink()),
SizedBox(height: 8),
Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
Row(children: [
Expanded(child: _buildSearchBarWidget(context)),
Padding(
padding: EdgeInsets.only(right: 8),
child: buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).new_mailbox,
onTap: () => controller.goToCreateNewMailboxView())),
]),
]
);
}
@@ -262,7 +262,7 @@ class MailboxView extends GetWidget<MailboxController> {
Widget _buildInputSearchFormWidget(BuildContext context) {
return Padding(
padding: EdgeInsets.only(left: 8),
padding: EdgeInsets.only(left: 8, top: 16),
child: Row(
children: [
buildIconWeb(
@@ -273,7 +273,7 @@ class MailboxView extends GetWidget<MailboxController> {
..addPadding(EdgeInsets.zero)
..setMargin(EdgeInsets.only(right: 16))
..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 16, height: 16, fit: BoxFit.fill))
..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
..addOnClearTextSearchAction(() => controller.clearSearchText())
..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))
lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart
+10 -6
View File
@@ -173,13 +173,17 @@ class MailBoxFolderTileBuilder {
}
Color get backgroundColorItem {
if (kIsWeb) {
if (mailboxNodeSelected?.id == _mailboxNode.item.id) {
return AppColor.colorBgMailboxSelected;
}
return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white;
} else {
if (mailboxDisplayed == MailboxDisplayed.destinationPicker) {
return Colors.white;
} else {
if (kIsWeb) {
if (mailboxNodeSelected?.id == _mailboxNode.item.id) {
return AppColor.colorBgMailboxSelected;
}
return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white;
} else {
return Colors.white;
}
}
}
}
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart
+2 -4
View File
@@ -22,9 +22,7 @@ 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.defaultSizeDrawerWidthWeb),
mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
tabletLarge: SizedBox.shrink(),
desktop: SizedBox.shrink()
@@ -95,7 +93,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
Expanded(child: _buildThreadAndEmailContainer(context))
],
),
lib/features/thread/presentation/thread_controller.dart
+7 -3
View File
@@ -733,10 +733,14 @@ class ThreadController extends BaseController {
countMarkStarSuccess = success.countMarkStarSuccess;
}
if (currentContext != null && markStarAction != null) {
_appToast.showSuccessToast(markStarAction == MarkStarAction.unMarkStar
if (currentContext != null && markStarAction != null && currentOverlayContext != null) {
final message = markStarAction == MarkStarAction.unMarkStar
? AppLocalizations.of(currentContext!).marked_unstar_multiple_item(countMarkStarSuccess)
: AppLocalizations.of(currentContext!).marked_star_multiple_item(countMarkStarSuccess));
: AppLocalizations.of(currentContext!).marked_star_multiple_item(countMarkStarSuccess);
_appToast.showToastWithIcon(
currentOverlayContext!,
message: message,
icon: markStarAction == MarkStarAction.unMarkStar ? _imagePaths.icUnStar : _imagePaths.icStar);
}
_refreshEmailChanges();
lib/features/thread/presentation/thread_view.dart
+33 -33
View File
@@ -32,11 +32,11 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
resizeToAvoidBottomInset: false,
backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
body: Row(children: [
if (!kIsWeb && !_responsiveUtils.isMobile(context))
if ((!kIsWeb && !_responsiveUtils.isMobile(context)) || (kIsWeb && _responsiveUtils.isTabletLarge(context)))
VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2),
Expanded(child: SafeArea(
right: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context),
left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context),
right: _responsiveUtils.isLandscapeMobile(context),
left: _responsiveUtils.isLandscapeMobile(context),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -45,23 +45,20 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
color: Colors.white,
padding: EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 32),
child: _buildHeader(context)),
Padding(
padding: EdgeInsets.only(
left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0),
child: _buildSearchInputFormForMobile(context)),
Obx(() => !controller.isSearchActive() && !_responsiveUtils.isDesktop(context)
? _buildAppBarNormal(context)
: SizedBox.shrink()),
_buildSearchInputFormForMobile(context),
Container(
color: kIsWeb ? AppColor.colorBgDesktop : Colors.white,
padding: EdgeInsets.only(
left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0),
padding: EdgeInsets.zero,
child: _buildSearchButtonViewForMobile(context)),
Obx(() => controller.isMailboxTrash && controller.emailList.isNotEmpty && !controller.isSearchActive()
? _buildEmptyTrashButton(context)
: SizedBox.shrink()),
Expanded(child: Container(
padding: EdgeInsets.only(
left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0),
color: kIsWeb ? AppColor.colorBgDesktop : Colors.white,
margin: _responsiveUtils.isDesktop(context) ? EdgeInsets.all(16) : EdgeInsets.zero,
padding: _responsiveUtils.isDesktop(context) ? EdgeInsets.only(left: 32, right: 24, top: 16, bottom: 24) : EdgeInsets.zero,
child: Stack(children: [
Container(
alignment: Alignment.center,
@@ -81,7 +78,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
),
_buildSuggestionBox(context)
]))),
_buildListButtonSelectionForMobile(context),
if (!kIsWeb) _buildListButtonSelectionForMobile(context),
]
)
))
@@ -93,14 +90,10 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
Widget _buildHeader(BuildContext context) {
return Row(children: [
Obx(() => !controller.isSelectionEnabled() && _responsiveUtils.isDesktop(context)
? _buildListButtonTopBar(context)
: SizedBox.shrink()),
Obx(() => controller.isSelectionEnabled() && _responsiveUtils.isDesktop(context)
? _buildListButtonSelectionForDesktop(context)
: SizedBox.shrink()),
Obx(() => !controller.isSelectionEnabled() ? _buildListButtonTopBar(context) : SizedBox.shrink()),
Obx(() => controller.isSelectionEnabled() ? _buildListButtonSelectionForDesktop(context) : SizedBox.shrink()),
SizedBox(width: 16),
Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context) ? Spacer() : SizedBox.shrink()),
Obx(() => !controller.isSearchActive() ? Spacer() : SizedBox.shrink()),
Expanded(child: _buildSearchInputFormForDesktop(context)),
_buildSearchButtonViewForDesktop(context),
Padding(
@@ -124,7 +117,6 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
Widget _buildListButtonTopBar(BuildContext context) {
return Row(children: [
if (!controller.isSearchActive()) SizedBox(width: 16),
if (!controller.isSearchActive())
(ButtonBuilder(_imagePaths.icRefresh)
..key(Key('button_reload_thread'))
@@ -135,7 +127,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
..padding(EdgeInsets.symmetric(horizontal: 8, vertical: 8))
..onPressActionClick(() => controller.refreshAllEmail()))
.build(),
SizedBox(width: 16),
if (!controller.isSearchActive()) SizedBox(width: 16),
(ButtonBuilder(_imagePaths.icSelectAll)
..key(Key('button_select_all'))
..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorButtonHeaderThread))
@@ -198,7 +190,6 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
Widget _buildListButtonSelectionForDesktop(BuildContext context) {
return Row(children: [
SizedBox(width: 16),
buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).cancel,
@@ -265,7 +256,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
color: Colors.white,
padding: EdgeInsets.only(left: 16, right: 16, bottom: 10),
child: (SearchBarView(_imagePaths)
..hintTextSearch(AppLocalizations.of(context).hint_search_emails)
..hintTextSearch(kIsWeb ? AppLocalizations.of(context).search_emails : AppLocalizations.of(context).hint_search_emails)
..addOnOpenSearchViewAction(() => controller.enableSearch(context)))
.build());
} else {
@@ -277,9 +268,12 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
Widget _buildSearchInputFormForMobile(BuildContext context) {
return Obx(() {
if (controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) {
return _buildSearchForm(context);
return Column(children: [
_buildSearchForm(context),
Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
]);
} else {
return _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildAppBarNormal(context);
return SizedBox.shrink();
}
});
}
@@ -342,7 +336,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
controller.mailboxDashBoardController.searchInputController,
suggestionSearch: controller.mailboxDashBoardController.suggestionSearch,)
..addDecoration(BoxDecoration(color: Colors.white))
..setMargin(EdgeInsets.only(right: 10, top: _responsiveUtils.isTabletLarge(context) ? 32 : 0))
..setMargin(EdgeInsets.only(right: 10))
..setHintText(AppLocalizations.of(context).search_mail)
..addOnCancelSearchPressed(() => controller.disableSearch())
..addOnClearTextSearchAction(() => controller.mailboxDashBoardController.clearSearchText())
@@ -360,8 +354,10 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
controller.listEmailSelected,
controller.currentSelectMode.value,
controller.filterMessageOption.value)
..addOpenListMailboxActionClick(() => controller.openMailboxLeftMenu())
..addOpenMailboxMenuActionClick(() => controller.openMailboxLeftMenu())
..addOnEditThreadAction(() => controller.enableSelectionEmail())
..addOnEmailSelectionAction((actionType, selectionEmail) =>
controller.pressEmailSelectionAction(context, actionType, selectionEmail))
..addOnFilterEmailAction((filterMessageOption, position) =>
_responsiveUtils.isMobileDevice(context)
? controller.openFilterMessagesCupertinoActionSheet(
@@ -380,7 +376,9 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
return Obx(() {
if (!controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) {
return Container(
padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 80 : _responsiveUtils.isMobileDevice(context) ? 0 : 16),
padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() && controller.listEmailSelected.isNotEmpty
? 80
: _responsiveUtils.isMobileDevice(context) ? 0 : 16),
child: Align(
alignment: Alignment.bottomRight,
child: ScrollingFloatingButtonAnimated(
@@ -528,8 +526,8 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
Widget _buildListEmail(BuildContext context) {
return Container(
margin: _responsiveUtils.isDesktop(context)
? EdgeInsets.only(top: 16, bottom: 16)
: EdgeInsets.zero,
? EdgeInsets.symmetric(vertical: controller.isSelectionEnabled() ? 4 : 12, horizontal: 4)
: EdgeInsets.only(top: controller.isSearchActive() ? 8 : 0),
alignment: Alignment.center,
padding: EdgeInsets.zero,
color: Colors.white,
@@ -591,6 +589,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
physics: AlwaysScrollableScrollPhysics(),
key: PageStorageKey('list_presentation_email_in_threads'),
itemCount: listPresentationEmail.length,
padding: EdgeInsets.zero,
itemBuilder: (context, index) => Obx(() => (EmailTileBuilder(
context,
listPresentationEmail[index],
@@ -646,7 +645,6 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
return controller.emailListSearch.length > 0
? Container(
width: double.infinity,
margin: EdgeInsets.only(bottom: 16),
padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
decoration: BoxDecoration(
borderRadius: _responsiveUtils.isDesktop(context)
@@ -670,7 +668,9 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
borderRadius: BorderRadius.all(Radius.circular(14)),
border: Border.all(color: AppColor.colorLineLeftEmailView),
color: Colors.white),
margin: EdgeInsets.only(left: 16, right: 16,
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),
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart
+123 -44
View File
@@ -1,5 +1,6 @@
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';
@@ -9,14 +10,16 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
typedef OnFilterEmailAction = void Function(FilterMessageOption, RelativeRect? position);
typedef OnEditThreadAction = void Function();
typedef OnOpenListMailboxActionClick = void Function();
typedef OnOpenMailboxMenuActionClick = void Function();
typedef OnCancelEditThread = void Function();
typedef OnEmailSelectionAction = void Function(EmailActionType actionType, List<PresentationEmail>);
class AppBarThreadWidgetBuilder {
OnFilterEmailAction? _onFilterEmailAction;
OnOpenListMailboxActionClick? _onOpenListMailboxActionClick;
OnOpenMailboxMenuActionClick? _onOpenMailboxMenuActionClick;
OnEditThreadAction? _onEditThreadAction;
OnCancelEditThread? _onCancelEditThread;
OnEmailSelectionAction? _onEmailSelectionAction;
final BuildContext _context;
final ImagePaths _imagePaths;
@@ -40,8 +43,8 @@ class AppBarThreadWidgetBuilder {
_onFilterEmailAction = onFilterEmailAction;
}
void addOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
_onOpenListMailboxActionClick = onOpenListMailboxActionClick;
void addOpenMailboxMenuActionClick(OnOpenMailboxMenuActionClick actionClick) {
_onOpenMailboxMenuActionClick = actionClick;
}
void addOnEditThreadAction(OnEditThreadAction onEditThreadAction) {
@@ -52,6 +55,10 @@ class AppBarThreadWidgetBuilder {
_onCancelEditThread = onCancelEditThread;
}
void addOnEmailSelectionAction(OnEmailSelectionAction onEmailSelectionAction) {
_onEmailSelectionAction = onEmailSelectionAction;
}
Widget build() {
return Container(
key: Key('app_bar_thread_widget'),
@@ -61,36 +68,113 @@ class AppBarThreadWidgetBuilder {
padding: EdgeInsets.only(left: 8, top: 16, bottom: 8, right: 8),
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(children: [
Expanded(child: Stack(
alignment: Alignment.center,
children: [
if (_selectMode != SelectMode.ACTIVE)
Positioned(left: 0,child: _buildEditButton()),
if (_selectMode == SelectMode.ACTIVE)
Positioned(left: 0, child: _buildBackButton()),
if (_selectMode == SelectMode.ACTIVE)
Positioned(left: 40, child: _buildCountItemSelected()),
Positioned(right: 0, child: _buildFilterButton()),
_filterMessageOption.getTitle(_context).isNotEmpty
child: kIsWeb
? _selectMode == SelectMode.INACTIVE ? _buildBodyAppBarForWeb() : _buildBodyAppBarForWebSelection()
: _selectMode == SelectMode.INACTIVE ? _buildBodyAppBarForMobile() : _buildBodyAppBarForMobileSelection()
)
);
}
Widget _buildBodyAppBarForWeb() {
return Row(children: [
if (!_responsiveUtils.isTabletLarge(_context)) _buildMenuButton(),
if (_responsiveUtils.isTabletLarge(_context)) SizedBox(width: 16),
Expanded(child: Text(
'${_presentationMailbox?.name?.name.capitalizeFirstEach ?? ''}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 21, color: Colors.black, fontWeight: FontWeight.bold))),
_buildFilterButton(),
]);
}
Widget _buildBodyAppBarForWebSelection() {
return Row(children: [
buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
tooltip: AppLocalizations.of(_context).cancel,
onTap: () => _onCancelEditThread?.call()),
Expanded(child: Text(
AppLocalizations.of(_context).count_email_selected(_listSelectionEmail.length),
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton))),
buildIconWeb(
icon: SvgPicture.asset(_listSelectionEmail.isAllEmailRead ? _imagePaths.icUnread : _imagePaths.icRead, fit: BoxFit.fill),
tooltip: _listSelectionEmail.isAllEmailRead ? AppLocalizations.of(_context).unread : AppLocalizations.of(_context).read,
onTap: () => _onEmailSelectionAction?.call(
_listSelectionEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
_listSelectionEmail)),
buildIconWeb(
icon: SvgPicture.asset(_listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar, fit: BoxFit.fill),
tooltip: _listSelectionEmail.isAllEmailStarred ? AppLocalizations.of(_context).not_starred : AppLocalizations.of(_context).starred,
onTap: () => _onEmailSelectionAction?.call(
_listSelectionEmail.isAllEmailStarred ? EmailActionType.markAsUnStar : EmailActionType.markAsStar,
_listSelectionEmail)),
buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icMove, fit: BoxFit.fill),
tooltip: AppLocalizations.of(_context).move,
onTap: () => _onEmailSelectionAction?.call(EmailActionType.move, _listSelectionEmail)),
buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icDelete, fit: BoxFit.fill),
tooltip: _presentationMailbox?.role != PresentationMailbox.roleTrash
? AppLocalizations.of(_context).move_to_trash
: AppLocalizations.of(_context).delete_permanently,
onTap: () => _presentationMailbox?.role != PresentationMailbox.roleTrash
? _onEmailSelectionAction?.call(EmailActionType.moveToTrash, _listSelectionEmail)
: _onEmailSelectionAction?.call(EmailActionType.deletePermanently, _listSelectionEmail)),
]);
}
Widget _buildBodyAppBarForMobile() {
return Row(children: [
Expanded(child: Stack(
alignment: Alignment.center,
children: [
Positioned(left: 0,child: _buildEditButton()),
Positioned(right: 0, child: _buildFilterButton()),
_filterMessageOption.getTitle(_context).isNotEmpty
? Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Padding(
padding: EdgeInsets.only(left: 40, right: 40),
child: _buildContentCenterAppBar()),
padding: EdgeInsets.only(left: 40, right: 40),
child: _buildContentCenterAppBar()),
Transform(
transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
child: Text(
_filterMessageOption.getTitle(_context),
style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
child: Text(
_filterMessageOption.getTitle(_context),
style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
])
: Padding(
padding: EdgeInsets.only(left: 60, right: 40),
child: _buildContentCenterAppBar()),
]
))
])
)
);
]
))
]);
}
Widget _buildBodyAppBarForMobileSelection() {
return Row(children: [
Expanded(child: Stack(
alignment: Alignment.center,
children: [
Positioned(left: 0, child: _buildBackButton()),
Positioned(left: 40, child: _buildCountItemSelected()),
Positioned(right: 0, child: _buildFilterButton()),
_filterMessageOption.getTitle(_context).isNotEmpty
? Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Padding(
padding: EdgeInsets.only(left: 40, right: 40),
child: _buildContentCenterAppBar()),
Transform(
transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
child: Text(
_filterMessageOption.getTitle(_context),
style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
])
: Padding(
padding: EdgeInsets.only(left: 60, right: 40),
child: _buildContentCenterAppBar()),
]
))
]);
}
Widget _buildEditButton() {
@@ -145,21 +229,16 @@ class AppBarThreadWidgetBuilder {
);
}
Widget _buildMenuButton() {
return buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icMenuDrawer, fit: BoxFit.fill),
onTap:() => _onOpenMailboxMenuActionClick?.call());
}
Widget _buildBackButton() {
return Material(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
child: IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(
_imagePaths.icBack,
width: 20,
height: 20,
color: AppColor.colorTextButton,
fit: BoxFit.fill),
onPressed: () => _onCancelEditThread?.call()
)
);
return buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill),
onTap:() => _onCancelEditThread?.call());
}
Widget _buildCountItemSelected() {
@@ -177,8 +256,8 @@ class AppBarThreadWidgetBuilder {
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenListMailboxActionClick?.call() : null,
InkWell(
onTap: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenMailboxMenuActionClick?.call() : null,
child: Padding(
padding: !_responsiveUtils.isTabletLarge(_context) ? EdgeInsets.zero : EdgeInsets.only(bottom: 8, top: 8),
child: Container(
@@ -198,7 +277,7 @@ class AppBarThreadWidgetBuilder {
padding: EdgeInsets.zero,
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icChevronDown, width: 20, height: 16, fit: BoxFit.fill),
onPressed: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenListMailboxActionClick?.call() : null))
onPressed: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenMailboxMenuActionClick?.call() : null))
]
);
}
lib/features/thread/presentation/widgets/email_tile_builder.dart
+19 -7
View File
@@ -59,7 +59,7 @@ class EmailTileBuilder {
mobile: _buildListTile(),
desktop: Container(
margin: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.only(top: 3, left: 8, right: 8) : EdgeInsets.zero,
padding: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.symmetric(vertical: 10) : EdgeInsets.zero,
padding: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.symmetric(vertical: 8) : EdgeInsets.zero,
decoration: _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE
? BoxDecoration(
borderRadius: BorderRadius.circular(14),
@@ -73,8 +73,15 @@ class EmailTileBuilder {
Widget _buildListTile() {
return Container(
color: Colors.white,
padding: EdgeInsets.only(bottom: 10, left: 20, right: 6),
margin: kIsWeb && _selectModeAll == SelectMode.ACTIVE
? EdgeInsets.only(top: 3, left: 16, right: 16)
: EdgeInsets.zero,
padding: kIsWeb && _selectModeAll == SelectMode.ACTIVE
? EdgeInsets.only(top: 8, bottom: 16, right: 8)
: EdgeInsets.only(bottom: 10, left: 16, right: 16),
decoration: kIsWeb && _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE
? BoxDecoration(borderRadius: BorderRadius.circular(14), color: AppColor.colorItemEmailSelectedDesktop)
: BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.white),
alignment: Alignment.center,
child: Column(children: [
ListTile(
@@ -194,14 +201,19 @@ class EmailTileBuilder {
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail))
),
]))
])),
if (kIsWeb && _selectModeAll == SelectMode.INACTIVE)
Padding(
padding: EdgeInsets.only(top: 12),
child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
],
)
),
),
Padding(
padding: EdgeInsets.only(top: 12, right: 12),
child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
if (!kIsWeb)
Padding(
padding: EdgeInsets.only(top: 12, right: 12),
child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
]),
);
}
lib/features/thread/presentation/widgets/search_app_bar_widget.dart
+8 -15
View File
@@ -112,26 +112,19 @@ class SearchAppBarWidget {
}
Widget _buildBackButton() {
return Material(
shape: CircleBorder(),
color: Colors.transparent,
child: Padding(
padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(_context) ? 0 : 8),
child: IconButton(
splashRadius: 20,
icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
onPressed: () {
_searchInputController?.clear();
if (_onCancelSearchPressed != null) {
_onCancelSearchPressed!();
}
return buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
onTap: () {
_searchInputController?.clear();
if (_onCancelSearchPressed != null) {
_onCancelSearchPressed!();
}
)));
});
}
Widget _buildClearTextSearchButton() {
return buildIconWeb(
icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 12, height: 12, fit: BoxFit.fill),
icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 18, height: 18, fit: BoxFit.fill),
onTap: () {
_searchInputController?.clear();
_onClearTextSearchAction?.call();