[BUG] Some button of app bar in email view, thread view and composer view quite hard to click

This commit is contained in:
dab246
2021-10-04 15:41:10 +07:00
committed by Dat H. Pham
parent 50bf856688
commit 2362b5ad55
7 changed files with 168 additions and 111 deletions
@@ -52,7 +52,7 @@ class ComposerView extends GetWidget<ComposerController> {
Widget _buildTopBar(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: Obx(() => (TopBarComposerWidgetBuilder(imagePaths, controller.isEnableEmailSendButton.value)
..addSendEmailActionClick(() => controller.sendEmailAction(context))
..addAttachFileActionClick(() => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context)))
@@ -2,6 +2,7 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
typedef OnBackActionClick = void Function();
typedef OnSendEmailActionClick = void Function();
@@ -34,7 +35,6 @@ class TopBarComposerWidgetBuilder {
key: Key('top_bar_composer_widget'),
alignment: Alignment.center,
padding: EdgeInsets.zero,
color: Colors.white,
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
@@ -53,14 +53,15 @@ class TopBarComposerWidgetBuilder {
}
Widget _buildBackButton() {
return ButtonBuilder(_imagePaths.icComposerClose)
.padding(5)
.size(30)
.onPressActionClick(() {
return IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {
if (_onBackActionClick != null) {
_onBackActionClick!();
}})
.build();
}
}
);
}
Widget _buildListOptionButton() {
@@ -68,26 +69,41 @@ class TopBarComposerWidgetBuilder {
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ButtonBuilder(_imagePaths.icComposerFileShare).key(Key('button_file_share')).build(),
SizedBox(width: 2),
ButtonBuilder(_imagePaths.icShare)
.key(Key('button_attachment'))
.onPressActionClick(() {
if (_onAttachFileActionClick != null) {
_onAttachFileActionClick!();
}})
.build(),
SizedBox(width: 2),
ButtonBuilder(_imagePaths.icComposerSend)
.key(Key('button_send_email'))
.color(_isEnableEmailSendButton ? AppColor.enableSendEmailButtonColor : AppColor.disableSendEmailButtonColor)
.onPressActionClick(() {
if (_onSendEmailActionClick != null && _isEnableEmailSendButton) {
_onSendEmailActionClick!();
}})
.build(),
SizedBox(width: 2),
ButtonBuilder(_imagePaths.icComposerMenu).key(Key('button_menu_composer')).build(),
IconButton(
key: Key('button_file_share'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icComposerFileShare, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {}
),
IconButton(
key: Key('button_attachment'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icShare, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {
if (_onAttachFileActionClick != null) {
_onAttachFileActionClick!();
}
}
),
IconButton(
key: Key('button_send_email'),
color: _isEnableEmailSendButton ? AppColor.enableSendEmailButtonColor : AppColor.disableSendEmailButtonColor,
icon: SvgPicture.asset(
_imagePaths.icComposerSend,
color: _isEnableEmailSendButton ? AppColor.enableSendEmailButtonColor : AppColor.disableSendEmailButtonColor,
fit: BoxFit.fill),
onPressed: () {
if (_onSendEmailActionClick != null) {
_onSendEmailActionClick!();
}
}
),
IconButton(
key: Key('button_menu_composer'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icComposerMenu, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {}
)
]
);
}
@@ -2,6 +2,7 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/main/routes/app_routes.dart';
@@ -50,7 +51,6 @@ class AppBarMailWidgetBuilder {
key: Key('app_bar_messenger_widget'),
alignment: Alignment.center,
padding: EdgeInsets.zero,
color: Colors.white,
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
@@ -70,13 +70,15 @@ class AppBarMailWidgetBuilder {
}
Widget _buildBackButton() {
return ButtonBuilder(_imagePaths.icBack)
.size(20)
.onPressActionClick(() {
return IconButton(
color: AppColor.appColor,
icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.appColor, fit: BoxFit.fill),
onPressed: () {
if (_onBackActionClick != null) {
_onBackActionClick!();
}})
.build();
}
}
);
}
Widget _buildListOptionButton() {
@@ -84,33 +86,44 @@ class AppBarMailWidgetBuilder {
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ButtonBuilder(_imagePaths.icTrash).key(Key('button_move_to_trash_email')).build(),
SizedBox(width: 10),
ButtonBuilder(_imagePaths.icEyeDisable)
.key(Key('button_mark_as_unread_email'))
.onPressActionClick(() {
IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icTrash, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {
if (_onBackActionClick != null) {
_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!);
}})
.build(),
SizedBox(width: 10),
ButtonBuilder((_presentationEmail != null && _presentationEmail!.isFlaggedEmail())
? _imagePaths.icFlagged
: _imagePaths.icFlag)
.key(Key('button_mark_as_star_email'))
.onPressActionClick(() {
}
}),
IconButton(
key: Key('button_mark_as_star_email'),
icon: SvgPicture.asset(
(_presentationEmail != null && _presentationEmail!.isFlaggedEmail())
? _imagePaths.icFlagged
: _imagePaths.icFlag,
fit: BoxFit.fill),
onPressed: () {
if (_markAsStarActionClick != null && _presentationEmail != null) {
_markAsStarActionClick!(_presentationEmail!);
}})
.build(),
SizedBox(width: 10),
ButtonBuilder(_imagePaths.icFolder)
.key(Key('button_move_to_mailbox_email'))
.onPressActionClick(() {
}
}),
IconButton(
key: Key('button_move_to_mailbox_email'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icFolder, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () {
if (_onMoveToMailboxActionClick != null && _presentationEmail != null) {
_onMoveToMailboxActionClick!(_presentationEmail!);
}})
.build(),
}
}),
]
);
}
@@ -22,7 +22,7 @@ class ThreadView extends GetWidget<ThreadController> {
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : AppColor.primaryLightColor,
backgroundColor: AppColor.primaryLightColor,
body: SafeArea(
right: false,
left: false,
@@ -34,9 +34,20 @@ class ThreadView extends GetWidget<ThreadController> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildAppBarThread(context),
_buildLoadingView(),
Expanded(child: _buildListEmail(context)),
_buildLoadingViewLoadMore()
Expanded(child: Container(
alignment: Alignment.center,
padding: EdgeInsets.zero,
color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : AppColor.primaryLightColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildLoadingView(),
Expanded(child: _buildListEmail(context)),
_buildLoadingViewLoadMore()
]
)
)),
]
)
)
@@ -59,19 +70,21 @@ class ThreadView extends GetWidget<ThreadController> {
Widget _buildAppBarNormal(BuildContext context) {
return Obx(() => Padding(
padding: EdgeInsets.only(left: 15, right: 12),
child: AppBarThreadWidgetBuilder(
context,
imagePaths,
responsiveUtils,
controller.mailboxDashBoardController.selectedMailbox.value,
controller.mailboxDashBoardController.userProfile.value)
.onOpenListMailboxActionClick(() => controller.openMailboxLeftMenu())
child: (AppBarThreadWidgetBuilder(
context,
imagePaths,
responsiveUtils,
controller.mailboxDashBoardController.selectedMailbox.value,
controller.mailboxDashBoardController.userProfile.value)
..onOpenUserInformationAction(() => {})
..onOpenSearchMailActionClick(() => {})
..onOpenListMailboxActionClick(() => controller.openMailboxLeftMenu()))
.build()));
}
Widget _buildAppBarSelectModeActive(BuildContext context) {
return Obx(() => Padding(
padding: EdgeInsets.only(left: 15, right: 12),
padding: EdgeInsets.only(left: 12, right: 12),
child: (AppBarThreadSelectModeActiveBuilder(
context,
imagePaths,
@@ -94,7 +107,7 @@ class ThreadView extends GetWidget<ThreadController> {
_markAsReadAction(context, listEmail),
_markAsStarAction(context, listEmail),
_moveToSpamAction(context, listEmail),
SizedBox(height: 30),
SizedBox(height: 20),
];
}
@@ -2,6 +2,7 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:model/email/presentation_email.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -50,7 +51,6 @@ class AppBarThreadSelectModeActiveBuilder {
key: Key('app_bar_thread_select_mode_active'),
alignment: Alignment.center,
padding: EdgeInsets.symmetric(vertical: 8),
color: Colors.white,
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
@@ -77,14 +77,15 @@ class AppBarThreadSelectModeActiveBuilder {
}
Widget _buildBackButton() {
return ButtonBuilder(_imagePaths.icComposerClose)
.padding(5)
.size(30)
.onPressActionClick(() {
return IconButton(
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onCloseActionClick != null) {
_onCloseActionClick!();
}})
.build();
_onCloseActionClick!()
}
}
);
}
Widget _buildListOptionButton() {
@@ -92,29 +93,44 @@ class AppBarThreadSelectModeActiveBuilder {
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ButtonBuilder(_imagePaths.icTrash).key(Key('button_remove_email_selected'))
.onPressActionClick(() {
IconButton(
key: Key('button_remove_email_selected'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icTrash, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onRemoveEmailActionClick != null) {
_onRemoveEmailActionClick!(_listEmail);
}})
.build(),
SizedBox(width: 10),
ButtonBuilder(_imagePaths.icEyeDisable).key(Key('button_unread_email_selected'))
.onPressActionClick(() {
_onRemoveEmailActionClick!(_listEmail)
}
}),
IconButton(
key: Key('button_unread_email_selected'),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icEyeDisable, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onMarkAsEmailReadActionClick != null) {
_onMarkAsEmailReadActionClick!(_listEmail);
}})
.build(),
SizedBox(width: 10),
ButtonBuilder(_imagePaths.icComposerMenu).key(Key('button_menu_select_email'))
.onPressActionClick(() {
if (_onOpenContextMenuActionClick != null) {
_onOpenContextMenuActionClick!(_listEmail);
}})
.onTapActionClick((details) {
_onMarkAsEmailReadActionClick!(_listEmail)
}
}),
GestureDetector(
key: Key('button_menu_select_email'),
onTap: () => {
if (_onOpenContextMenuActionClick != null && _responsiveUtils.isMobile(_context)) {
_onOpenContextMenuActionClick!(_listEmail)
}
},
child: Padding(
padding: EdgeInsets.all(8),
child: SvgPicture.asset(
_imagePaths.icComposerMenu,
color: AppColor.baseTextColor,
width: 24,
height: 24,
fit: BoxFit.fill),
),
onTapDown: (detail) {
if (_onOpenPopupMenuActionClick != null && !_responsiveUtils.isMobile(_context)) {
final screenSize = MediaQuery.of(_context).size;
final offset = details.globalPosition;
final offset = detail.globalPosition;
final position = RelativeRect.fromLTRB(
offset.dx,
offset.dy,
@@ -122,8 +138,8 @@ class AppBarThreadSelectModeActiveBuilder {
screenSize.height - offset.dy,
);
_onOpenPopupMenuActionClick!(_listEmail, position);
}})
.build(),
}
})
]
);
}
@@ -31,30 +31,24 @@ class AppBarThreadWidgetBuilder {
this._userProfile,
);
AppBarThreadWidgetBuilder onOpenUserInformationAction(
void onOpenUserInformationAction(
OnOpenUserInformationActionClick onOpenUserInformationActionClick) {
_onOpenUserInformationActionClick = onOpenUserInformationActionClick;
return this;
}
AppBarThreadWidgetBuilder onOpenSearchMailActionClick(
OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
void onOpenSearchMailActionClick(OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
_onOpenSearchMailActionClick = onOpenSearchMailActionClick;
return this;
}
AppBarThreadWidgetBuilder onOpenListMailboxActionClick(
OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
void onOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
_onOpenListMailboxActionClick = onOpenListMailboxActionClick;
return this;
}
Widget build() {
return Container(
key: Key('app_bar_thread_widget'),
alignment: Alignment.center,
padding: EdgeInsets.only(top: 8, bottom: 2),
color: Colors.white,
padding: EdgeInsets.only(top: 8, bottom: 8),
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
@@ -88,7 +82,8 @@ class AppBarThreadWidgetBuilder {
return Padding(
padding: EdgeInsets.only(left: 16),
child: IconButton(
icon: SvgPicture.asset(_imagePaths.icSearch, width: 24, height: 24, fit: BoxFit.fill),
color: AppColor.baseTextColor,
icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
onPressed: () => {
if (_onOpenSearchMailActionClick != null) {
_onOpenSearchMailActionClick!()
@@ -132,10 +132,14 @@ class EmailTileBuilder {
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 12, color: AppColor.baseTextColor))),
if (_presentationEmail.hasAttachment == true) ButtonBuilder(_imagePaths.icShare).padding(2).build(),
SizedBox(width: 2),
if (_presentationEmail.hasAttachment == true)
ButtonBuilder(_imagePaths.icShare)
.padding(5)
.size(20)
.build(),
ButtonBuilder(_presentationEmail.isFlaggedEmail() ? _imagePaths.icFlagged : _imagePaths.icFlag)
.padding(2)
.padding(5)
.size(20)
.onPressActionClick(() {
if (_onMarkAsStarEmailActionClick != null) {
_onMarkAsStarEmailActionClick!(_presentationEmail);