diff --git a/assets/images/ic_no_rules.svg b/assets/images/ic_no_rules.svg new file mode 100644 index 000000000..33b504afb --- /dev/null +++ b/assets/images/ic_no_rules.svg @@ -0,0 +1,4 @@ + + + + diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index 7fa2d3397..92a2a9a87 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -241,6 +241,7 @@ class ImagePaths { String get icExpandArrows => _getImagePath('ic_expand_arrows.svg'); String get icPremium => _getImagePath('ic_premium.svg'); String get icCloud => _getImagePath('ic_cloud.svg'); + String get icNoRules => _getImagePath('ic_no_rules.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/lib/features/manage_account/presentation/email_rules/email_rules_controller.dart b/lib/features/manage_account/presentation/email_rules/email_rules_controller.dart index 77118e788..b5e036cd1 100644 --- a/lib/features/manage_account/presentation/email_rules/email_rules_controller.dart +++ b/lib/features/manage_account/presentation/email_rules/email_rules_controller.dart @@ -75,7 +75,7 @@ class EmailRulesController extends BaseController { } } - void goToCreateNewRule(BuildContext context) async { + Future goToCreateNewRule() async { final accountId = _accountDashBoardController.accountId.value; final session = _accountDashBoardController.sessionCurrent; if (accountId != null && session != null) { diff --git a/lib/features/manage_account/presentation/email_rules/email_rules_view.dart b/lib/features/manage_account/presentation/email_rules/email_rules_view.dart index 80946ba80..37403e798 100644 --- a/lib/features/manage_account/presentation/email_rules/email_rules_view.dart +++ b/lib/features/manage_account/presentation/email_rules/email_rules_view.dart @@ -1,55 +1,101 @@ -import 'package:core/presentation/state/success.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; -import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_controller.dart'; -import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart'; -import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/add_rule_button_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/count_name_of_rules_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/no_rules_widget.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_explanation_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart'; -class EmailRulesView extends GetWidget with AppLoaderMixin { - - EmailRulesView({Key? key}) : super(key: key); +class EmailRulesView extends GetWidget { + const EmailRulesView({Key? key}) : super(key: key); @override Widget build(BuildContext context) { + final isDesktop = controller.responsiveUtils.isDesktop(context); + return SettingDetailViewBuilder( responsiveUtils: controller.responsiveUtils, - backgroundColor: Colors.transparent, - child: SingleChildScrollView( - physics: const ClampingScrollPhysics(), - child: Padding( - padding: SettingsUtils.getSettingContentWithoutHeaderPadding( - context, - controller.responsiveUtils, - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - EmailRulesHeaderWidget( - imagePaths: controller.imagePaths, - responsiveUtils: controller.responsiveUtils, - createRule: () => controller.goToCreateNewRule(context), + child: Container( + color: SettingsUtils.getContentBackgroundColor( + context, + controller.responsiveUtils, + ), + decoration: SettingsUtils.getBoxDecorationForContent( + context, + controller.responsiveUtils, + ), + width: double.infinity, + padding: isDesktop + ? const EdgeInsetsDirectional.only( + start: 30, + end: 30, + top: 22, + ) + : null, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (isDesktop) ...[ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: SettingHeaderWidget( + menuItem: AccountMenuItem.emailRules, + textStyle: ThemeUtils.textStyleInter600().copyWith( + color: Colors.black.withValues(alpha: 0.9), + ), + padding: const EdgeInsetsDirectional.only(end: 16), + ), + ), + AddRuleButtonWidget( + imagePaths: controller.imagePaths, + margin: const EdgeInsetsDirectional.only( + start: 169, + top: 24, + end: 57, + ), + onAddRuleAction: controller.goToCreateNewRule, + ), + ], + ), + const SizedBox(height: 14), + ] else ...[ + const SettingExplanationWidget( + menuItem: AccountMenuItem.emailRules, + padding: EdgeInsetsDirectional.symmetric(horizontal: 16), + isCenter: true, + textAlign: TextAlign.center, + ), + Center( + child: AddRuleButtonWidget( + imagePaths: controller.imagePaths, + margin: const EdgeInsetsDirectional.only(top: 24, bottom: 16), + minWidth: 230, + onAddRuleAction: controller.goToCreateNewRule, + ), ), - const SizedBox(height: 16), - _buildLoadingView(), - const ListEmailRulesWidget() ], - ), + Obx(() => CountNameOfRulesWidget( + countRules: controller.listEmailRule.length, + margin: EdgeInsetsDirectional.only( + start: isDesktop ? 0 : 16, + top: 24, + ), + )), + NoRulesWidget( + imagePaths: controller.imagePaths, + responsiveUtils: controller.responsiveUtils, + onAddRuleAction: controller.goToCreateNewRule, + ), + ], ), ), ); } - - Widget _buildLoadingView() { - return Obx(() => controller.viewState.value.fold( - (failure) => const SizedBox.shrink(), - (success) => success is LoadingState - ? Padding( - padding: const EdgeInsets.only(bottom: 24), - child: loadingWidget) - : const SizedBox.shrink() - )); - } } diff --git a/lib/features/manage_account/presentation/email_rules/widgets/add_rule_button_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/add_rule_button_widget.dart new file mode 100644 index 000000000..6e7067c72 --- /dev/null +++ b/lib/features/manage_account/presentation/email_rules/widgets/add_rule_button_widget.dart @@ -0,0 +1,49 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +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:flutter/material.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +typedef OnAddRuleAction = void Function(); + +class AddRuleButtonWidget extends StatelessWidget { + final ImagePaths imagePaths; + final OnAddRuleAction onAddRuleAction; + final EdgeInsetsGeometry? margin; + final double minWidth; + + const AddRuleButtonWidget({ + super.key, + required this.imagePaths, + required this.onAddRuleAction, + this.margin, + this.minWidth = 161, + }); + + @override + Widget build(BuildContext context) { + return TMailButtonWidget( + text: AppLocalizations.of(context).addARule, + icon: imagePaths.icAddIdentity, + backgroundColor: AppColor.primaryMain, + borderRadius: 100, + height: 48, + maxWidth: 300, + minWidth: minWidth, + margin: margin, + textStyle: ThemeUtils.textStyleM3LabelLarge(color: Colors.white), + padding: const EdgeInsetsDirectional.symmetric( + horizontal: 32, + ), + iconSize: 16, + iconColor: Colors.white, + iconSpace: 8, + maxLines: 1, + flexibleText: true, + textOverflow: TextOverflow.ellipsis, + mainAxisSize: MainAxisSize.min, + onTapActionCallback: onAddRuleAction, + ); + } +} diff --git a/lib/features/manage_account/presentation/email_rules/widgets/count_name_of_rules_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/count_name_of_rules_widget.dart new file mode 100644 index 000000000..127c09590 --- /dev/null +++ b/lib/features/manage_account/presentation/email_rules/widgets/count_name_of_rules_widget.dart @@ -0,0 +1,52 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; +import 'package:flutter/material.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class CountNameOfRulesWidget extends StatelessWidget { + + final int countRules; + final EdgeInsetsGeometry? margin; + + const CountNameOfRulesWidget({ + super.key, + required this.countRules, + this.margin, + }); + + @override + Widget build(BuildContext context) { + return Padding( + padding: margin ?? const EdgeInsetsDirectional.only(top: 38), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Flexible( + child: Text( + AppLocalizations.of(context).nameOfRules, + style: ThemeUtils.textStyleInter600().copyWith( + fontSize: 14, + height: 20 / 14, + letterSpacing: 0.25, + color: AppColor.gray424244, + ), + overflow: TextOverflow.ellipsis, + maxLines: 1, + ), + ), + Text( + ' ${countRules > 999 ? '999+' : countRules.toString()}', + style: ThemeUtils.textStyleInter400.copyWith( + fontSize: 14, + height: 20 / 14, + letterSpacing: 0.25, + color: AppColor.gray424244, + ), + overflow: TextOverflow.ellipsis, + maxLines: 1, + ), + ], + ), + ); + } +} diff --git a/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart deleted file mode 100644 index 990e24141..000000000 --- a/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart +++ /dev/null @@ -1,94 +0,0 @@ -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/button/tmail_button_widget.dart'; -import 'package:flutter/material.dart'; -import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart'; -import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_explanation_widget.dart'; -import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart'; -import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; - -class EmailRulesHeaderWidget extends StatelessWidget { - const EmailRulesHeaderWidget({ - Key? key, - required this.createRule, - required this.imagePaths, - required this.responsiveUtils, - }) : super(key: key); - - final VoidCallback createRule; - final ImagePaths imagePaths; - final ResponsiveUtils responsiveUtils; - - @override - Widget build(BuildContext context) { - return Container( - width: double.infinity, - decoration: const BoxDecoration( - color: AppColor.colorBackgroundWrapIconStyleCode, - borderRadius: BorderRadius.all(Radius.circular(16)), - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (responsiveUtils.isWebDesktop(context)) - const SettingHeaderWidget(menuItem: AccountMenuItem.emailRules) - else - const SettingExplanationWidget( - menuItem: AccountMenuItem.emailRules, - padding: EdgeInsets.all(16), - ), - Padding( - padding: const EdgeInsets.all(16), - child: _buildButtonAddNewRule(context), - ), - ], - ), - ); - } - - Widget _buildButtonAddNewRule(BuildContext context) { - if (!responsiveUtils.isMobile(context)) { - return Row( - children: [ - TMailButtonWidget( - key: const Key('new_rule_button'), - text: AppLocalizations.of(context).addNewRule, - icon: imagePaths.icAddNewRules, - borderRadius: 10, - backgroundColor: AppColor.colorTextButton, - iconColor: Colors.white, - minWidth: 130, - padding: const EdgeInsets.symmetric(vertical: 12,horizontal: 8), - iconSize: 20, - textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 17, - color: Colors.white, - fontWeight: FontWeight.w500, - ), - onTapActionCallback: createRule, - ), - const Spacer(), - ], - ); - } else { - return TMailButtonWidget( - key: const Key('new_rule_button'), - text: AppLocalizations.of(context).addNewRule, - icon: imagePaths.icAddNewRules, - borderRadius: 10, - backgroundColor: AppColor.colorTextButton, - iconColor: Colors.white, - padding: const EdgeInsets.symmetric(vertical: 12), - iconSize: 20, - textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 17, - color: Colors.white, - fontWeight: FontWeight.w500, - ), - onTapActionCallback: createRule, - ); - } - } -} diff --git a/lib/features/manage_account/presentation/email_rules/widgets/no_rules_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/no_rules_widget.dart new file mode 100644 index 000000000..14dbf644b --- /dev/null +++ b/lib/features/manage_account/presentation/email_rules/widgets/no_rules_widget.dart @@ -0,0 +1,81 @@ + +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/dialog/confirm_dialog_button.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/add_rule_button_widget.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class NoRulesWidget extends StatelessWidget { + + final ImagePaths imagePaths; + final ResponsiveUtils responsiveUtils; + final OnAddRuleAction onAddRuleAction; + + const NoRulesWidget({ + super.key, + required this.imagePaths, + required this.responsiveUtils, + required this.onAddRuleAction, + }); + + @override + Widget build(BuildContext context) { + final appLocalizations = AppLocalizations.of(context); + final isMobile = responsiveUtils.isMobile(context); + + return Expanded( + child: Container( + padding: EdgeInsetsDirectional.only(top: isMobile ? 48 : 32), + alignment: Alignment.topCenter, + child: SingleChildScrollView( + physics: const ClampingScrollPhysics(), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + SvgPicture.asset( + imagePaths.icNoRules, + width: 98, + height: 98, + fit: BoxFit.fill, + ), + const SizedBox(height: 12), + Text( + appLocalizations.noRulesConfigured, + style: ThemeUtils.textStyleInter600(), + textAlign: TextAlign.center, + ), + const SizedBox(height: 24), + Text( + appLocalizations.messageExplanationNoRulesConfigured, + style: ThemeUtils.textStyleInter400.copyWith( + fontSize: 16, + height: 21.01 / 16, + letterSpacing: -0.15, + color: AppColor.gray424244.withValues(alpha: 0.64), + ), + textAlign: TextAlign.center, + ), + const SizedBox(height: 24), + Container( + constraints: const BoxConstraints(minWidth: 230), + height: 48, + child: ConfirmDialogButton( + label: AppLocalizations.of(context).createMyFirstRule, + backgroundColor: Colors.white, + textColor: AppColor.primaryMain, + borderColor: AppColor.primaryMain, + icon: imagePaths.icAddIdentity, + onTapAction: onAddRuleAction, + ), + ) + ], + ), + ), + ), + ); + } +} diff --git a/lib/features/manage_account/presentation/manage_account_dashboard_view.dart b/lib/features/manage_account/presentation/manage_account_dashboard_view.dart index a4e3c80a2..9304af60b 100644 --- a/lib/features/manage_account/presentation/manage_account_dashboard_view.dart +++ b/lib/features/manage_account/presentation/manage_account_dashboard_view.dart @@ -144,7 +144,7 @@ class ManageAccountDashBoardView extends GetWidget { } case AccountMenuItem.emailRules: if (controller.manageAccountDashboardController.isRuleFilterCapabilitySupported) { - return EmailRulesView(); + return const EmailRulesView(); } else { return const SizedBox.shrink(); } diff --git a/lib/features/manage_account/presentation/widgets/setting_header_widget.dart b/lib/features/manage_account/presentation/widgets/setting_header_widget.dart index 6aec04950..7c1bf32ab 100644 --- a/lib/features/manage_account/presentation/widgets/setting_header_widget.dart +++ b/lib/features/manage_account/presentation/widgets/setting_header_widget.dart @@ -40,8 +40,6 @@ class SettingHeaderWidget extends StatelessWidget { letterSpacing: -0.15, color: AppColor.gray424244.withValues(alpha: 0.64), ), - maxLines: 1, - overflow: TextOverflow.ellipsis, ), ), ]; diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb index 3dcb5f88b..4ff285bcd 100644 --- a/lib/l10n/intl_messages.arb +++ b/lib/l10n/intl_messages.arb @@ -4699,5 +4699,35 @@ "type": "text", "placeholders_order": [], "placeholders": {} + }, + "addARule": "Add a rule", + "@addARule": { + "type": "text", + "placeholders_order": [], + "placeholders": {} + }, + "nameOfRules": "Name of Rules", + "@nameOfRules": { + "type": "text", + "placeholders_order": [], + "placeholders": {} + }, + "noRulesConfigured": "No Rules Configured", + "@noRulesConfigured": { + "type": "text", + "placeholders_order": [], + "placeholders": {} + }, + "messageExplanationNoRulesConfigured": "Start by creating your first rule to automate\n email management.", + "@messageExplanationNoRulesConfigured": { + "type": "text", + "placeholders_order": [], + "placeholders": {} + }, + "createMyFirstRule": "Create My First Rule", + "@createMyFirstRule": { + "type": "text", + "placeholders_order": [], + "placeholders": {} } } \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index d4324f0c5..d36848853 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -4957,4 +4957,39 @@ class AppLocalizations { name: 'manageMyStorage', ); } + + String get addARule { + return Intl.message( + 'Add a rule', + name: 'addARule', + ); + } + + String get nameOfRules { + return Intl.message( + 'Name of Rules', + name: 'nameOfRules', + ); + } + + String get noRulesConfigured { + return Intl.message( + 'No Rules Configured', + name: 'noRulesConfigured', + ); + } + + String get messageExplanationNoRulesConfigured { + return Intl.message( + 'Start by creating your first rule to automate\n email management.', + name: 'messageExplanationNoRulesConfigured', + ); + } + + String get createMyFirstRule { + return Intl.message( + 'Create My First Rule', + name: 'createMyFirstRule', + ); + } }