TF-4004 Add no content rules creation page

2025-09-05 14:37:31 +07:00
parent 0194594b9f
commit 9ab62f5451
13 changed files with 338 additions and 136 deletions
@@ -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,
+    );
+  }
+}
@@ -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,
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -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,
-      );
-    }
-  }
-}
@@ -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,
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}