diff --git a/assets/images/ic_chevron_down.svg b/assets/images/ic_chevron_down.svg new file mode 100644 index 000000000..d99665e95 --- /dev/null +++ b/assets/images/ic_chevron_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_filter.svg b/assets/images/ic_filter.svg new file mode 100644 index 000000000..c03b6edbe --- /dev/null +++ b/assets/images/ic_filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/lib/presentation/extensions/capitalize_extension.dart b/core/lib/presentation/extensions/capitalize_extension.dart index 339b20753..65d74dfc9 100644 --- a/core/lib/presentation/extensions/capitalize_extension.dart +++ b/core/lib/presentation/extensions/capitalize_extension.dart @@ -1,6 +1,6 @@ extension CapitalizeExtension on String { - String get inCaps => this.length > 0 ?'${this[0].toUpperCase()}${this.substring(1)}':''; + String get inCaps => this.length > 0 ?'${this[0].toUpperCase()}${this.toLowerCase().substring(1)}':''; String get allInCaps => this.toUpperCase(); String get capitalizeFirstEach => this.replaceAll(RegExp(' +'), ' ').split(" ").map((str) => str.inCaps).join(" "); } \ No newline at end of file diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 477159bb1..ccb81f780 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -64,6 +64,7 @@ extension AppColor on Color { static const lineItemListColor = Color(0xFF99A2AD); static const colorNameEmail = Color(0xFF000000); static const colorContentEmail = Color(0xFF6D7885); + static const colorTextButton = Color(0xFF007AFF); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index c65180df2..a6a6ddaa1 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -47,6 +47,8 @@ class ImagePaths { String get icUnStar => _getImagePath('ic_unstar.svg'); String get icAttachment => _getImagePath('ic_attachment.svg'); String get icChevron => _getImagePath('ic_chevron.svg'); + String get icChevronDown => _getImagePath('ic_chevron_down.svg'); + String get icFilter => _getImagePath('ic_filter.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index 0dc73e1a3..04936fbc4 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -1,9 +1,7 @@ import 'package:core/core.dart'; -import 'package:core/presentation/extensions/color_extension.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; -import 'package:model/email/presentation_email.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.dart'; import 'package:tmail_ui_user/features/thread/domain/state/search_more_email_state.dart'; @@ -44,7 +42,7 @@ class ThreadView extends GetWidget { Container( alignment: Alignment.center, padding: EdgeInsets.zero, - color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : AppColor.primaryLightColor, + color: Colors.white, child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, @@ -107,11 +105,8 @@ class ThreadView extends GetWidget { context, imagePaths, responsiveUtils, - controller.mailboxDashBoardController.selectedMailbox.value, - controller.mailboxDashBoardController.userProfile.value) - ..onOpenUserInformationAction(() => {}) - ..onOpenSearchMailActionClick(() => controller.enableSearch(context)) - ..onOpenListMailboxActionClick(() => controller.openMailboxLeftMenu())) + controller.mailboxDashBoardController.selectedMailbox.value) + ..addOpenListMailboxActionClick(() => controller.openMailboxLeftMenu())) .build(); } @@ -271,7 +266,7 @@ class ThreadView extends GetWidget { height: double.infinity, alignment: Alignment.center, padding: EdgeInsets.zero, - color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : Colors.white, + color: Colors.white, child: Obx(() { if (controller.isSearchActive()) { if (controller.mailboxDashBoardController.suggestionSearch.isNotEmpty) { @@ -332,9 +327,7 @@ class ThreadView extends GetWidget { itemBuilder: (context, index) => Obx(() => (EmailTileBuilder( context, imagePaths, - controller.getSelectMode(listPresentationEmail[index], controller.mailboxDashBoardController.selectedEmail.value), listPresentationEmail[index], - responsiveUtils, controller.mailboxDashBoardController.selectedMailbox.value?.role, controller.currentSelectMode.value, controller.mailboxDashBoardController.searchState.value.searchStatus, 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 a333375a1..9c9c19831 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 @@ -1,46 +1,35 @@ -import 'dart:ui'; 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/mailbox/presentation_mailbox.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; -typedef OnOpenSearchMailActionClick = void Function(); +typedef OnFilterEmailAction = void Function(); typedef OnOpenListMailboxActionClick = void Function(); -typedef OnOpenUserInformationActionClick = void Function(); class AppBarThreadWidgetBuilder { - OnOpenSearchMailActionClick? _onOpenSearchMailActionClick; + OnFilterEmailAction? _onFilterEmailAction; OnOpenListMailboxActionClick? _onOpenListMailboxActionClick; - OnOpenUserInformationActionClick? _onOpenUserInformationActionClick; final BuildContext _context; final ImagePaths _imagePaths; final ResponsiveUtils _responsiveUtils; final PresentationMailbox? _presentationMailbox; - final UserProfile? _userProfile; AppBarThreadWidgetBuilder( this._context, this._imagePaths, this._responsiveUtils, this._presentationMailbox, - this._userProfile, ); - void onOpenUserInformationAction( - OnOpenUserInformationActionClick onOpenUserInformationActionClick) { - _onOpenUserInformationActionClick = onOpenUserInformationActionClick; + void addOnFilterEmailAction(OnFilterEmailAction onFilterEmailAction) { + _onFilterEmailAction = onFilterEmailAction; } - void onOpenSearchMailActionClick(OnOpenSearchMailActionClick onOpenSearchMailActionClick) { - _onOpenSearchMailActionClick = onOpenSearchMailActionClick; - } - - void onOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) { + void addOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) { _onOpenListMailboxActionClick = onOpenListMailboxActionClick; } @@ -50,37 +39,38 @@ class AppBarThreadWidgetBuilder { alignment: Alignment.topCenter, color: Colors.white, margin: EdgeInsets.zero, - padding: EdgeInsets.only(left: 16, top: 16, bottom: 8, right: 16), + padding: EdgeInsets.only(left: 8, top: 16, bottom: 8, right: 8), child: MediaQuery( data: MediaQueryData(padding: EdgeInsets.zero), child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.start, children: [ - if (_responsiveUtils.isMobile(_context)) _buildIconUser(), + _buildEditButton(), Expanded(child: _buildContentCenterAppBar()), - _buildIconSearch(), + _buildFilterButton(), ] ) ) ); } - Widget _buildIconUser() { - return GestureDetector( - onTap: () => { - if (_onOpenUserInformationActionClick != null) { - _onOpenUserInformationActionClick!() - }}, - child: Padding( - padding: EdgeInsets.zero, - child: (AvatarBuilder() - ..text(_userProfile != null ? _userProfile!.getAvatarText() : '') - ..size(36)) - .build())); + Widget _buildEditButton() { + return Material( + borderRadius: BorderRadius.circular(12), + color: Colors.transparent, + child: Padding( + padding: EdgeInsets.only(right: 16), + child: TextButton( + onPressed: () {}, + child: Text( + AppLocalizations.of(_context).edit, + style: TextStyle(fontSize: 17, color: AppColor.colorTextButton), + ), + ) + ) + ); } - Widget _buildIconSearch() { + Widget _buildFilterButton() { return Material( borderRadius: BorderRadius.circular(12), color: Colors.transparent, @@ -88,12 +78,8 @@ class AppBarThreadWidgetBuilder { padding: EdgeInsets.only(left: 16), child: IconButton( color: AppColor.baseTextColor, - icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill), - onPressed: () => { - if (_onOpenSearchMailActionClick != null) { - _onOpenSearchMailActionClick!() - } - } + icon: SvgPicture.asset(_imagePaths.icFilter, color: AppColor.baseTextColor, fit: BoxFit.fill), + onPressed: () => _onFilterEmailAction?.call() ) ) ); @@ -101,56 +87,46 @@ class AppBarThreadWidgetBuilder { Widget _buildContentCenterAppBar() { return Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, children: [ GestureDetector( - onTap: () => { - if (_onOpenListMailboxActionClick != null) { - _onOpenListMailboxActionClick!() - }}, + onTap: () => _onOpenListMailboxActionClick?.call(), child: Padding( - padding: EdgeInsets.only(left: 16, right: 8), + padding: EdgeInsets.zero, child: Container( padding: EdgeInsets.zero, margin: EdgeInsets.zero, constraints: BoxConstraints(maxWidth: _getMaxWidthAppBarTitle()), child: Text( - '${ _presentationMailbox?.name?.name ?? ''}', + '${_presentationMailbox?.name?.name.capitalizeFirstEach ?? ''}', maxLines: 1, overflow: TextOverflow.ellipsis, - style: TextStyle(fontSize: 22, color: AppColor.titleAppBarMailboxListMail, fontWeight: FontWeight.w500)) + style: TextStyle(fontSize: 21, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700)) ))), - if(_presentationMailbox?.getCountUnReadEmails().isNotEmpty == true) - Container( - margin: EdgeInsets.zero, - padding: EdgeInsets.only(left: 8, right: 8, top: 2.5, bottom: 2.5), - decoration:BoxDecoration( - borderRadius: BorderRadius.circular(8), - color: AppColor.backgroundCounterMailboxColor), - child: Text( - '${_presentationMailbox?.getCountUnReadEmails() ?? ''} ${AppLocalizations.of(_context).unread_email_notification}', - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: TextStyle(fontSize: 10, color: AppColor.counterMailboxColor, fontWeight: FontWeight.w500), - )), + Transform( + transform: Matrix4.translationValues(-10.0, 0.0, 0.0), + child: Material( + borderRadius: BorderRadius.circular(12), + color: Colors.transparent, + child: IconButton( + padding: EdgeInsets.zero, + color: AppColor.baseTextColor, + icon: SvgPicture.asset(_imagePaths.icChevronDown, width: 20, height: 16, fit: BoxFit.fill), + onPressed: () => _onOpenListMailboxActionClick?.call()))) ] ); } double _getMaxWidthAppBarTitle() { var width = MediaQuery.of(_context).size.width; - var widthSiblingsWidget = _presentationMailbox?.getCountUnReadEmails().isNotEmpty == true - ? 150 - : 100; + var widthSiblingsWidget = 220; if (_responsiveUtils.isTablet(_context)) { width = width * 0.7; - widthSiblingsWidget = _presentationMailbox?.getCountUnReadEmails().isNotEmpty == true - ? 70 - : 0; + widthSiblingsWidget = 300; } else if (_responsiveUtils.isDesktop(_context)) { width = width * 0.2; - widthSiblingsWidget = _presentationMailbox?.getCountUnReadEmails().isNotEmpty == true - ? 50 - : 0; + widthSiblingsWidget = 300; } final maxWidth = width - widthSiblingsWidget; return maxWidth; diff --git a/lib/features/thread/presentation/widgets/email_tile_builder.dart b/lib/features/thread/presentation/widgets/email_tile_builder.dart index 4a5d0420b..6b29a0577 100644 --- a/lib/features/thread/presentation/widgets/email_tile_builder.dart +++ b/lib/features/thread/presentation/widgets/email_tile_builder.dart @@ -1,9 +1,7 @@ import 'dart:math'; -import 'dart:ui'; import 'package:core/core.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/widgets.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart'; import 'package:model/model.dart'; @@ -16,11 +14,9 @@ typedef OnMarkAsStarEmailActionClick = void Function(PresentationEmail selectedE class EmailTileBuilder { - final SelectMode _selectMode; final ImagePaths _imagePaths; final PresentationEmail _presentationEmail; final BuildContext _context; - final ResponsiveUtils _responsiveUtils; final SelectMode _selectModeAll; final Role? _mailboxRole; final SearchStatus _searchStatus; @@ -33,9 +29,7 @@ class EmailTileBuilder { EmailTileBuilder( this._context, this._imagePaths, - this._selectMode, this._presentationEmail, - this._responsiveUtils, this._mailboxRole, this._selectModeAll, this._searchStatus, @@ -66,7 +60,7 @@ class EmailTileBuilder { alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(0), - color: _getBackgroundColorItem()), + color: Colors.white), child: MediaQuery( data: MediaQueryData(padding: EdgeInsets.zero), child: Column(children: [ @@ -206,7 +200,7 @@ class EmailTileBuilder { if (_selectModeAll == SelectMode.ACTIVE) { return AnimatedSwitcher( duration: Duration(milliseconds: 600), - transitionBuilder: __transitionBuilder, + transitionBuilder: _transitionBuilder, child: _presentationEmail.selectMode == SelectMode.ACTIVE ? (IconBuilder(_imagePaths.icSelected) ..addOnTapActionClick(() { @@ -237,7 +231,7 @@ class EmailTileBuilder { } } - Widget __transitionBuilder(Widget widget, Animation animation) { + Widget _transitionBuilder(Widget widget, Animation animation) { final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation); return AnimatedBuilder( animation: rotateAnim, @@ -254,10 +248,6 @@ class EmailTileBuilder { ); } - Color _getBackgroundColorItem() { - return _responsiveUtils.isMobile(_context) ? AppColor.bgMailboxListMail : Colors.white; - } - String _getInformationSender() { if (_mailboxRole == PresentationMailbox.roleSent || _mailboxRole == PresentationMailbox.roleDrafts diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index b5a498d16..f941dd743 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -459,5 +459,10 @@ class AppLocalizations { name: 'results', ); } + + String get edit { + return Intl.message('Edit', + name: 'edit'); + } }