From f179a9a6a87c2a76ca2cf96794401d04c151badc Mon Sep 17 00:00:00 2001 From: dab246 Date: Fri, 30 May 2025 03:03:52 +0700 Subject: [PATCH] TF-3758 Update text style for folder item Signed-off-by: dab246 --- .../extensions/color_extension.dart | 2 + core/lib/presentation/utils/theme_utils.dart | 20 +++- .../mailbox/presentation/mailbox_view.dart | 55 ++++++--- .../styles/mailbox_item_widget_styles.dart | 4 + .../trailing_mailbox_item_widget_styles.dart | 2 + .../widgets/count_of_emails_widget.dart | 14 ++- .../presentation/widgets/folder_widget.dart | 44 +++---- .../widgets/folders_bar_widget.dart | 14 ++- .../widgets/label_mailbox_item_widget.dart | 19 ++- .../widgets/mailbox_category_widget.dart | 28 ++++- .../widgets/mailbox_expand_button.dart | 8 +- .../widgets/mailbox_icon_widget.dart | 13 ++- .../widgets/mailbox_item_widget.dart | 29 ++--- .../widgets/sending_queue_mailbox_widget.dart | 109 ++++++++++-------- .../widgets/trailing_mailbox_item_widget.dart | 16 ++- 15 files changed, 248 insertions(+), 129 deletions(-) diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index c7a85799d..1a52d90ed 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -254,6 +254,8 @@ extension AppColor on Color { static const blackAlpha40 = Color.fromRGBO(0, 0, 0, 0.4); static const blackAlpha20 = Color.fromRGBO(0, 0, 0, 0.2); static const textPrimary = Color(0xFF424244); + static const iconFolder = Color(0xFF297EF2); + static const folderDivider = Color(0xFFE4E8EC); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/core/lib/presentation/utils/theme_utils.dart b/core/lib/presentation/utils/theme_utils.dart index 44118c6b3..1e2bace32 100644 --- a/core/lib/presentation/utils/theme_utils.dart +++ b/core/lib/presentation/utils/theme_utils.dart @@ -222,7 +222,25 @@ class ThemeUtils { letterSpacing: 0.0, fontSize: fontSize ?? 15, height: 20 / (fontSize ?? 15), - color: color, + color: color ?? Colors.black, + ); + + static TextStyle textStyleInter500() => const TextStyle( + fontFamily: ConstantsUI.fontApp, + fontWeight: FontWeight.w500, + letterSpacing: 0.0, + fontSize: 14, + height: 18 / 14, + color: Colors.black, + ); + + static TextStyle textStyleInter400() => const TextStyle( + fontFamily: ConstantsUI.fontApp, + fontWeight: FontWeight.normal, + letterSpacing: 0.01, + fontSize: 13, + height: 16 / 13, + color: Colors.black, ); static TextStyle textStyleM3LabelLarge({Color? color}) => TextStyle( diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index ed430a6e4..021baa639 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -7,6 +7,7 @@ import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart'; @@ -38,7 +39,6 @@ class MailboxView extends BaseMailboxView { child: _buildListMailbox(context), ), ), - const Divider(color: AppColor.colorDividerHorizontal), const QuotasView(), Container( width: double.infinity, @@ -75,9 +75,10 @@ class MailboxView extends BaseMailboxView { } }), Obx(() { - if (controller.mailboxDashBoardController.listSendingEmails.isNotEmpty && - PlatformInfo.isMobile) { + if (controller.mailboxDashBoardController.listSendingEmails.isNotEmpty) { return SendingQueueMailboxWidget( + imagePaths: controller.imagePaths, + responsiveUtils: controller.responsiveUtils, listSendingEmails: controller.mailboxDashBoardController.listSendingEmails, onOpenSendingQueueAction: () => controller.openSendingQueueViewAction(context), isSelected: controller.mailboxDashBoardController.dashboardRoute.value == DashboardRoutes.sendingQueue, @@ -86,13 +87,25 @@ class MailboxView extends BaseMailboxView { return const SizedBox.shrink(); } }), - const SizedBox(height: 8), - const Divider(color: AppColor.colorDividerMailbox, height: 1), + Obx(() { + if (controller.defaultMailboxIsNotEmpty || + controller.mailboxDashBoardController.listSendingEmails.isNotEmpty) { + return const Padding( + padding: EdgeInsets.only(top: 8), + child: Divider(color: AppColor.folderDivider, height: 1), + ); + } else { + return const SizedBox.shrink(); + } + }), FoldersBarWidget( onOpenSearchFolder: () => controller.openSearchViewAction(context), onAddNewFolder: () => controller.goToCreateNewMailboxView(context), imagePaths: controller.imagePaths, responsiveUtils: controller.responsiveUtils, + height: 40, + padding: const EdgeInsets.symmetric(horizontal: 24), + labelStyle: ThemeUtils.textStyleInter500(), ), Obx(() { if (controller.personalMailboxIsNotEmpty) { @@ -105,7 +118,6 @@ class MailboxView extends BaseMailboxView { return const SizedBox.shrink(); } }), - const SizedBox(height: 8), Obx(() { if (controller.teamMailboxesIsNotEmpty) { return _buildMailboxCategory( @@ -137,9 +149,10 @@ class MailboxView extends BaseMailboxView { return Column( mainAxisSize: MainAxisSize.min, children: [ - const SizedBox(height: 8), - const Divider(color: AppColor.colorDividerMailbox, height: 1), - const SizedBox(height: 8), + const Padding( + padding: EdgeInsets.only(top: 8), + child: Divider(color: AppColor.folderDivider, height: 1), + ), FolderWidget( icon: controller.imagePaths.icHelp, label: AppLocalizations.of(context).support, @@ -147,7 +160,13 @@ class MailboxView extends BaseMailboxView { .mailboxDashBoardController .onGetHelpOrReportBug(contactSupportCapability!), tooltip: AppLocalizations.of(context).getHelpOrReportABug, - padding: const EdgeInsets.symmetric(horizontal: 16) + padding: const EdgeInsets.symmetric(horizontal: 12), + itemPadding: const EdgeInsets.symmetric( + horizontal: MailboxItemWidgetStyles.mobileItemPadding, + ), + borderRadius: MailboxItemWidgetStyles.mobileBorderRadius, + height: MailboxItemWidgetStyles.mobileHeight, + labelTextStyle: ThemeUtils.textStyleInter500(), ), ], ); @@ -189,7 +208,7 @@ class MailboxView extends BaseMailboxView { context: context, categories: categories, mailboxNode: mailboxNode, - padding: const EdgeInsets.symmetric(horizontal: 16), + padding: const EdgeInsets.symmetric(horizontal: 12), ); } return Column(children: [ @@ -206,10 +225,10 @@ class MailboxView extends BaseMailboxView { ), isArrangeLTR: false, showIcon: true, - padding: const EdgeInsetsDirectional.only( - start: 26, - end: 16, - ), + padding: const EdgeInsets.symmetric(horizontal: 24), + height: 40, + iconSpace: MailboxItemWidgetStyles.mobileLabelIconSpace, + labelTextStyle: ThemeUtils.textStyleInter500(), )), AnimatedContainer( duration: const Duration(milliseconds: 400), @@ -219,8 +238,8 @@ class MailboxView extends BaseMailboxView { categories: categories, mailboxNode: mailboxNode, padding: const EdgeInsetsDirectional.only( - start: 30, - end: 16, + start: 24, + end: 12, ), ) : const Offstage()) @@ -235,7 +254,7 @@ class MailboxView extends BaseMailboxView { context, key: const Key('children_tree_mailbox_child'), isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND, - paddingChild: const EdgeInsetsDirectional.only(start: 14), + paddingChild: const EdgeInsetsDirectional.only(start: 12), parent: Obx(() => MailboxItemWidget( mailboxNode: mailboxNode, mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value, diff --git a/lib/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart b/lib/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart index 010ac319a..0f8617e79 100644 --- a/lib/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart +++ b/lib/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart @@ -2,8 +2,12 @@ class MailboxItemWidgetStyles { static const double selectionIconSize = 20; static const double itemPadding = 10; + static const double mobileItemPadding = 12; static const double borderRadius = 8; + static const double mobileBorderRadius = 10; static const double height = 36; + static const double mobileHeight = 40; static const double teamMailboxHeight = 52; static const double labelIconSpace = 16; + static const double mobileLabelIconSpace = 8; } \ No newline at end of file diff --git a/lib/features/mailbox/presentation/styles/trailing_mailbox_item_widget_styles.dart b/lib/features/mailbox/presentation/styles/trailing_mailbox_item_widget_styles.dart index 8b88daa18..c65083cd6 100644 --- a/lib/features/mailbox/presentation/styles/trailing_mailbox_item_widget_styles.dart +++ b/lib/features/mailbox/presentation/styles/trailing_mailbox_item_widget_styles.dart @@ -7,6 +7,8 @@ class TrailingMailboxItemWidgetStyles { static const Color menuIconBackgroundColor = Colors.transparent; static const EdgeInsetsGeometry countEmailsPadding = EdgeInsetsDirectional.only(start: 5); + static const EdgeInsetsGeometry mobileCountEmailsPadding = + EdgeInsetsDirectional.only(start: 8); static const EdgeInsetsGeometry menuIconMargin = EdgeInsetsDirectional.only(start: 5); static const EdgeInsetsGeometry menuIconPadding = EdgeInsetsDirectional.all(2); } \ No newline at end of file diff --git a/lib/features/mailbox/presentation/widgets/count_of_emails_widget.dart b/lib/features/mailbox/presentation/widgets/count_of_emails_widget.dart index b15004197..cfd234e86 100644 --- a/lib/features/mailbox/presentation/widgets/count_of_emails_widget.dart +++ b/lib/features/mailbox/presentation/widgets/count_of_emails_widget.dart @@ -1,5 +1,6 @@ -import 'package:core/presentation/utils/style_utils.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; +import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; class CountOfEmailsWidget extends StatelessWidget { @@ -13,11 +14,12 @@ class CountOfEmailsWidget extends StatelessWidget { return Text( value, maxLines: 1, - overflow: CommonTextStyle.defaultTextOverFlow, - softWrap: CommonTextStyle.defaultSoftWrap, - style: Theme.of(context).textTheme.bodySmall?.copyWith( - color: Colors.black, - ), + overflow: TextOverflow.ellipsis, + style: PlatformInfo.isMobile + ? ThemeUtils.textStyleInter400() + : Theme.of(context).textTheme.bodyMedium?.copyWith( + color: Colors.black, + ), ); } } diff --git a/lib/features/mailbox/presentation/widgets/folder_widget.dart b/lib/features/mailbox/presentation/widgets/folder_widget.dart index d2a4fcd0d..e42e3188f 100644 --- a/lib/features/mailbox/presentation/widgets/folder_widget.dart +++ b/lib/features/mailbox/presentation/widgets/folder_widget.dart @@ -2,9 +2,8 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/views/text/text_overflow_builder.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; -import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart'; class FolderWidget extends StatelessWidget { final String icon; @@ -12,6 +11,10 @@ class FolderWidget extends StatelessWidget { final VoidCallback onOpenFolderAction; final String? tooltip; final EdgeInsetsGeometry? padding; + final EdgeInsetsGeometry? itemPadding; + final double? borderRadius; + final double? height; + final TextStyle? labelTextStyle; const FolderWidget({ super.key, @@ -20,35 +23,36 @@ class FolderWidget extends StatelessWidget { required this.onOpenFolderAction, this.tooltip, this.padding, + this.itemPadding, + this.borderRadius, + this.height, + this.labelTextStyle, }); @override Widget build(BuildContext context) { Widget item = Container( - decoration: const BoxDecoration( + decoration: BoxDecoration( borderRadius: BorderRadius.all( - Radius.circular(MailboxItemWidgetStyles.borderRadius), + Radius.circular(borderRadius ?? MailboxItemWidgetStyles.borderRadius), ), ), - padding: const EdgeInsets.symmetric( + padding: itemPadding ?? const EdgeInsets.symmetric( horizontal: MailboxItemWidgetStyles.itemPadding, ), - height: MailboxItemWidgetStyles.height, + height: height ?? MailboxItemWidgetStyles.height, child: Row(children: [ - SvgPicture.asset( - icon, - width: MailboxIconWidgetStyles.iconSize, - height: MailboxIconWidgetStyles.iconSize, - fit: BoxFit.fill, + MailboxIconWidget( + icon: icon, + padding: const EdgeInsetsDirectional.only( + end: MailboxItemWidgetStyles.mobileLabelIconSpace, + ), + color: AppColor.iconFolder, ), - const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace), Expanded( - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 3), - child: TextOverflowBuilder( - label, - style: ThemeUtils.textStyleBodyBody3(color: Colors.black), - ), + child: TextOverflowBuilder( + label, + style: labelTextStyle ?? ThemeUtils.textStyleBodyBody3(color: Colors.black), ), ) ]), @@ -65,8 +69,8 @@ class FolderWidget extends StatelessWidget { color: Colors.transparent, child: InkWell( onTap: onOpenFolderAction, - borderRadius: const BorderRadius.all( - Radius.circular(MailboxItemWidgetStyles.borderRadius), + borderRadius: BorderRadius.all( + Radius.circular(borderRadius ?? MailboxItemWidgetStyles.borderRadius), ), hoverColor: AppColor.blue100, child: item, diff --git a/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart b/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart index ba9bf292e..892f5688f 100644 --- a/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart +++ b/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart @@ -11,6 +11,9 @@ class FoldersBarWidget extends StatelessWidget { final VoidCallback onAddNewFolder; final ImagePaths imagePaths; final ResponsiveUtils responsiveUtils; + final double? height; + final EdgeInsetsGeometry? padding; + final TextStyle? labelStyle; const FoldersBarWidget({ super.key, @@ -18,6 +21,9 @@ class FoldersBarWidget extends StatelessWidget { required this.onAddNewFolder, required this.imagePaths, required this.responsiveUtils, + this.height, + this.padding, + this.labelStyle, }); @override @@ -56,17 +62,19 @@ class FoldersBarWidget extends StatelessWidget { } return Container( - padding: EdgeInsetsDirectional.only( + padding: padding ?? EdgeInsetsDirectional.only( start: responsiveUtils.isWebDesktop(context) ? 10 : 26, end: responsiveUtils.isWebDesktop(context) ? 0 : 8, ), - height: 48, + height: height ?? 48, child: Row( children: [ Expanded( child: Text( AppLocalizations.of(context).folders, - style: ThemeUtils.textStyleInter700(color: Colors.black), + style: labelStyle ?? ThemeUtils.textStyleInter700(), + maxLines: 1, + overflow: TextOverflow.ellipsis, ), ), Row(children: [searchBarIcon, newFolderIcon]), diff --git a/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart b/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart index 6c390eedc..49a951d50 100644 --- a/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart +++ b/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart @@ -1,7 +1,9 @@ +import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/views/text/text_overflow_builder.dart'; +import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; import 'package:model/extensions/presentation_mailbox_extension.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart'; @@ -51,9 +53,7 @@ class _LabelMailboxItemWidgetState extends State { Widget build(BuildContext context) { final displayNameWidget = TextOverflowBuilder( widget.mailboxNode.item.getDisplayName(context), - style: widget.isSelected - ? ThemeUtils.textStyleInter700(color: Colors.black, fontSize: 14) - : ThemeUtils.textStyleBodyBody3(color: Colors.black), + style: _displayNameTextStyle, ); final nameWithExpandIcon = Row( @@ -159,4 +159,17 @@ class _LabelMailboxItemWidgetState extends State { return widget.responsiveUtils.isWebDesktop(context) && widget.mailboxNode.item.allowedHasEmptyAction; } + + TextStyle get _displayNameTextStyle { + if (isSelected) { + return ThemeUtils.textStyleInter700( + color: PlatformInfo.isMobile ? AppColor.iconFolder : null, + fontSize: 14, + ); + } else { + return PlatformInfo.isMobile + ? ThemeUtils.textStyleInter500() + : ThemeUtils.textStyleBodyBody3(color: Colors.black); + } + } } \ No newline at end of file diff --git a/lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart b/lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart index 98851602e..c92044e15 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart @@ -2,6 +2,7 @@ import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/views/button/tmail_button_widget.dart'; import 'package:core/utils/direction_utils.dart'; +import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -21,6 +22,9 @@ class MailboxCategoryWidget extends StatefulWidget { final bool isArrangeLTR; final bool showIcon; final EdgeInsetsGeometry? padding; + final double? height; + final double? iconSpace; + final TextStyle? labelTextStyle; const MailboxCategoryWidget({ super.key, @@ -30,6 +34,9 @@ class MailboxCategoryWidget extends StatefulWidget { this.isArrangeLTR = true, this.showIcon = false, this.padding, + this.height, + this.iconSpace, + this.labelTextStyle, }); @override @@ -55,7 +62,7 @@ class _MailboxCategoryWidgetState extends State { height: MailboxIconWidgetStyles.iconSize, fit: BoxFit.fill, ), - const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace), + SizedBox(width: widget.iconSpace ?? MailboxItemWidgetStyles.labelIconSpace), ], if (!widget.isArrangeLTR) Flexible( @@ -63,7 +70,7 @@ class _MailboxCategoryWidgetState extends State { widget.categories.getTitle(context), maxLines: 1, overflow: TextOverflow.ellipsis, - style: ThemeUtils.textStyleBodyBody3(color: Colors.black), + style: widget.labelTextStyle ?? ThemeUtils.textStyleBodyBody3(color: Colors.black), ), ), TMailButtonWidget.fromIcon( @@ -72,9 +79,12 @@ class _MailboxCategoryWidgetState extends State { DirectionUtils.isDirectionRTLByLanguage(context), ), iconColor: Colors.black, - iconSize: 20, + iconSize: PlatformInfo.isMobile ? 17 : 20, backgroundColor: Colors.transparent, - padding: const EdgeInsets.all(5), + margin: PlatformInfo.isMobile + ? const EdgeInsetsDirectional.only(start: 8) + : null, + padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5), tooltipMessage: widget.expandMode.getTooltipMessage(AppLocalizations.of(context)), onTapActionCallback: () => widget.onToggleMailboxCategories(widget.categories, _key)), @@ -84,13 +94,19 @@ class _MailboxCategoryWidgetState extends State { widget.categories.getTitle(context), maxLines: 1, overflow: TextOverflow.ellipsis, - style: ThemeUtils.textStyleBodyBody3(color: Colors.black), + style: widget.labelTextStyle ?? ThemeUtils.textStyleBodyBody3(color: Colors.black), ), ), ], ); - if (widget.padding != null) { + if (widget.padding != null && widget.height != null) { + return Container( + padding: widget.padding!, + height: widget.height!, + child: item, + ); + } else if (widget.padding != null) { return Padding(padding: widget.padding!, child: item); } else { return item; diff --git a/lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart b/lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart index 93c14e2bd..0058d025b 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart @@ -2,6 +2,7 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/views/button/tmail_button_widget.dart'; import 'package:core/utils/direction_utils.dart'; +import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; import 'package:model/extensions/presentation_mailbox_extension.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart'; @@ -31,8 +32,11 @@ class MailboxExpandButton extends StatelessWidget { DirectionUtils.isDirectionRTLByLanguage(context), ), iconColor: _expandIconColor, - iconSize: 20, - padding: const EdgeInsets.all(5), + iconSize: PlatformInfo.isMobile ? 17 : 20, + margin: PlatformInfo.isMobile + ? const EdgeInsetsDirectional.only(start: 8) + : null, + padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5), backgroundColor: Colors.transparent, tooltipMessage: mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)), onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode, itemKey), diff --git a/lib/features/mailbox/presentation/widgets/mailbox_icon_widget.dart b/lib/features/mailbox/presentation/widgets/mailbox_icon_widget.dart index 815531949..4a3d0bdf0 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_icon_widget.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_icon_widget.dart @@ -1,3 +1,4 @@ +import 'package:core/presentation/extensions/color_extension.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart'; @@ -5,19 +6,27 @@ import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_ class MailboxIconWidget extends StatelessWidget { final String icon; + final EdgeInsetsGeometry? padding; + final Color? color; - const MailboxIconWidget({super.key, required this.icon}); + const MailboxIconWidget({ + super.key, + required this.icon, + this.padding, + this.color, + }); @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsetsDirectional.only( + padding: padding ?? const EdgeInsetsDirectional.only( end: MailboxItemWidgetStyles.labelIconSpace, ), child: SvgPicture.asset( icon, width: MailboxIconWidgetStyles.iconSize, height: MailboxIconWidgetStyles.iconSize, + colorFilter: color?.asFilter(), fit: BoxFit.fill, ), ); diff --git a/lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart b/lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart index fe97cac41..707d280a5 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart @@ -156,22 +156,32 @@ class _MailboxItemWidgetState extends State { child: InkWell( onLongPress: () => widget.onLongPressMailboxNodeAction?.call(widget.mailboxNode), onTap: () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode), - borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)), + borderRadius: const BorderRadius.all( + Radius.circular(MailboxItemWidgetStyles.mobileBorderRadius), + ), child: Container( decoration: BoxDecoration( - borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)), + borderRadius: const BorderRadius.all( + Radius.circular(MailboxItemWidgetStyles.mobileBorderRadius), + ), color: backgroundColorItem ), padding: const EdgeInsetsDirectional.symmetric( - horizontal: MailboxItemWidgetStyles.itemPadding, + horizontal: MailboxItemWidgetStyles.mobileItemPadding, ), height: widget.mailboxNode.item.isTeamMailboxes ? MailboxItemWidgetStyles.teamMailboxHeight - : MailboxItemWidgetStyles.height, + : MailboxItemWidgetStyles.mobileHeight, child: Row( children: [ if (_isIconDisplayed) - MailboxIconWidget(icon: _iconMailbox), + MailboxIconWidget( + icon: _iconMailbox, + padding: const EdgeInsetsDirectional.only( + end: MailboxItemWidgetStyles.mobileLabelIconSpace, + ), + color: AppColor.iconFolder, + ), Expanded( child: LabelMailboxItemWidget( itemKey: _key, @@ -183,15 +193,8 @@ class _MailboxItemWidgetState extends State { onMenuActionClick: widget.onMenuActionClick, onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback, onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick, - ) + ), ), - if (_isSelectActionNoValid) - SvgPicture.asset( - _imagePaths.icSelectedSB, - width: MailboxItemWidgetStyles.selectionIconSize, - height: MailboxItemWidgetStyles.selectionIconSize, - fit: BoxFit.fill - ) ] ), ), diff --git a/lib/features/mailbox/presentation/widgets/sending_queue_mailbox_widget.dart b/lib/features/mailbox/presentation/widgets/sending_queue_mailbox_widget.dart index 8ac213f4b..d6f737271 100644 --- a/lib/features/mailbox/presentation/widgets/sending_queue_mailbox_widget.dart +++ b/lib/features/mailbox/presentation/widgets/sending_queue_mailbox_widget.dart @@ -1,11 +1,13 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/views/text/text_overflow_builder.dart'; -import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; -import 'package:get/get.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/styles/trailing_mailbox_item_widget_styles.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/widgets/count_of_emails_widget.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart'; import 'package:tmail_ui_user/features/sending_queue/domain/model/sending_email.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; @@ -13,73 +15,59 @@ class SendingQueueMailboxWidget extends StatelessWidget { final List listSendingEmails; final bool isSelected; + final ImagePaths imagePaths; + final ResponsiveUtils responsiveUtils; final VoidCallback? onOpenSendingQueueAction; const SendingQueueMailboxWidget({ super.key, required this.listSendingEmails, + required this.imagePaths, + required this.responsiveUtils, this.isSelected = false, this.onOpenSendingQueueAction }); @override Widget build(BuildContext context) { - final imagePath = Get.find(); - final responsiveUtils = Get.find(); - return Padding( - padding: const EdgeInsets.only(left: 20, right: 16), + padding: const EdgeInsetsDirectional.symmetric(horizontal: 12), child: Material( color: Colors.transparent, child: InkWell( onTap: onOpenSendingQueueAction, - borderRadius: const BorderRadius.all(Radius.circular(8)), + borderRadius: const BorderRadius.all( + Radius.circular(MailboxItemWidgetStyles.mobileBorderRadius), + ), child: Container( decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - color: isSelected ? AppColor.colorBgMailboxSelected : Colors.transparent), - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, + borderRadius: const BorderRadius.all( + Radius.circular(MailboxItemWidgetStyles.mobileBorderRadius), + ), + color: backgroundColorItem, + ), + padding: const EdgeInsetsDirectional.symmetric( + horizontal: MailboxItemWidgetStyles.mobileItemPadding, + ), + height: MailboxItemWidgetStyles.mobileHeight, + child: Row( children: [ - Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - SizedBox(width: responsiveUtils.isLandscapeMobile(context) ? 20 : 28), - SvgPicture.asset( - imagePath.icMailboxSendingQueue, - width: PlatformInfo.isWeb ? 20 : 24, - height: PlatformInfo.isWeb ? 20 : 24, - colorFilter: AppColor.primaryColor.asFilter(), - fit: BoxFit.fill), - const SizedBox(width: 12), - Expanded(child: Row( - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - Expanded( - child: TextOverflowBuilder( - AppLocalizations.of(context).sendingQueue, - style: const TextStyle( - fontSize: 15, - color: AppColor.colorNameEmail, - fontWeight: FontWeight.normal), - ), - ), - Padding( - padding: const EdgeInsetsDirectional.only(start: 12), - child: TextOverflowBuilder( - _getCountSendingEmails(), - style: const TextStyle( - fontSize: 13, - color: Colors.black, - fontWeight: FontWeight.normal - ) - ), - ) - ], - )) - ] + MailboxIconWidget( + icon: imagePaths.icMailboxSendingQueue, + padding: const EdgeInsetsDirectional.only( + end: MailboxItemWidgetStyles.mobileLabelIconSpace, + ), + color: AppColor.iconFolder, + ), + Expanded( + child: TextOverflowBuilder( + AppLocalizations.of(context).sendingQueue, + style: _displayNameTextStyle, + ), + ), + Padding( + padding: TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding, + child: CountOfEmailsWidget(value: _getCountSendingEmails()), ), ] ), @@ -89,10 +77,29 @@ class SendingQueueMailboxWidget extends StatelessWidget { ); } + Color get backgroundColorItem { + if (isSelected) { + return AppColor.blue100; + } else { + return Colors.transparent; + } + } + String _getCountSendingEmails() { if (listSendingEmails.isEmpty) { return ''; } return listSendingEmails.length <= 999 ? '${listSendingEmails.length}' : '999+'; } + + TextStyle get _displayNameTextStyle { + if (isSelected) { + return ThemeUtils.textStyleInter700( + color: AppColor.iconFolder, + fontSize: 14, + ); + } else { + return ThemeUtils.textStyleInter500(); + } + } } \ No newline at end of file diff --git a/lib/features/mailbox/presentation/widgets/trailing_mailbox_item_widget.dart b/lib/features/mailbox/presentation/widgets/trailing_mailbox_item_widget.dart index d3088998e..8e905371b 100644 --- a/lib/features/mailbox/presentation/widgets/trailing_mailbox_item_widget.dart +++ b/lib/features/mailbox/presentation/widgets/trailing_mailbox_item_widget.dart @@ -45,12 +45,16 @@ class TrailingMailboxItemWidget extends StatelessWidget { return const SizedBox(); } else if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) { return Padding( - padding: TrailingMailboxItemWidgetStyles.countEmailsPadding, + padding: PlatformInfo.isMobile + ? TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding + : TrailingMailboxItemWidgetStyles.countEmailsPadding, child: CountOfEmailsWidget(value: mailboxNode.item.countUnReadEmailsAsString), ); } else if (mailboxNode.item.allowedToDisplayCountOfTotalEmails) { return Padding( - padding: TrailingMailboxItemWidgetStyles.countEmailsPadding, + padding: PlatformInfo.isMobile + ? TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding + : TrailingMailboxItemWidgetStyles.countEmailsPadding, child: CountOfEmailsWidget(value: mailboxNode.item.countTotalEmailsAsString), ); } else { @@ -59,12 +63,16 @@ class TrailingMailboxItemWidget extends StatelessWidget { } else { if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) { return Padding( - padding: TrailingMailboxItemWidgetStyles.countEmailsPadding, + padding: PlatformInfo.isMobile + ? TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding + : TrailingMailboxItemWidgetStyles.countEmailsPadding, child: CountOfEmailsWidget(value: mailboxNode.item.countUnReadEmailsAsString), ); } else if (mailboxNode.item.allowedToDisplayCountOfTotalEmails) { return Padding( - padding: TrailingMailboxItemWidgetStyles.countEmailsPadding, + padding: PlatformInfo.isMobile + ? TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding + : TrailingMailboxItemWidgetStyles.countEmailsPadding, child: CountOfEmailsWidget(value: mailboxNode.item.countTotalEmailsAsString), ); } else {