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 mobile/tablet

Browse Source 
(cherry picked from commit 38eafc659f42a351678eeb3fd2ea1e4496f62a80)
This commit is contained in:
dab246
2023-08-01 17:05:15 +07:00
committed by Dat Vu
parent c377365bf3
commit 583788e155
7 changed files with 165 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/extensions/color_extension.dart
+4 -1
View File
@@ -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);
lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart
+12
View File
@@ -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;
}
lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart
+16
View File
@@ -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;
}
lib/features/thread/presentation/thread_view.dart
+1 -1
View File
@@ -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';
lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart
+45
View File
@@ -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
),
),
),
),
);
}
}
lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart
+87
View File
@@ -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<SpamReportController>();
final imagePaths = Get.find<ImagePaths>();
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)
),
),
],
),
],
),
);
});
}
}
lib/features/thread/presentation/widgets/spam_report_banner_widget.dart
-108
View File
@@ -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<SpamReportController>();
final imagePaths = Get.find<ImagePaths>();
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),
),
),
),
);
}
}