From 583788e155aaf38b36e1ae772a9f64c5ec749444 Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 1 Aug 2023 17:05:15 +0700 Subject: [PATCH] TF-1981 Update UI spam banner on mobile/tablet (cherry picked from commit 38eafc659f42a351678eeb3fd2ea1e4496f62a80) --- .../extensions/color_extension.dart | 5 +- .../spam_report_banner_button_styles.dart | 12 ++ .../spam_report_banner_styles.dart | 16 +++ .../thread/presentation/thread_view.dart | 2 +- .../spam_report_banner_button_widget.dart | 45 ++++++++ .../spam_report_banner_widget.dart | 87 ++++++++++++++ .../widgets/spam_report_banner_widget.dart | 108 ------------------ 7 files changed, 165 insertions(+), 110 deletions(-) create mode 100644 lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart create mode 100644 lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart create mode 100644 lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart create mode 100644 lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart delete mode 100644 lib/features/thread/presentation/widgets/spam_report_banner_widget.dart diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 34b215718..bed56d6de 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -169,7 +169,10 @@ extension AppColor on Color { static const colorOutOfStorageQuotasWarning = Color(0xffE64646); static const colorThumbScrollBar = Color(0xFFAEB7C2); static const colorCreateNewIdentityButton = Color(0xFFEBEDF0); - static const colorSpamReportBox = Color(0xFFBFDEFF); + static const colorSpamReportBannerBackground = Color(0xFFBFDEFF); + static const colorSpamReportBannerStrokeBorder = Color(0x1F000000); + static const colorSpamReportBannerLabelColor = Color(0xFF626D7A); + static const colorSpamReportBannerButtonBackground = Color(0xFFEBEDF0); static const colorSubtitle = Color(0xFF6D7885); static const colorBackgroundSearchMailboxInput = Color(0xFFEBEDF0); static const colorMailboxHovered = Color(0xFFEBEDF0); 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 new file mode 100644 index 000000000..46f707c1d --- /dev/null +++ b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart @@ -0,0 +1,12 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +class SpamReportBannerButtonStyles { + static const double padding = 8; + static const double borderRadius = 10; + static const double labelTextSize = 16; + static const Color backgroundColor = AppColor.colorSpamReportBannerButtonBackground; + static const Color positiveButtonTextColor = AppColor.primaryColor; + static const Color negativeButtonTextColor = AppColor.textFieldErrorBorderColor; +} \ 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 new file mode 100644 index 000000000..ab7524377 --- /dev/null +++ b/lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart @@ -0,0 +1,16 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +class SpamReportBannerStyles { + static const double horizontalMargin = 16; + 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/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index 08cfb8707..a0ecc636d 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -26,7 +26,7 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/bottom_bar_th import 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_builder.dart' if (dart.library.html) 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_web_builder.dart'; import 'package:tmail_ui_user/features/thread/presentation/widgets/filter_message_cupertino_action_sheet_action_builder.dart'; -import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_report_banner_widget.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/routes/route_navigation.dart'; import 'package:tmail_ui_user/main/utils/app_utils.dart'; 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 new file mode 100644 index 000000000..7dff1cb6a --- /dev/null +++ b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart @@ -0,0 +1,45 @@ + +import 'package:flutter/material.dart'; +import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart'; + +class SpamReportBannerButtonWidget extends StatelessWidget { + + final String label; + final Color labelColor; + final VoidCallback onTap; + + const SpamReportBannerButtonWidget({ + super.key, + required this.label, + required this.labelColor, + required this.onTap + }); + + @override + Widget build(BuildContext context) { + return Material( + color: Colors.transparent, + child: InkWell( + onTap: onTap, + borderRadius: const BorderRadius.all(Radius.circular(SpamReportBannerButtonStyles.borderRadius)), + child: Container( + width: 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 + ), + ), + ), + ), + ); + } +} 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 new file mode 100644 index 000000000..53ac4da67 --- /dev/null +++ b/lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart @@ -0,0 +1,87 @@ +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/main/localizations/app_localizations.dart'; + +class SpamReportBannerWidget extends StatelessWidget { + const SpamReportBannerWidget({ 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.shrink(); + } + return Container( + margin: const EdgeInsetsDirectional.only( + start: SpamReportBannerStyles.horizontalMargin, + end: SpamReportBannerStyles.horizontalMargin, + bottom: SpamReportBannerStyles.verticalMargin + ), + padding: const EdgeInsetsDirectional.all(SpamReportBannerStyles.padding), + decoration: ShapeDecoration( + color: SpamReportBannerStyles.backgroundColor, + shape: const RoundedRectangleBorder( + side: BorderSide( + width: 1, + color: SpamReportBannerStyles.strokeBorderColor, + ), + borderRadius: BorderRadius.all(Radius.circular(SpamReportBannerStyles.borderRadius)), + ), + ), + 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 + ), + ), + ], + ), + const SizedBox(height: SpamReportBannerStyles.space), + Row( + children: [ + Expanded( + child: SpamReportBannerButtonWidget( + label: AppLocalizations.of(context).showDetails, + labelColor: SpamReportBannerButtonStyles.positiveButtonTextColor, + onTap: spamReportController.openMailbox + ), + ), + const SizedBox(width: SpamReportBannerStyles.space), + Expanded( + child: SpamReportBannerButtonWidget( + label: AppLocalizations.of(context).dismiss, + labelColor: SpamReportBannerButtonStyles.negativeButtonTextColor, + onTap: () => spamReportController.dismissSpamReportAction(context) + ), + ), + ], + ), + ], + ), + ); + }); + } +} \ No newline at end of file diff --git a/lib/features/thread/presentation/widgets/spam_report_banner_widget.dart b/lib/features/thread/presentation/widgets/spam_report_banner_widget.dart deleted file mode 100644 index e35565c2c..000000000 --- a/lib/features/thread/presentation/widgets/spam_report_banner_widget.dart +++ /dev/null @@ -1,108 +0,0 @@ -import 'package:core/presentation/extensions/color_extension.dart'; -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/main/localizations/app_localizations.dart'; - -class SpamReportBannerWidget extends StatelessWidget { - const SpamReportBannerWidget({ 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.shrink(); - } - return Container( - height: 124, - margin: const EdgeInsets.only(left: 12, right: 12, bottom: 12), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(12), - border: Border.all(color: AppColor.colorBorderBodyThread, width: 1), - color: AppColor.colorSpamReportBox.withOpacity(0.12)), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Padding( - padding: const EdgeInsets.only(top: 24), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - 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), - ), - ], - ), - ), - Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Expanded( - child: _spamReportButtonAction( - context, - AppLocalizations.of(context).showDetails, - AppColor.primaryColor, - spamReportController.openMailbox), - ), - const SizedBox( - width: 8, - ), - Expanded( - child: _spamReportButtonAction( - context, - AppLocalizations.of(context).dismiss, - AppColor.textFieldErrorBorderColor, - () => spamReportController.dismissSpamReportAction(context)), - ), - ], - ), - ), - ), - ], - ), - ); - }); - } - - Widget _spamReportButtonAction(BuildContext context, String title, Color colorText, Function()? onTap) { - return GestureDetector( - onTap: onTap, - child: Container( - height: 36, - width: double.infinity, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: AppColor.colorCreateNewIdentityButton), - child: Center( - child: Text( - title, - style: TextStyle( - fontSize: 15, color: colorText, fontWeight: FontWeight.w400), - ), - ), - ), - ); - } -} \ No newline at end of file