Apply new style Language section in Setting on mobile

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/manage_account/presentation/language_and_region/extensions/locale_extension.dart

@@ -4,22 +4,22 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 extension LocaleExtension on Locale {
 
-  String getLanguageNameByCurrentLocale(BuildContext context) {
+  String getLanguageNameByCurrentLocale(AppLocalizations appLocalizations) {
     switch(languageCode) {
       case 'fr':
-        return AppLocalizations.of(context).languageFrench;
+        return appLocalizations.languageFrench;
       case 'en':
-        return AppLocalizations.of(context).languageEnglish;
+        return appLocalizations.languageEnglish;
       case 'vi':
-        return AppLocalizations.of(context).languageVietnamese;
+        return appLocalizations.languageVietnamese;
       case 'ru':
-        return AppLocalizations.of(context).languageRussian;
+        return appLocalizations.languageRussian;
       case 'ar':
-        return AppLocalizations.of(context).languageArabic;
+        return appLocalizations.languageArabic;
       case 'it':
-        return AppLocalizations.of(context).languageItalian;
+        return appLocalizations.languageItalian;
       case 'de':
-        return AppLocalizations.of(context).languageGerman;
+        return appLocalizations.languageGerman;
       default:
         return '';
     }

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

@@ -1,8 +1,6 @@
-
-import 'dart:ui';
-
 import 'package:core/presentation/state/success.dart';
 import 'package:core/utils/app_logger.dart';
+import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:server_settings/server_settings/capability_server_settings.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
@@ -11,8 +9,11 @@ import 'package:tmail_ui_user/features/manage_account/domain/state/save_language
 import 'package:tmail_ui_user/features/manage_account/domain/usecases/save_language_interactor.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/usecases/save_language_to_server_settings_interactor.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/language/context_item_language_action.dart';
 import 'package:tmail_ui_user/main/error/capability_validator.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/localizations/localization_service.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 
 class LanguageAndRegionController extends BaseController {
 
@@ -75,4 +76,24 @@ class LanguageAndRegionController extends BaseController {
       localeCurrent,
     ));
   }
+
+  void openLanguageContextMenu(BuildContext context) {
+    final contextMenuActions = listSupportedLanguages.map((language) {
+      return ContextItemLanguageAction(
+        language,
+        languageSelected.value,
+        AppLocalizations.of(context),
+        imagePaths,
+      );
+    }).toList();
+
+    openBottomSheetContextMenuAction(
+      context: context,
+      itemActions: contextMenuActions,
+      onContextMenuActionClick: (menuAction) {
+        popBack();
+        selectLanguage(menuAction.action);
+      },
+    );
+  }
 }

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

@@ -45,11 +45,20 @@ class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
               else
                 const SettingExplanationWidget(
                   menuItem: AccountMenuItem.languageAndRegion,
+                  padding: EdgeInsetsDirectional.only(
+                    start: 16,
+                    end: 16,
+                    bottom: 16,
+                  ),
+                  isCenter: true,
                 ),
-              const Expanded(
+              Expanded(
                 child: Padding(
-                  padding: EdgeInsets.only(top: 39),
-                  child: ChangeLanguageButtonWidget(),
+                  padding: const EdgeInsets.only(top: 39),
+                  child: ChangeLanguageButtonWidget(
+                    onOpenLanguageContextMenu:
+                      controller.openLanguageContextMenu,
+                  ),
                 ),
               ),
             ],

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

@@ -12,9 +12,16 @@ import 'package:tmail_ui_user/features/manage_account/presentation/language_and_
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/language_menu_overlay.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
+typedef OnOpenLanguageContextMenuAction = Function(BuildContext context);
+
 class ChangeLanguageButtonWidget extends StatefulWidget {
 
-  const ChangeLanguageButtonWidget({Key? key}) : super(key: key);
+  final OnOpenLanguageContextMenuAction? onOpenLanguageContextMenu;
+
+  const ChangeLanguageButtonWidget({
+    Key? key,
+    this.onOpenLanguageContextMenu,
+  }) : super(key: key);
 
   @override
   State<ChangeLanguageButtonWidget> createState() => _ChangeLanguageButtonWidgetState();
@@ -44,15 +51,19 @@ class _ChangeLanguageButtonWidgetState extends State<ChangeLanguageButtonWidget>
         ],
       );
     } else {
-      return Scaffold(
-        body: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            _buildTitleLanguageWidget(context),
-            const SizedBox(height: 8),
-            _buildLanguageMenu(context, double.infinity),
-          ],
-        ),
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: _getMobileTitlePadding(context),
+            child: _buildTitleLanguageWidget(context),
+          ),
+          const SizedBox(height: 12),
+          Padding(
+            padding: _getMobileLanguageMenuPadding(context),
+            child: _buildMobileLanguageMenu(context),
+          ),
+        ],
       );
     }
   }
@@ -90,7 +101,7 @@ class _ChangeLanguageButtonWidgetState extends State<ChangeLanguageButtonWidget>
                 widthFactor: 1,
               ),
             ),
-            portalFollower: Obx(() => LanguageRegionOverlay(
+            portalFollower: LanguageRegionOverlay(
               imagePaths: _imagePaths,
               responsiveUtils: _responsiveUtils,
               listSupportedLanguages: _languageAndRegionController.listSupportedLanguages,
@@ -100,13 +111,13 @@ class _ChangeLanguageButtonWidgetState extends State<ChangeLanguageButtonWidget>
                 _toggleLanguageMenuOverlay(false);
                 _languageAndRegionController.selectLanguage(language);
               },
-            )),
+            ),
             visible: isVisible,
             child: TMailDropDownWidget(
               text: _languageAndRegionController
                 .languageSelected
                 .value
-                .getLanguageNameByCurrentLocale(context),
+                .getLanguageNameByCurrentLocale(AppLocalizations.of(context)),
               dropDownIcon: _imagePaths.icDropDown,
               backgroundColor: isVisible
                 ? AppColor.lightGrayEBEDF0.withOpacity(0.6)
@@ -119,13 +130,38 @@ class _ChangeLanguageButtonWidgetState extends State<ChangeLanguageButtonWidget>
     );
   }
 
+  Widget _buildMobileLanguageMenu(BuildContext context) {
+    return Obx(() => TMailDropDownWidget(
+      text: _languageAndRegionController
+          .languageSelected
+          .value
+          .getLanguageNameByCurrentLocale(AppLocalizations.of(context)),
+      dropDownIcon: _imagePaths.icDropDown,
+      onTap: () => widget.onOpenLanguageContextMenu?.call(context),
+    ));
+  }
+
   void _toggleLanguageMenuOverlay(bool visible) {
     _languageMenuIsVisibleNotifier.value = visible;
   }
 
-  @override
-  void dispose() {
-    _languageMenuIsVisibleNotifier.dispose();
-    super.dispose();
+  EdgeInsetsGeometry _getMobileTitlePadding(BuildContext context) {
+    if (_responsiveUtils.isPortraitMobile(context)) {
+      return const EdgeInsetsDirectional.symmetric(horizontal: 28);
+    } else if (_responsiveUtils.isLandscapeMobile(context)) {
+      return const EdgeInsetsDirectional.symmetric(horizontal: 40);
+    } else {
+      return const EdgeInsetsDirectional.symmetric(horizontal: 50);
+    }
+  }
+
+  EdgeInsetsGeometry _getMobileLanguageMenuPadding(BuildContext context) {
+    if (_responsiveUtils.isPortraitMobile(context)) {
+      return const EdgeInsetsDirectional.symmetric(horizontal: 20);
+    } else if (_responsiveUtils.isLandscapeMobile(context)) {
+      return const EdgeInsetsDirectional.symmetric(horizontal: 24);
+    } else {
+      return const EdgeInsetsDirectional.symmetric(horizontal: 44);
+    }
   }
 }

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

@@ -4,6 +4,7 @@ import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/extensions/locale_extension.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnSelectLanguageAction = Function(Locale? localeSelected);
 
@@ -35,7 +36,7 @@ class LanguageItemWidget extends StatelessWidget {
           height: 51,
           child: Row(children: [
             Expanded(child: Text(
-              '${localeCurrent.getLanguageNameByCurrentLocale(context)} - ${localeCurrent.getSourceLanguageName()}',
+              '${localeCurrent.getLanguageNameByCurrentLocale(AppLocalizations.of(context))} - ${localeCurrent.getSourceLanguageName()}',
               style: ThemeUtils.textStyleInter400.copyWith(
                 letterSpacing: -0.15,
                 fontSize: 16,