From 87f02ef7fd6a78690c11204d1337fe0989aaaed0 Mon Sep 17 00:00:00 2001 From: Dat PHAM HOANG Date: Wed, 24 Aug 2022 12:12:42 +0700 Subject: [PATCH] TF-788 Build up Settings Screen with SettingsFirstLevelTileBuilder --- .../menu/settings/settings_bindings.dart | 32 ++++ .../menu/settings/settings_controller.dart | 20 +++ .../settings/settings_first_level_view.dart | 67 ++++++++ .../menu/settings/settings_view.dart | 143 ++++++++++++++++++ .../presentation/menu/settings_utils.dart | 20 +++ .../setting_first_level_tile_builder.dart | 93 ++++++++++++ .../model/settings_page_level.dart | 4 + lib/main/localizations/app_localizations.dart | 6 + 8 files changed, 385 insertions(+) create mode 100644 lib/features/manage_account/presentation/menu/settings/settings_bindings.dart create mode 100644 lib/features/manage_account/presentation/menu/settings/settings_controller.dart create mode 100644 lib/features/manage_account/presentation/menu/settings/settings_first_level_view.dart create mode 100644 lib/features/manage_account/presentation/menu/settings/settings_view.dart create mode 100644 lib/features/manage_account/presentation/menu/settings_utils.dart create mode 100644 lib/features/manage_account/presentation/menu/widgets/setting_first_level_tile_builder.dart create mode 100644 lib/features/manage_account/presentation/model/settings_page_level.dart diff --git a/lib/features/manage_account/presentation/menu/settings/settings_bindings.dart b/lib/features/manage_account/presentation/menu/settings/settings_bindings.dart new file mode 100644 index 000000000..66e8425a9 --- /dev/null +++ b/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() { + } + +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/menu/settings/settings_controller.dart b/lib/features/manage_account/presentation/menu/settings/settings_controller.dart new file mode 100644 index 000000000..07822e1f5 --- /dev/null +++ b/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(); + + 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; + } +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/menu/settings/settings_first_level_view.dart b/lib/features/manage_account/presentation/menu/settings/settings_first_level_view.dart new file mode 100644 index 000000000..091a3f1b6 --- /dev/null +++ b/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 { + SettingsFirstLevelView({Key? key}) : super(key: key); + + final _responsiveUtils = Get.find(); + final _imagePaths = Get.find(); + + @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) + ), + ]); + } +} diff --git a/lib/features/manage_account/presentation/menu/settings/settings_view.dart b/lib/features/manage_account/presentation/menu/settings/settings_view.dart new file mode 100644 index 000000000..ddd8d2d21 --- /dev/null +++ b/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 { + SettingsView({Key? key, this.closeAction}) : super(key: key); + + final _responsiveUtils = Get.find(); + final _imagePaths = Get.find(); + 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(); + } + }); + } +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/menu/settings_utils.dart b/lib/features/manage_account/presentation/menu/settings_utils.dart new file mode 100644 index 000000000..0f162bf9d --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/menu/widgets/setting_first_level_tile_builder.dart b/lib/features/manage_account/presentation/menu/widgets/setting_first_level_tile_builder.dart new file mode 100644 index 000000000..3cfa2758c --- /dev/null +++ b/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(); + final _imagePath = Get.find(); + + 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; + } +} diff --git a/lib/features/manage_account/presentation/model/settings_page_level.dart b/lib/features/manage_account/presentation/model/settings_page_level.dart new file mode 100644 index 000000000..f17b3cb7f --- /dev/null +++ b/lib/features/manage_account/presentation/model/settings_page_level.dart @@ -0,0 +1,4 @@ +enum SettingsPageLevel { + universal, + level1, +} \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index 734f4dc4c..07e971f22 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/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'); + } } \ No newline at end of file