eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-1981 Update UI spam banner on web

Browse Source 
(cherry picked from commit d795fd8989ac09c2d4002ebc3a4bce0e1c619699)
This commit is contained in:
dab246
2023-08-01 19:08:55 +07:00
committed by Dat Vu
parent 720dc7ce33
commit 832589008f
10 changed files with 193 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart
+1 -1
View File
@@ -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';
lib/features/mailbox_dashboard/presentation/widgets/spam_report_banner_web_widget.dart
-103
View File
@@ -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<SpamReportController>();
final imagePaths = Get.find<ImagePaths>();
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),
),
)
],
),
);
});
}
}
lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart
+2
View File
@@ -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;
lib/features/thread/presentation/styles/spam_banner/spam_report_banner_label_styles.dart
+1
View File
@@ -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;
}
lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart
-3
View File
@@ -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;
}
lib/features/thread/presentation/styles/spam_banner/spam_report_banner_web_styles.dart
+13
View File
@@ -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;
}
lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart
+58 -11
View File
@@ -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(),
),
),
],
),
),
),
);
lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart
+30 -9
View File
@@ -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<ResponsiveUtils>();
final imagePaths = Get.find<ImagePaths>();
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
),
),
)
],
);
}
lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_web_widget.dart
+85
View File
@@ -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<SpamReportController>();
final imagePaths = Get.find<ImagePaths>();
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,
),
)
],
),
);
});
}
}
lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart
+3 -23
View File
@@ -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<SpamReportController>();
final imagePaths = Get.find<ImagePaths>();
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: [