TF-297 Add LanguageAndRegionView and inject in ManageAccountDashboard

lib/features/manage_account/presentation/language_and_region/language_and_region_view.dart

@@ -0,0 +1,54 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/change_language_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart';
+
+class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  LanguageAndRegionView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: _responsiveUtils.isWebDesktop(context)
+          ? AppColor.colorBgDesktop
+          : Colors.white,
+      body: Container(
+        width: double.infinity,
+        margin: _responsiveUtils.isWebDesktop(context)
+          ? const EdgeInsets.only(left: 48, right: 24, top: 24, bottom: 24)
+          : EdgeInsets.zero,
+        color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white,
+        decoration: _responsiveUtils.isWebDesktop(context)
+            ? BoxDecoration(
+                borderRadius: BorderRadius.circular(20),
+                border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
+                color: Colors.white)
+            : null,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(
+              _responsiveUtils.isWebDesktop(context) ? 20 : 0),
+          child: Padding(
+            padding: EdgeInsets.only(
+                left: _responsiveUtils.isWebDesktop(context) ? 24 : 10,
+                top: 24,
+                right: 24),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const LanguageAndRegionHeaderWidget(),
+                const SizedBox(height: 22),
+                Expanded(child: ChangeLanguageWidget())
+              ]
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/features/manage_account/presentation/language_and_region/widgets/change_language_widget.dart

@@ -0,0 +1,59 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class ChangeLanguageWidget extends StatelessWidget {
+
+  final _controller = Get.find<LanguageAndRegionController>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  ChangeLanguageWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final titleLanguageWidget = Text(
+        AppLocalizations.of(context).language,
+        style: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.normal,
+          color: AppColor.colorContentEmail));
+
+    final dropDownMenuSelectLanguage = Row(children: [
+      Expanded(child: Obx(() =>
+        DropDownButtonWidget<Locale>(
+          items: _controller.listSupportedLanguages,
+          itemSelected: _controller.languageSelected.value,
+          onChanged: (newLanguage) =>
+              _controller.selectLanguage(newLanguage),
+          supportSelectionIcon: true))),
+    ]);
+
+    return LayoutBuilder(builder: (context, constraints) {
+      return ResponsiveWidget(
+        responsiveUtils: _responsiveUtils,
+        mobile: Scaffold(
+          body: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              titleLanguageWidget,
+              const SizedBox(height: 8),
+              dropDownMenuSelectLanguage
+            ]
+          )),
+        desktop: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            titleLanguageWidget,
+            const SizedBox(height: 8),
+            SizedBox(
+              width: constraints.maxWidth / 2,
+              child: dropDownMenuSelectLanguage
+            ),
+          ]));
+    });
+  }
+}

lib/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart

@@ -0,0 +1,28 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class LanguageAndRegionHeaderWidget extends StatelessWidget {
+
+  const LanguageAndRegionHeaderWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(AppLocalizations.of(context).languageAndRegion,
+          style: const TextStyle(
+              fontSize: 17,
+              fontWeight: FontWeight.bold,
+              color: Colors.black)),
+        const SizedBox(height: 4),
+        Text(AppLocalizations.of(context).languageAndRegionSubtitle,
+            style: const TextStyle(
+                fontSize: 15,
+                fontWeight: FontWeight.normal,
+                color: AppColor.colorTextButtonHeaderThread))
+      ]);
+  }
+}

lib/features/manage_account/presentation/manage_account_dashboard_bindings.dart

@@ -20,6 +20,7 @@ import 'package:tmail_ui_user/features/login/domain/usecases/get_credential_inte
 import 'package:tmail_ui_user/features/login/domain/usecases/get_stored_token_oidc_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/usecases/log_out_oidc_interactor.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_bindings.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_bindings.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/profiles/profiles_bindings.dart';
@@ -31,6 +32,7 @@ class ManageAccountDashBoardBindings extends BaseBindings {
     super.dependencies();
     ManageAccountMenuBindings().dependencies();
     ProfileBindings().dependencies();
+    LanguageAndRegionBindings().dependencies();
   }
 
   @override

lib/features/manage_account/presentation/manage_account_dashboard_view.dart

@@ -4,6 +4,7 @@ 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/mixin/user_setting_popup_menu_mixin.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/manage_account_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
@@ -11,8 +12,8 @@ import 'package:tmail_ui_user/features/manage_account/presentation/profiles/prof
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 
-class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardController> with
+class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardController>
-  UserSettingPopupMenuMixin {
+    with UserSettingPopupMenuMixin {
 
   final _responsiveUtils = Get.find<ResponsiveUtils>();
   final _imagePaths = Get.find<ImagePaths>();
@@ -36,64 +37,62 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
           desktop: const SizedBox.shrink()
       ),
       drawerEnableOpenDragGesture: !_responsiveUtils.isDesktop(context),
-      body: Stack(children: [
+      body: ResponsiveWidget(
-        ResponsiveWidget(
+          responsiveUtils: _responsiveUtils,
-            responsiveUtils: _responsiveUtils,
+          desktop: Column(children: [
-            desktop: Column(children: [
+            Row(children: [
-              Row(children: [
+              Container(width: 256, color: Colors.white,
-                Container(width: 256, color: Colors.white,
+                  padding: const EdgeInsets.only(top: 25, bottom: 25, left: 32),
-                    padding: const EdgeInsets.only(top: 25, bottom: 25, left: 32),
+                  child: Row(children: [
-                    child: Row(children: [
+                    (SloganBuilder(arrangedByHorizontal: true)
-                      (SloganBuilder(arrangedByHorizontal: true)
+                      ..setSloganText(AppLocalizations.of(context).app_name)
-                        ..setSloganText(AppLocalizations.of(context).app_name)
+                      ..setSloganTextAlign(TextAlign.center)
-                        ..setSloganTextAlign(TextAlign.center)
+                      ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
-                        ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
+                      ..setSizeLogo(24)
-                        ..setSizeLogo(24)
+                      ..addOnTapCallback(() => controller.backToMailboxDashBoard())
-                        ..addOnTapCallback(() => controller.backToMailboxDashBoard())
+                      ..setLogo(_imagePaths.icLogoTMail))
-                        ..setLogo(_imagePaths.icLogoTMail))
+                    .build(),
-                      .build(),
+                    Obx(() {
-                      Obx(() {
+                      if (controller.appInformation.value != null) {
-                        if (controller.appInformation.value != null) {
+                        return Padding(padding: const EdgeInsets.only(top: 6),
-                          return Padding(padding: const EdgeInsets.only(top: 6),
+                            child: Text(
-                              child: Text(
+                              'v.${controller.appInformation.value!.version}',
-                                'v.${controller.appInformation.value!.version}',
+                              textAlign: TextAlign.center,
-                                textAlign: TextAlign.center,
+                              style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
-                                style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
+                            ));
-                              ));
+                      } else {
-                        } else {
+                        return const SizedBox.shrink();
-                          return const SizedBox.shrink();
+                      }
-                        }
+                    }),
-                      }),
+                  ])
-                    ])
+              ),
-                ),
+              Expanded(child: Padding(
-                Expanded(child: Padding(
+                  padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48),
-                    padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48),
+                  child: _buildRightHeader(context)))
-                    child: _buildRightHeader(context)))
-              ]),
-              Expanded(child: Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenu),
-                  Expanded(child: _viewDisplayedOfAccountMenuItem())
-                ],
-              ))
             ]),
-            mobile: SafeArea(
+            Expanded(child: Row(
-                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+              crossAxisAlignment: CrossAxisAlignment.start,
-                    Padding(
+              children: [
-                        padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context)
+                SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenu),
-                            ? const EdgeInsets.only(left: 4, right: 8)
+                Expanded(child: _viewDisplayedOfAccountMenuItem())
-                            : const EdgeInsets.only(top: 16, left: 24, right: 32),
+              ],
-                        child: _buildAppbar(context)),
+            ))
-                    Expanded(child: Padding(
+          ]),
-                        padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context)
+          mobile: SafeArea(
-                            ? const EdgeInsets.only(left: 8)
+              child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-                            : const EdgeInsets.only(left: 24),
+                  Padding(
-                        child: _viewDisplayedOfAccountMenuItem()))
+                      padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context)
-                ])
+                          ? const EdgeInsets.only(left: 4, right: 8)
-            )
+                          : const EdgeInsets.only(top: 16, left: 24, right: 32),
-        ),
+                      child: _buildAppbar(context)),
-      ]),
+                  Expanded(child: Padding(
+                      padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context)
+                          ? const EdgeInsets.only(left: 8)
+                          : const EdgeInsets.only(left: 24),
+                      child: _viewDisplayedOfAccountMenuItem()))
+              ])
+          )
+      ),
     );
   }
 
@@ -141,11 +140,15 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
   }
 
   Widget _viewDisplayedOfAccountMenuItem() {
-    switch(controller.accountMenuItemSelected.value) {
+    return Obx(() {
-      case AccountMenuItem.profiles:
+      switch(controller.accountMenuItemSelected.value) {
-        return ProfilesView();
+        case AccountMenuItem.profiles:
-      default:
+          return ProfilesView();
-        return const SizedBox.shrink();
+        case AccountMenuItem.languageAndRegion:
-    }
+          return LanguageAndRegionView();
+        default:
+          return const SizedBox.shrink();
+      }
+    });
   }
 }

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

@@ -63,7 +63,7 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                             ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorBgMailboxSelected))
                             ..paddingIcon(const EdgeInsets.only(right: 8))
                             ..iconColor(AppColor.colorTextButton)
-                            ..maxWidth(85)
+                            ..maxWidth(100)
                             ..size(16)
                             ..radiusSplash(10)
                             ..padding(const EdgeInsets.symmetric(vertical: 10))

lib/features/manage_account/presentation/profiles/identities/identities_view.dart

@@ -1,6 +1,5 @@
 
 import 'package:core/core.dart';
-import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 import 'package:flutter_svg/flutter_svg.dart';
@@ -8,6 +7,7 @@ import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/identities/identity.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/base/mixin/popup_menu_widget_mixin.dart';
+import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/identities_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/widgets/identity_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/widgets/identity_info_tile_builder.dart';
@@ -23,49 +23,11 @@ class IdentitiesView extends GetWidget<IdentitiesController> with PopupMenuWidge
   @override
   Widget build(BuildContext context) {
     final buttonSelectIdentity = Row(children: [
-      Expanded(child: Obx(() => DropdownButtonHideUnderline(
+      Expanded(child: Obx(() => DropDownButtonWidget<Identity>(
-        child: DropdownButton2<Identity>(
+          items: controller.listAllIdentities,
-          isExpanded: true,
+          itemSelected: controller.identitySelected.value,
-          hint: Row(
-            children: [
-              Expanded(child: Text(
-                controller.identitySelected.value?.name ?? '',
-                style: const TextStyle(fontSize: 16, fontWeight: FontWeight.normal, color: Colors.black),
-                maxLines: 1,
-                overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
-              )),
-            ],
-          ),
-          items: controller.listAllIdentities.map((item) => DropdownMenuItem<Identity>(
-            value: item,
-            child: Text(
-              item.name ?? '',
-              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.normal, color: Colors.black),
-              maxLines: 1,
-              overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
-            ),
-          )).toList(),
-          value: controller.identitySelected.value,
           onChanged: (newIdentity) => controller.selectIdentity(newIdentity),
-          icon: SvgPicture.asset(_imagePaths.icDropDown),
+          supportSelectionIcon: true))),
-          buttonPadding: const EdgeInsets.symmetric(horizontal: 12),
-          buttonDecoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              border: Border.all(color: AppColor.colorInputBorderCreateMailbox, width: 0.5),
-              color: AppColor.colorInputBackgroundCreateMailbox),
-          itemHeight: 44,
-          buttonHeight: 44,
-          selectedItemHighlightColor: Colors.black12,
-          itemPadding: const EdgeInsets.symmetric(horizontal: 12),
-          dropdownMaxHeight: 200,
-          dropdownDecoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              color: Colors.white),
-          dropdownElevation: 4,
-          scrollbarRadius: const Radius.circular(40),
-          scrollbarThickness: 6,
-        ),
-      ))),
       if (!_responsiveUtils.isMobile(context)) const SizedBox(width: 12),
       if (!_responsiveUtils.isMobile(context))
         (ButtonBuilder(_imagePaths.icAddIdentity)

lib/features/manage_account/presentation/profiles/profiles_view.dart

@@ -15,50 +15,61 @@ class ProfilesView extends GetWidget<ProfilesController> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
+      backgroundColor: _responsiveUtils.isWebDesktop(context)
+          ? AppColor.colorBgDesktop
+          : Colors.white,
       body: Container(
-        margin: _responsiveUtils.isDesktop(context)
+        margin: _responsiveUtils.isWebDesktop(context)
           ? const EdgeInsets.only(left: 48, right: 24, top: 24, bottom: 24)
           : EdgeInsets.zero,
-        decoration: BoxDecoration(
+        color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white,
-            borderRadius: _responsiveUtils.isDesktop(context) ? BorderRadius.circular(20) : null,
+        decoration: _responsiveUtils.isWebDesktop(context)
-            border: _responsiveUtils.isDesktop(context) ? Border.all(color: AppColor.colorBorderBodyThread, width: 1) : null,
+            ? BoxDecoration(
-            color: Colors.white),
+                borderRadius: BorderRadius.circular(20),
-        padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
+                border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
-        child: DefaultTabController(
+                color: Colors.white)
-            initialIndex: 0,
+            : null,
-            length: 1,
+        child: ClipRRect(
-            child: Scaffold(
+          borderRadius: BorderRadius.circular(
-              appBar: TabBar(
+              _responsiveUtils.isWebDesktop(context) ? 20 : 0),
-                  unselectedLabelColor: AppColor.colorTextButtonHeaderThread,
+          child: Padding(
-                  unselectedLabelStyle: const TextStyle(
+            padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
-                      fontSize: 15,
+            child: DefaultTabController(
-                      fontWeight: FontWeight.normal,
+                initialIndex: 0,
-                      color: AppColor.colorTextButtonHeaderThread),
+                length: 1,
-                  labelStyle: const TextStyle(
+                child: Scaffold(
-                      fontSize: 15,
+                  appBar: TabBar(
-                      fontWeight: FontWeight.w500,
+                      unselectedLabelColor: AppColor.colorTextButtonHeaderThread,
-                      color: AppColor.primaryColor),
+                      unselectedLabelStyle: const TextStyle(
-                  labelColor: AppColor.primaryColor,
+                          fontSize: 15,
-                  indicatorSize: TabBarIndicatorSize.label,
+                          fontWeight: FontWeight.normal,
-                  isScrollable: true,
+                          color: AppColor.colorTextButtonHeaderThread),
-                  indicator: const CustomIndicator(
+                      labelStyle: const TextStyle(
-                    indicatorHeight: 4,
+                          fontSize: 15,
-                    indicatorColor: AppColor.primaryColor,
+                          fontWeight: FontWeight.w500,
-                    indicatorSize: CustomIndicatorSize.full),
+                          color: AppColor.primaryColor),
-                  onTap: (index) {},
+                      labelColor: AppColor.primaryColor,
-                  tabs: [
+                      indicatorSize: TabBarIndicatorSize.label,
-                    Tab(text: ProfilesTabType.identities.getName(context)),
+                      isScrollable: true,
+                      indicator: const CustomIndicator(
+                        indicatorHeight: 4,
+                        indicatorColor: AppColor.primaryColor,
+                        indicatorSize: CustomIndicatorSize.full),
+                      onTap: (index) {},
+                      tabs: [
+                        Tab(text: ProfilesTabType.identities.getName(context)),
+                      ]),
+                  body: Column(children: [
+                    const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
+                    Expanded(child: TabBarView(
+                      children: [
+                        IdentitiesView(),
+                      ],
+                    ))
                   ]),
-              body: Column(children: [
+                )
-                const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
+            ),
-                Expanded(child: TabBarView(
+          ),
-                  children: [
-                    IdentitiesView(),
-                  ],
-                ))
-              ]),
-            )
         ),
       ),
     );