From 2362b5ad55e6ae7a65d9d9b2d98a726216d511b1 Mon Sep 17 00:00:00 2001 From: dab246 Date: Mon, 4 Oct 2021 15:41:10 +0700 Subject: [PATCH] [BUG] Some button of app bar in email view, thread view and composer view quite hard to click --- .../composer/presentation/composer_view.dart | 2 +- .../top_bar_composer_widget_builder.dart | 70 +++++++++++------- .../widgets/app_bar_mail_widget_builder.dart | 67 ++++++++++------- .../thread/presentation/thread_view.dart | 39 ++++++---- ...bar_thread_select_mode_active_builder.dart | 74 +++++++++++-------- .../app_bar_thread_widget_builder.dart | 17 ++--- .../widgets/email_tile_builder.dart | 10 ++- 7 files changed, 168 insertions(+), 111 deletions(-) diff --git a/lib/features/composer/presentation/composer_view.dart b/lib/features/composer/presentation/composer_view.dart index 917a57c70..4bece3a2f 100644 --- a/lib/features/composer/presentation/composer_view.dart +++ b/lib/features/composer/presentation/composer_view.dart @@ -52,7 +52,7 @@ class ComposerView extends GetWidget { 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))) diff --git a/lib/features/composer/presentation/widgets/top_bar_composer_widget_builder.dart b/lib/features/composer/presentation/widgets/top_bar_composer_widget_builder.dart index 1437206d4..07dc388b4 100644 --- a/lib/features/composer/presentation/widgets/top_bar_composer_widget_builder.dart +++ b/lib/features/composer/presentation/widgets/top_bar_composer_widget_builder.dart @@ -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: () {} + ) ] ); } diff --git a/lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart b/lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart index aa038d58d..b3b6c431a 100644 --- a/lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart +++ b/lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart @@ -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(), + } + }), ] ); } diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index acad05173..aa5f6a9d1 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -22,7 +22,7 @@ class ThreadView extends GetWidget { 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 { 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 { 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 { _markAsReadAction(context, listEmail), _markAsStarAction(context, listEmail), _moveToSpamAction(context, listEmail), - SizedBox(height: 30), + SizedBox(height: 20), ]; } diff --git a/lib/features/thread/presentation/widgets/app_bar_thread_select_mode_active_builder.dart b/lib/features/thread/presentation/widgets/app_bar_thread_select_mode_active_builder.dart index 79da0ac92..cb29d9a00 100644 --- a/lib/features/thread/presentation/widgets/app_bar_thread_select_mode_active_builder.dart +++ b/lib/features/thread/presentation/widgets/app_bar_thread_select_mode_active_builder.dart @@ -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(), + } + }) ] ); } diff --git a/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart b/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart index 08d909087..c4d11d0f7 100644 --- a/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart +++ b/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart @@ -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!() diff --git a/lib/features/thread/presentation/widgets/email_tile_builder.dart b/lib/features/thread/presentation/widgets/email_tile_builder.dart index b1697fb3c..0120b70da 100644 --- a/lib/features/thread/presentation/widgets/email_tile_builder.dart +++ b/lib/features/thread/presentation/widgets/email_tile_builder.dart @@ -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);