TF-2975 Change the layout main screen in mobile app

This commit is contained in:
dab246
2024-08-06 17:05:55 +07:00
committed by Dat H. Pham
parent dfa9fef124
commit 252df057ba
9 changed files with 194 additions and 94 deletions
@@ -30,13 +30,13 @@ class SearchBarView extends StatelessWidget {
onTap: onOpenSearchViewAction,
mouseCursor: SystemMouseCursors.text,
splashColor: Colors.transparent,
borderRadius: const BorderRadius.all(Radius.circular(12)),
borderRadius: const BorderRadius.all(Radius.circular(10)),
child: Container(
alignment: Alignment.center,
height: 40,
height: 44,
width: double.infinity,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
borderRadius: BorderRadius.all(Radius.circular(10)),
color: AppColor.colorBgSearchBar
),
child: Row(
@@ -45,6 +45,7 @@ class SearchBarView extends StatelessWidget {
TMailButtonWidget.fromIcon(
icon: imagePaths.icSearchBar,
backgroundColor: Colors.transparent,
iconColor: AppColor.colorTextBody,
onTapActionCallback: onOpenSearchViewAction
),
Expanded(
@@ -19,16 +19,18 @@ class MobileAppBarThreadWidgetStyle {
return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
}
}
static const EdgeInsetsGeometry mailboxMenuPadding = EdgeInsets.all(5);
static const EdgeInsetsGeometry titlePadding = EdgeInsets.symmetric(horizontal: 16);
static const TextStyle editButtonStyle = TextStyle(
fontSize: 17,
color: AppColor.primaryColor
);
static const TextStyle emailCounterTitleStyle = TextStyle(
fontSize: 17,
color: AppColor.primaryColor
);
static const TextStyle titleTextStyle = TextStyle(
fontSize: 21,
color: Colors.black,
fontWeight: FontWeight.bold
);
static Color getFilterButtonColor(FilterMessageOption option) {
return option == FilterMessageOption.all
? AppColor.colorFilterMessageDisabled
@@ -718,10 +718,6 @@ class ThreadController extends BaseController with EmailActionController {
}
}
void enableSelectionEmail() {
mailboxDashBoardController.currentSelectMode.value = SelectMode.ACTIVE;
}
void setSelectAllEmailAction() {
final newEmailList = mailboxDashBoardController.emailsInCurrentMailbox
.map((email) => email.toSelectedEmail(selectMode: SelectMode.ACTIVE))
@@ -74,7 +74,6 @@ class ThreadView extends GetWidget<ThreadController>
filterOption: controller.mailboxDashBoardController.filterMessageOption.value,
openMailboxAction: controller.openMailboxLeftMenu,
cancelEditThreadAction: controller.cancelSelectEmail,
editThreadAction: controller.enableSelectionEmail,
emailSelectionAction: (actionType, selectionEmail) {
return controller.pressEmailSelectionAction(
context,
@@ -11,7 +11,6 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/web_a
typedef OnPopupMenuFilterEmailAction = void Function(FilterMessageOption, RelativeRect);
typedef OnContextMenuFilterEmailAction = void Function(FilterMessageOption);
typedef OnEditThreadAction = void Function();
typedef OnOpenMailboxMenuActionClick = void Function();
typedef OnCancelEditThreadAction = void Function();
typedef OnEmailSelectionAction = void Function(EmailActionType, List<PresentationEmail>);
@@ -20,7 +19,6 @@ class AppBarThreadWidget extends StatelessWidget {
final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
final OnOpenMailboxMenuActionClick openMailboxAction;
final OnEditThreadAction editThreadAction;
final OnCancelEditThreadAction cancelEditThreadAction;
final OnEmailSelectionAction emailSelectionAction;
final PresentationMailbox? mailboxSelected;
@@ -35,7 +33,6 @@ class AppBarThreadWidget extends StatelessWidget {
required this.selectMode,
required this.filterOption,
required this.openMailboxAction,
required this.editThreadAction,
required this.cancelEditThreadAction,
required this.emailSelectionAction,
this.onPopupMenuFilterEmailAction,
@@ -52,7 +49,6 @@ class AppBarThreadWidget extends StatelessWidget {
selectMode: selectMode,
filterOption: filterOption,
openMailboxAction: openMailboxAction,
editThreadAction: editThreadAction,
cancelEditThreadAction: cancelEditThreadAction,
emailSelectionAction: emailSelectionAction,
onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction,
@@ -66,7 +62,6 @@ class AppBarThreadWidget extends StatelessWidget {
selectMode: selectMode,
filterOption: filterOption,
openMailboxAction: openMailboxAction,
editThreadAction: editThreadAction,
cancelEditThreadAction: cancelEditThreadAction,
onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction,
onContextMenuFilterEmailAction: onContextMenuFilterEmailAction,
@@ -0,0 +1,85 @@
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:model/email/presentation_email.dart';
import 'package:model/mailbox/presentation_mailbox.dart';
import 'package:model/mailbox/select_mode.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
import 'package:tmail_ui_user/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart';
import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class DefaultMobileAppBarThreadWidget extends StatelessWidget {
final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
final PresentationMailbox? mailboxSelected;
final List<PresentationEmail> listEmailSelected;
final SelectMode selectMode;
final FilterMessageOption filterOption;
final OnOpenMailboxMenuActionClick openMailboxAction;
final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
final OnCancelEditThreadAction cancelEditThreadAction;
DefaultMobileAppBarThreadWidget({
super.key,
required this.listEmailSelected,
required this.mailboxSelected,
required this.selectMode,
required this.filterOption,
required this.openMailboxAction,
required this.cancelEditThreadAction,
this.onPopupMenuFilterEmailAction,
this.onContextMenuFilterEmailAction,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Container(
color: MobileAppBarThreadWidgetStyle.backgroundColor,
padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight),
child: Row(
children: [
TMailButtonWidget.fromIcon(
key: const Key('mobile_mailbox_menu_button'),
icon: _imagePaths.icMenuDrawer,
backgroundColor: Colors.transparent,
padding: MobileAppBarThreadWidgetStyle.mailboxMenuPadding,
maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth,
tooltipMessage: AppLocalizations.of(context).openFolderMenu,
onTapActionCallback: openMailboxAction,
),
Expanded(
child: Padding(
padding: MobileAppBarThreadWidgetStyle.titlePadding,
child: Text(
mailboxSelected?.getDisplayName(context) ?? '',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: MobileAppBarThreadWidgetStyle.titleTextStyle
),
),
),
TMailButtonWidget.fromIcon(
key: const Key('mobile_filter_message_button'),
icon: _imagePaths.icFilter,
iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption),
backgroundColor: Colors.transparent,
maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth,
tooltipMessage: AppLocalizations.of(context).filter_messages,
onTapActionCallback: () => onContextMenuFilterEmailAction?.call(filterOption),
onTapActionAtPositionCallback: (position) => onPopupMenuFilterEmailAction?.call(filterOption, position),
),
]
),
);
});
}
}
@@ -1,40 +1,29 @@
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:model/email/presentation_email.dart';
import 'package:model/mailbox/presentation_mailbox.dart';
import 'package:model/mailbox/select_mode.dart';
import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
import 'package:tmail_ui_user/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart';
import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart';
import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/title_app_bar_thread_widget.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/default_mobile_app_bar_thread_widget.dart';
import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/selection_mobile_app_bar_thread_widget.dart';
class MobileAppBarThreadWidget extends StatelessWidget {
final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
final PresentationMailbox? mailboxSelected;
final List<PresentationEmail> listEmailSelected;
final SelectMode selectMode;
final FilterMessageOption filterOption;
final OnOpenMailboxMenuActionClick openMailboxAction;
final OnEditThreadAction editThreadAction;
final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
final OnCancelEditThreadAction cancelEditThreadAction;
MobileAppBarThreadWidget({
const MobileAppBarThreadWidget({
super.key,
required this.listEmailSelected,
required this.mailboxSelected,
required this.selectMode,
required this.filterOption,
required this.openMailboxAction,
required this.editThreadAction,
required this.cancelEditThreadAction,
this.onPopupMenuFilterEmailAction,
this.onContextMenuFilterEmailAction,
@@ -42,66 +31,29 @@ class MobileAppBarThreadWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Container(
color: MobileAppBarThreadWidgetStyle.backgroundColor,
padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight),
child: Stack(
alignment: AlignmentDirectional.center,
children: [
if (selectMode == SelectMode.INACTIVE)
PositionedDirectional(
start: 0,
child: TMailButtonWidget.fromText(
key: const Key('selection_thread_button'),
text: AppLocalizations.of(context).edit,
textStyle: MobileAppBarThreadWidgetStyle.editButtonStyle,
backgroundColor: Colors.transparent,
maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth,
maxLines: 1,
tooltipMessage: AppLocalizations.of(context).edit,
onTapActionCallback: editThreadAction,
),
)
else
PositionedDirectional(
start: 0,
child: TMailButtonWidget(
key: const Key('cancel_selection_thread_button'),
text: '${listEmailSelected.length}',
icon: _imagePaths.icBack,
iconColor: MobileAppBarThreadWidgetStyle.backButtonColor,
textStyle: MobileAppBarThreadWidgetStyle.emailCounterTitleStyle,
backgroundColor: Colors.transparent,
onTapActionCallback: cancelEditThreadAction,
),
),
Center(
child: TitleAppBarThreadWidget(
key: const Key('title_app_bar_thread'),
mailboxSelected: mailboxSelected,
filterOption: filterOption,
maxWidth: constraints.maxWidth - MobileAppBarThreadWidgetStyle.titleOffset,
openMailboxAction: openMailboxAction,
),
),
PositionedDirectional(
end: 0,
child: TMailButtonWidget.fromIcon(
key: const Key('filter_message_button'),
icon: _imagePaths.icFilter,
iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption),
backgroundColor: Colors.transparent,
maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth,
tooltipMessage: AppLocalizations.of(context).filter_messages,
onTapActionCallback: () => onContextMenuFilterEmailAction?.call(filterOption),
onTapActionAtPositionCallback: (position) => onPopupMenuFilterEmailAction?.call(filterOption, position),
),
),
]
),
if (selectMode == SelectMode.ACTIVE) {
return SelectionMobileAppBarThreadWidget(
key: const Key('selection_mobile_app_bar_thread_widget'),
listEmailSelected: listEmailSelected,
mailboxSelected: mailboxSelected,
selectMode: selectMode,
filterOption: filterOption,
cancelEditThreadAction: cancelEditThreadAction,
onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction,
onContextMenuFilterEmailAction: onContextMenuFilterEmailAction,
);
});
} else {
return DefaultMobileAppBarThreadWidget(
key: const Key('default_mobile_app_bar_thread_widget'),
listEmailSelected: listEmailSelected,
mailboxSelected: mailboxSelected,
selectMode: selectMode,
filterOption: filterOption,
openMailboxAction: openMailboxAction,
cancelEditThreadAction: cancelEditThreadAction,
onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction,
onContextMenuFilterEmailAction: onContextMenuFilterEmailAction,
);
}
}
}
@@ -0,0 +1,72 @@
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:model/email/presentation_email.dart';
import 'package:model/mailbox/presentation_mailbox.dart';
import 'package:model/mailbox/select_mode.dart';
import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
import 'package:tmail_ui_user/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart';
import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class SelectionMobileAppBarThreadWidget extends StatelessWidget {
final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
final PresentationMailbox? mailboxSelected;
final List<PresentationEmail> listEmailSelected;
final SelectMode selectMode;
final FilterMessageOption filterOption;
final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
final OnCancelEditThreadAction cancelEditThreadAction;
SelectionMobileAppBarThreadWidget({
super.key,
required this.listEmailSelected,
required this.mailboxSelected,
required this.selectMode,
required this.filterOption,
required this.cancelEditThreadAction,
this.onPopupMenuFilterEmailAction,
this.onContextMenuFilterEmailAction,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Container(
color: MobileAppBarThreadWidgetStyle.backgroundColor,
padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight),
child: Row(
children: [
TMailButtonWidget(
key: const Key('mobile_cancel_selection_thread_button'),
text: '${listEmailSelected.length}',
icon: _imagePaths.icBack,
iconColor: MobileAppBarThreadWidgetStyle.backButtonColor,
textStyle: MobileAppBarThreadWidgetStyle.emailCounterTitleStyle,
backgroundColor: Colors.transparent,
onTapActionCallback: cancelEditThreadAction,
),
const Spacer(),
TMailButtonWidget.fromIcon(
key: const Key('mobile_filter_message_button'),
icon: _imagePaths.icFilter,
iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption),
backgroundColor: Colors.transparent,
maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth,
tooltipMessage: AppLocalizations.of(context).filter_messages,
onTapActionCallback: () => onContextMenuFilterEmailAction?.call(filterOption),
onTapActionAtPositionCallback: (position) => onPopupMenuFilterEmailAction?.call(filterOption, position),
),
]
),
);
});
}
}
@@ -15,7 +15,6 @@ class WebAppBarThreadWidget extends StatelessWidget {
final SelectMode selectMode;
final FilterMessageOption filterOption;
final OnOpenMailboxMenuActionClick openMailboxAction;
final OnEditThreadAction editThreadAction;
final OnCancelEditThreadAction cancelEditThreadAction;
final OnEmailSelectionAction emailSelectionAction;
final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
@@ -28,7 +27,6 @@ class WebAppBarThreadWidget extends StatelessWidget {
required this.selectMode,
required this.filterOption,
required this.openMailboxAction,
required this.editThreadAction,
required this.cancelEditThreadAction,
required this.emailSelectionAction,
this.onPopupMenuFilterEmailAction,