TF-788 Build up Settings Screen with SettingsFirstLevelTileBuilder

lib/features/manage_account/presentation/menu/settings/settings_bindings.dart

@@ -0,0 +1,32 @@
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/base_bindings.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/settings_controller.dart';
+
+class SettingsBindings extends BaseBindings {
+
+  @override
+  void bindingsController() {
+    Get.lazyPut(() => SettingsController());
+  }
+
+  @override
+  void bindingsDataSource() {
+  }
+
+  @override
+  void bindingsDataSourceImpl() {
+  }
+
+  @override
+  void bindingsInteractor() {
+  }
+
+  @override
+  void bindingsRepository() {
+  }
+
+  @override
+  void bindingsRepositoryImpl() {
+  }
+
+}

lib/features/manage_account/presentation/menu/settings/settings_controller.dart

@@ -0,0 +1,20 @@
+import 'package:core/utils/app_logger.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/settings_page_level.dart';
+
+class SettingsController extends GetxController {
+  final manageAccountDashboardController = Get.find<ManageAccountDashBoardController>();
+
+  void selectSettings(AccountMenuItem accountMenuItem) {
+    log('SettingsController::selectSettings(): $accountMenuItem');
+    manageAccountDashboardController.selectAccountMenuItem(accountMenuItem);
+    manageAccountDashboardController.settingsPageLevel.value = SettingsPageLevel.level1;
+  }
+
+  void backToUniversalSettings() {
+    log('SettingsController::backToUniversalSettings()');
+    manageAccountDashboardController.settingsPageLevel.value = SettingsPageLevel.universal;
+  }
+}

lib/features/manage_account/presentation/menu/settings/settings_first_level_view.dart

@@ -0,0 +1,67 @@
+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:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/settings_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/widgets/setting_first_level_tile_builder.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class SettingsFirstLevelView extends GetWidget<SettingsController> {
+  SettingsFirstLevelView({Key? key}) : super(key: key);
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final _imagePaths = Get.find<ImagePaths>();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(children: [
+      Obx(() => Padding(
+        padding: SettingsUtils.getPaddingInFirstLevel(context, _responsiveUtils),
+        child: (UserInformationWidgetBuilder(
+              _imagePaths,
+              context,
+              controller.manageAccountDashboardController.userProfile.value)
+          ..addOnSubtitleClick(() => {}))
+          .build()
+      )),
+      Divider(
+        color: AppColor.colorDividerComposer,
+        height: 1,
+        indent: SettingsUtils.getHorizontalPadding(context, _responsiveUtils),
+        endIndent: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)
+      ),
+      SettingFirstLevelTileBuilder(
+        AppLocalizations.of(context).identities,
+        AccountMenuItem.profiles.getIcon(_imagePaths),
+        () => controller.selectSettings(AccountMenuItem.profiles)
+      ),
+      Divider(
+        color: AppColor.colorDividerComposer,
+        height: 1,
+        indent: SettingsUtils.getHorizontalPadding(context, _responsiveUtils),
+        endIndent: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)
+      ),
+      SettingFirstLevelTileBuilder(
+        AccountMenuItem.emailRules.getName(context),
+        AccountMenuItem.emailRules.getIcon(_imagePaths),
+        subtitle: AppLocalizations.of(context).emailRuleSettingExplanation,
+        () => controller.selectSettings(AccountMenuItem.emailRules)
+      ),
+      Divider(
+        color: AppColor.colorDividerComposer,
+        height: 1,
+        indent: SettingsUtils.getHorizontalPadding(context, _responsiveUtils),
+        endIndent: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)
+      ),
+      SettingFirstLevelTileBuilder(
+        AccountMenuItem.languageAndRegion.getName(context),
+        AccountMenuItem.languageAndRegion.getIcon(_imagePaths),
+        () => controller.selectSettings(AccountMenuItem.languageAndRegion)
+      ),
+    ]);
+  }
+}

lib/features/manage_account/presentation/menu/settings/settings_view.dart

@@ -0,0 +1,143 @@
+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/style_utils.dart';
+import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/utils/app_logger.dart';
+import 'package:core/utils/build_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_view.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_view.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/settings_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/settings_first_level_view.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/model/settings_page_level.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/profiles/profiles_view.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef CloseSettingsViewAction = void Function();
+
+class SettingsView extends GetWidget<SettingsController> {
+  SettingsView({Key? key, this.closeAction}) : super(key: key);
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final _imagePaths = Get.find<ImagePaths>();
+  final CloseSettingsViewAction? closeAction;
+
+  @override
+  Widget build(BuildContext context) {
+    log('SettingsView::build(): ${controller.manageAccountDashboardController.userProfile.value}');
+    return SafeArea(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          SizedBox.fromSize(
+            size: const Size.fromHeight(52),
+            child: Padding(
+              padding: SettingsUtils.getPaddingInFirstLevel(context, _responsiveUtils),
+              child: _buildAppbar(context))),
+          const Divider(color: AppColor.colorDividerComposer, height: 1),
+          Expanded(child: Padding(
+            padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context)
+              ? const EdgeInsets.only(left: 8)
+              : const EdgeInsets.only(left: 24),
+            child: _bodySettingsScreen()))
+        ]
+      )
+    );
+  }
+
+  Widget _buildAppbar(BuildContext context) {
+    return Obx(() {
+      if (controller.manageAccountDashboardController.settingsPageLevel.value == SettingsPageLevel.universal) {
+        return _buildUniversalSettingAppBar(context);
+      } else {
+        return _buildSettingLevel1AppBar(context);
+      }
+    });
+  }
+
+  Widget _buildUniversalSettingAppBar(BuildContext context) {
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        Positioned(left: 0,child: _buildCloseSettingButton(context)),
+        Padding(
+          padding: const EdgeInsets.only(left: 50, right: 50),
+          child: Text(
+            AppLocalizations.of(context).settings,
+            maxLines: 1,
+            softWrap: CommonTextStyle.defaultSoftWrap,
+            overflow: CommonTextStyle.defaultTextOverFlow,
+            style: const TextStyle(
+              fontSize: 20,
+              color: AppColor.colorNameEmail,
+              fontWeight: FontWeight.w700))
+        )
+      ]
+    );
+  }
+
+  Widget _buildSettingLevel1AppBar(BuildContext context) {
+    return Row(children: [
+      _buildBackButton(context),
+      const SizedBox(width: 8),
+      Expanded(
+        child: Text(
+          AppLocalizations.of(context).settings,
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: const TextStyle(fontSize: 21, color: Colors.black, fontWeight: FontWeight.bold)
+        )
+      )
+    ]);
+  }
+
+  Widget _buildBackButton(BuildContext context) {
+    return buildIconWeb(
+        icon: SvgPicture.asset(_imagePaths.icBack, width: 18, height: 18, color: AppColor.colorTextButton, fit: BoxFit.fill),
+        tooltip: AppLocalizations.of(context).back,
+        onTap: controller.backToUniversalSettings
+    );
+  }
+
+  Widget _buildCloseSettingButton(BuildContext context) {
+    return buildIconWeb(
+      icon: SvgPicture.asset(_imagePaths.icCloseMailbox, width: 28, height: 28, fit: BoxFit.fill),
+      tooltip: AppLocalizations.of(context).close,
+      onTap: closeAction);
+  }
+
+  Widget _bodySettingsScreen() {
+    return Obx(() {
+      switch (controller.manageAccountDashboardController.settingsPageLevel.value) {
+        case SettingsPageLevel.universal:
+          return SettingsFirstLevelView();
+        case SettingsPageLevel.level1:
+          return _viewDisplayedOfAccountMenuItem();
+      }
+    });
+  }
+
+  Widget _viewDisplayedOfAccountMenuItem() {
+    return Obx(() {
+      switch(controller.manageAccountDashboardController.accountMenuItemSelected.value) {
+        case AccountMenuItem.profiles:
+          return ProfilesView();
+        case AccountMenuItem.languageAndRegion:
+          return LanguageAndRegionView();
+        case AccountMenuItem.emailRules:
+          if(controller.manageAccountDashboardController.checkAvailableRuleFilterInSession()){
+            return EmailRulesView();
+          } else {
+            return const SizedBox.shrink();
+          }
+        default:
+          return const SizedBox.shrink();
+      }
+    });
+  }
+}

lib/features/manage_account/presentation/menu/settings_utils.dart

@@ -0,0 +1,20 @@
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/widgets.dart';
+
+class SettingsUtils {
+  static double getHorizontalPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isMobile(context)) {
+      return 17;
+    } else {
+      return 33;
+    }
+  }
+
+  static EdgeInsets getPaddingInFirstLevel(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isMobile(context)) {
+      return const EdgeInsets.only(left: 16, top: 12, bottom: 12, right: 16);
+    } else {
+      return const EdgeInsets.only(left: 32, top: 12, bottom: 12, right: 32);
+    }
+  }
+}

lib/features/manage_account/presentation/menu/widgets/setting_first_level_tile_builder.dart

@@ -0,0 +1,93 @@
+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/style_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
+
+typedef SettingFirstLevelTileClickAction = void Function();
+
+class SettingFirstLevelTileBuilder extends StatelessWidget {
+  SettingFirstLevelTileBuilder(
+    this.title,
+    this.settingIcon,
+    this.clickAction,
+    {
+      Key? key,
+      this.subtitle
+    }
+  ) : super(key: key);
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final _imagePath = Get.find<ImagePaths>();
+
+  final String settingIcon;
+  final String title;
+  final String? subtitle;
+  final SettingFirstLevelTileClickAction clickAction;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(child: Padding(
+      padding: const EdgeInsets.only(top: 24, bottom: 24),
+      child: Row(
+        children: [
+          Expanded(flex: 9, child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
+                  Padding(
+                    padding: EdgeInsets.only(left: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
+                    child: _buildSettingIcon(context)),
+                  Expanded(child: Padding(
+                    padding: const EdgeInsets.only(left: 12, right: 12),
+                    child: Text(
+                      title,
+                      maxLines: 1,
+                      softWrap: CommonTextStyle.defaultSoftWrap,
+                      overflow: CommonTextStyle.defaultTextOverFlow,
+                      style: const TextStyle(
+                        fontSize: 16,
+                        color: AppColor.colorNameEmail,
+                        fontWeight: FontWeight.w400,
+                      )
+                    )
+                  ))
+                ],
+              ),
+              subtitle != null
+                ? Padding(
+                    padding: EdgeInsets.only(left: _getSubtitleLeftPadding(context), right: 12, top: 12),
+                    child: Text(
+                      subtitle!,
+                      style: const TextStyle(
+                        fontSize: 13,
+                        color: AppColor.colorContentEmail,
+                        fontWeight: FontWeight.w400)))
+                : const SizedBox.shrink()
+            ]
+          )),
+         IconButton(
+           icon: SvgPicture.asset(
+             _imagePath.icCollapseFolder,
+             fit: BoxFit.fill,
+             color: AppColor.colorCollapseMailbox),
+           onPressed: clickAction
+        )
+      ])),
+      onTap: clickAction,
+    );
+  }
+
+  Widget _buildSettingIcon(BuildContext context) {
+    return SvgPicture.asset(settingIcon, height: 24, width: 24, fit: BoxFit.fill);
+  }
+
+  double _getSubtitleLeftPadding(BuildContext context) {
+    return SettingsUtils.getHorizontalPadding(context, _responsiveUtils) + 12 + 24;
+  }
+}

lib/features/manage_account/presentation/model/settings_page_level.dart

@@ -0,0 +1,4 @@
+enum SettingsPageLevel {
+  universal,
+  level1,
+}

lib/main/localizations/app_localizations.dart

@@ -2172,4 +2172,10 @@ class AppLocalizations {
       name: 'keepLocalCopyForwardLabel',
     );
   }
+
+  String get emailRuleSettingExplanation {
+    return Intl.message(
+      'Creating rules to handle incoming messages. You choose both the condition that triggers a rule and the actions the rule will take.',
+      name: 'emailRuleSettingExplanation');
+  }
 }