diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart index 99d8abe97..c384c76ac 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -21,7 +21,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/sear import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/download/download_task_item_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart'; -import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/spam_report_banner_web_widget.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_web_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/top_bar_thread_selection.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart'; diff --git a/lib/features/mailbox_dashboard/presentation/widgets/spam_report_banner_web_widget.dart b/lib/features/mailbox_dashboard/presentation/widgets/spam_report_banner_web_widget.dart deleted file mode 100644 index 7c86ba3a3..000000000 --- a/lib/features/mailbox_dashboard/presentation/widgets/spam_report_banner_web_widget.dart +++ /dev/null @@ -1,103 +0,0 @@ -import 'package:core/presentation/extensions/color_extension.dart'; -import 'package:core/presentation/resources/image_paths.dart'; -import 'package:core/presentation/views/button/icon_button_web.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_dashboard/presentation/controller/spam_report_controller.dart'; -import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; -import 'package:tmail_ui_user/main/utils/app_utils.dart'; - -class SpamReportBannerWebWidget extends StatelessWidget { - const SpamReportBannerWebWidget({ Key? key }) : super(key: key); - - @override - Widget build(BuildContext context){ - final spamReportController = Get.find(); - final imagePaths = Get.find(); - return Obx(() { - if (!spamReportController.enableSpamReport || spamReportController.notShowSpamReportBanner) { - return const SizedBox( - height: 8, - ); - } - return Container( - height: 84, - margin: EdgeInsets.only( - right: AppUtils.isDirectionRTL(context) ? 0 : 16, - left: AppUtils.isDirectionRTL(context) ? 16 : 0, - top: 16 - ), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(12), - border: Border.all(color: AppColor.colorBorderBodyThread, width: 1), - color: AppColor.colorSpamReportBox.withOpacity(0.12)), - child: Stack( - alignment: AlignmentDirectional.center, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Row( - children: [ - SvgPicture.asset( - imagePaths.icInfoCircleOutline, - width: 28, - height: 28, - colorFilter: AppColor.primaryColor.asFilter(), - ), - const SizedBox(width: 8), - Text( - AppLocalizations.of(context).countNewSpamEmails( - spamReportController.numberOfUnreadSpamEmails), - style: const TextStyle( - fontSize: 16, - color: AppColor.primaryColor, - fontWeight: FontWeight.w500), - ), - ], - ), - Padding( - padding: EdgeInsets.only( - left: AppUtils.isDirectionRTL(context) ? 0 : 32, - right: AppUtils.isDirectionRTL(context) ? 32 : 0, - ), - child: buildTextButton( - AppLocalizations.of(context).showDetails, - height: 36, - width: 115, - textStyle: const TextStyle( - fontSize: 15, - color: AppColor.primaryColor, - fontWeight: FontWeight.w400), - backgroundColor: AppColor.colorCreateNewIdentityButton, - radius: 10, - onTap: spamReportController.openMailbox, - ), - ), - ], - ), - if (AppUtils.isDirectionRTL(context)) - Positioned( - top: 16, - left: 16, - child: buildSVGIconButton( - icon: imagePaths.icCloseComposer, - onTap: () => spamReportController.dismissSpamReportAction(context), - ), - ) - else - Positioned( - top: 16, - right: 16, - child: buildSVGIconButton( - icon: imagePaths.icCloseComposer, - onTap: () => spamReportController.dismissSpamReportAction(context), - ), - ) - ], - ), - ); - }); - } -} \ No newline at end of file diff --git a/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart index 46f707c1d..1f4be80ff 100644 --- a/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart +++ b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart @@ -4,8 +4,10 @@ import 'package:flutter/material.dart'; class SpamReportBannerButtonStyles { static const double padding = 8; + static const double paddingIcon = 4; static const double borderRadius = 10; static const double labelTextSize = 16; + static const double iconSize = 20; static const Color backgroundColor = AppColor.colorSpamReportBannerButtonBackground; static const Color positiveButtonTextColor = AppColor.primaryColor; static const Color negativeButtonTextColor = AppColor.textFieldErrorBorderColor; diff --git a/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_label_styles.dart b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_label_styles.dart index 350fc9f78..029522b47 100644 --- a/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_label_styles.dart +++ b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_label_styles.dart @@ -7,4 +7,5 @@ class SpamReportBannerLabelStyles { static const double labelTextSize = 16; static const double space = 8; static const Color labelTextColor = AppColor.colorSpamReportBannerLabelColor; + static const Color highlightLabelTextColor = AppColor.primaryColor; } \ No newline at end of file diff --git a/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart index ab7524377..50d506e7e 100644 --- a/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart +++ b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart @@ -7,10 +7,7 @@ class SpamReportBannerStyles { static const double verticalMargin = 8; static const double padding = 12; static const double borderRadius = 12; - static const double iconSize = 24; - static const double labelTextSize = 16; static const double space = 8; static Color backgroundColor = AppColor.colorSpamReportBannerBackground.withOpacity(0.12); static const Color strokeBorderColor = AppColor.colorSpamReportBannerStrokeBorder; - static const Color labelTextColor = AppColor.colorSpamReportBannerLabelColor; } \ No newline at end of file diff --git a/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_web_styles.dart b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_web_styles.dart new file mode 100644 index 000000000..99718b601 --- /dev/null +++ b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_web_styles.dart @@ -0,0 +1,13 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +class SpamReportBannerWebStyles { + static const double horizontalMargin = 16; + static const double verticalMargin = 16; + static const double verticalPadding = 8; + static const double horizontalPadding = 16; + static const double borderRadius = 12; + static Color backgroundColor = AppColor.colorSpamReportBannerBackground.withOpacity(0.12); + static const Color strokeBorderColor = AppColor.colorSpamReportBannerStrokeBorder; +} \ No newline at end of file diff --git a/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart index 7dff1cb6a..eacd076a6 100644 --- a/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart +++ b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart @@ -1,5 +1,8 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/utils/style_utils.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart'; class SpamReportBannerButtonWidget extends StatelessWidget { @@ -7,12 +10,18 @@ class SpamReportBannerButtonWidget extends StatelessWidget { final String label; final Color labelColor; final VoidCallback onTap; + final String? icon; + final bool iconLeftAlignment; + final bool wrapContent; const SpamReportBannerButtonWidget({ super.key, required this.label, required this.labelColor, - required this.onTap + required this.onTap, + this.icon, + this.iconLeftAlignment = true, + this.wrapContent = false, }); @override @@ -23,21 +32,59 @@ class SpamReportBannerButtonWidget extends StatelessWidget { onTap: onTap, borderRadius: const BorderRadius.all(Radius.circular(SpamReportBannerButtonStyles.borderRadius)), child: Container( - width: double.infinity, + width: wrapContent ? null : double.infinity, padding: const EdgeInsetsDirectional.all(SpamReportBannerButtonStyles.padding), decoration: const BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(SpamReportBannerButtonStyles.borderRadius)), color: SpamReportBannerButtonStyles.backgroundColor ), - child: Text( - label, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: SpamReportBannerButtonStyles.labelTextSize, - color: labelColor, - fontWeight: FontWeight.w400 - ), - ), + child: icon == null + ? Text( + label, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: SpamReportBannerButtonStyles.labelTextSize, + color: labelColor, + fontWeight: FontWeight.w400 + ) + ) + : Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + if (iconLeftAlignment) + Padding( + padding: const EdgeInsetsDirectional.only(end: SpamReportBannerButtonStyles.paddingIcon), + child: SvgPicture.asset( + icon!, + width: SpamReportBannerButtonStyles.iconSize, + height: SpamReportBannerButtonStyles.iconSize, + colorFilter: labelColor.asFilter(), + ), + ), + Text( + label, + textAlign: TextAlign.center, + overflow: CommonTextStyle.defaultTextOverFlow, + softWrap: CommonTextStyle.defaultSoftWrap, + style: TextStyle( + fontSize: SpamReportBannerButtonStyles.labelTextSize, + color: labelColor, + fontWeight: FontWeight.w400 + ) + ), + if (!iconLeftAlignment) + Padding( + padding: const EdgeInsetsDirectional.only(start: SpamReportBannerButtonStyles.paddingIcon), + child: SvgPicture.asset( + icon!, + width: SpamReportBannerButtonStyles.iconSize, + height: SpamReportBannerButtonStyles.iconSize, + colorFilter: labelColor.asFilter(), + ), + ), + ], + ), ), ), ); diff --git a/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart index 30f6096b3..ed0d46862 100644 --- a/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart +++ b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart @@ -1,5 +1,6 @@ import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -9,11 +10,17 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class SpamReportBannerLabelWidget extends StatelessWidget { final String countSpamEmailsAsString; + final Color labelColor; - const SpamReportBannerLabelWidget({super.key, required this.countSpamEmailsAsString}); + const SpamReportBannerLabelWidget({ + super.key, + required this.countSpamEmailsAsString, + this.labelColor = SpamReportBannerLabelStyles.labelTextColor + }); @override Widget build(BuildContext context) { + final responsiveUtils = Get.find(); final imagePaths = Get.find(); return Row( mainAxisAlignment: MainAxisAlignment.center, @@ -24,14 +31,28 @@ class SpamReportBannerLabelWidget extends StatelessWidget { height: SpamReportBannerLabelStyles.iconSize ), const SizedBox(width: SpamReportBannerLabelStyles.space), - Text( - AppLocalizations.of(context).countNewSpamEmails(countSpamEmailsAsString), - style: const TextStyle( - fontSize: SpamReportBannerLabelStyles.labelTextSize, - color: SpamReportBannerLabelStyles.labelTextColor, - fontWeight: FontWeight.w500 - ), - ), + if (responsiveUtils.isWebDesktop(context)) + Text( + AppLocalizations.of(context).countNewSpamEmails(countSpamEmailsAsString), + textAlign: TextAlign.center, + style: TextStyle( + fontSize: SpamReportBannerLabelStyles.labelTextSize, + color: labelColor, + fontWeight: FontWeight.w500 + ), + ) + else + Flexible( + child: Text( + AppLocalizations.of(context).countNewSpamEmails(countSpamEmailsAsString), + textAlign: TextAlign.center, + style: TextStyle( + fontSize: SpamReportBannerLabelStyles.labelTextSize, + color: labelColor, + fontWeight: FontWeight.w500 + ), + ), + ) ], ); } diff --git a/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_web_widget.dart b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_web_widget.dart new file mode 100644 index 000000000..7fa575f01 --- /dev/null +++ b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_web_widget.dart @@ -0,0 +1,85 @@ +import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/utils/direction_utils.dart'; +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/spam_report_controller.dart'; +import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart'; +import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_label_styles.dart'; +import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_web_styles.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class SpamReportBannerWebWidget extends StatelessWidget { + const SpamReportBannerWebWidget({ Key? key }) : super(key: key); + + @override + Widget build(BuildContext context){ + final spamReportController = Get.find(); + final imagePaths = Get.find(); + return Obx(() { + if (!spamReportController.enableSpamReport || spamReportController.notShowSpamReportBanner) { + return const SizedBox( + height: 8, + ); + } + return Container( + margin: const EdgeInsetsDirectional.only( + end: SpamReportBannerWebStyles.horizontalMargin, + top: SpamReportBannerWebStyles.verticalMargin, + ), + width: double.infinity, + padding: const EdgeInsetsDirectional.symmetric( + horizontal: SpamReportBannerWebStyles.horizontalPadding, + vertical: SpamReportBannerWebStyles.verticalPadding, + ), + decoration: ShapeDecoration( + color: SpamReportBannerWebStyles.backgroundColor, + shape: const RoundedRectangleBorder( + side: BorderSide( + width: 1, + color: SpamReportBannerWebStyles.strokeBorderColor, + ), + borderRadius: BorderRadius.all(Radius.circular(SpamReportBannerWebStyles.borderRadius)), + ), + ), + child: Stack( + alignment: AlignmentDirectional.center, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + SpamReportBannerLabelWidget( + countSpamEmailsAsString: spamReportController.numberOfUnreadSpamEmails, + labelColor: SpamReportBannerLabelStyles.highlightLabelTextColor + ), + const SizedBox(width: 32), + SpamReportBannerButtonWidget( + label: AppLocalizations.of(context).showDetails, + labelColor: SpamReportBannerButtonStyles.positiveButtonTextColor, + onTap: spamReportController.openMailbox, + icon: DirectionUtils.isDirectionRTLByLanguage(context) + ? imagePaths.icArrowLeft + : imagePaths.icArrowRight, + iconLeftAlignment: false, + wrapContent: true, + ), + ], + ), + PositionedDirectional( + end: 0, + child: SpamReportBannerButtonWidget( + label: AppLocalizations.of(context).dismiss, + labelColor: SpamReportBannerButtonStyles.negativeButtonTextColor, + onTap: () => spamReportController.dismissSpamReportAction(context), + icon: imagePaths.icCloseComposer, + wrapContent: true, + ), + ) + ], + ), + ); + }); + } +} \ No newline at end of file diff --git a/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart index 53ac4da67..35ddf9ca0 100644 --- a/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart +++ b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart @@ -1,11 +1,10 @@ -import 'package:core/presentation/resources/image_paths.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_dashboard/presentation/controller/spam_report_controller.dart'; import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart'; import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart'; import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class SpamReportBannerWidget extends StatelessWidget { @@ -14,8 +13,7 @@ class SpamReportBannerWidget extends StatelessWidget { @override Widget build(BuildContext context){ final spamReportController = Get.find(); - final imagePaths = Get.find(); - + return Obx(() { if (!spamReportController.enableSpamReport || spamReportController.notShowSpamReportBanner) { return const SizedBox.shrink(); @@ -40,25 +38,7 @@ class SpamReportBannerWidget extends StatelessWidget { child: Column( mainAxisSize: MainAxisSize.min, children: [ - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SvgPicture.asset( - imagePaths.icInfoCircleOutline, - width: SpamReportBannerStyles.iconSize, - height: SpamReportBannerStyles.iconSize - ), - const SizedBox(width: SpamReportBannerStyles.space), - Text( - AppLocalizations.of(context).countNewSpamEmails(spamReportController.numberOfUnreadSpamEmails), - style: const TextStyle( - fontSize: SpamReportBannerStyles.labelTextSize, - color: SpamReportBannerStyles.labelTextColor, - fontWeight: FontWeight.w500 - ), - ), - ], - ), + SpamReportBannerLabelWidget(countSpamEmailsAsString: spamReportController.numberOfUnreadSpamEmails), const SizedBox(height: SpamReportBannerStyles.space), Row( children: [