TF-1581 Update UI to support language RTL

lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart

@@ -57,6 +57,7 @@ class EmailRulesHeaderWidget extends StatelessWidget {
             ..iconColor(Colors.white)
             ..size(20)
             ..radiusSplash(10)
+            ..addBoxConstraints(const BoxConstraints(minWidth: 130))
             ..padding(const EdgeInsets.symmetric(vertical: 12,horizontal: 8))
             ..textStyle(const TextStyle(
               fontSize: 17,
@@ -68,7 +69,7 @@ class EmailRulesHeaderWidget extends StatelessWidget {
               AppLocalizations.of(context).addNewRule,
               isVertical: false,
             )).build(),
-          const Expanded(child: SizedBox()),
+          const Spacer(),
         ],
       );
     } else {

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

@@ -34,7 +34,7 @@ extension LocaleExtension on Locale {
       case 'ru':
         return 'Русский';
       case 'ar':
-        return 'اَلْعَرَبِيَّةُ';
+        return 'عربي';
       case 'it':
         return 'Italiano';
       default:

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

@@ -2,11 +2,13 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_portal/flutter_portal.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_button_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
 
@@ -16,36 +18,44 @@ class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
 
   @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.all(24)
-          : EdgeInsets.symmetric(horizontal: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
-        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 : 0,
-                top: 24),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                const LanguageAndRegionHeaderWidget(),
-                const SizedBox(height: 22),
-                Expanded(child: ChangeLanguageButtonWidget())
-              ]
+    return Portal(
+      child: Scaffold(
+        backgroundColor: _responsiveUtils.isWebDesktop(context)
+            ? AppColor.colorBgDesktop
+            : Colors.white,
+        body: Container(
+          width: double.infinity,
+          margin: _responsiveUtils.isWebDesktop(context)
+            ? const EdgeInsets.all(24)
+            : EdgeInsets.symmetric(horizontal: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
+          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(
+                right: AppUtils.isDirectionRTL(context)
+                  ? _responsiveUtils.isWebDesktop(context) ? 24 : 0
+                  : 0,
+                left: AppUtils.isDirectionRTL(context)
+                  ? 0
+                  : _responsiveUtils.isWebDesktop(context) ? 24 : 0,
+                top: 24
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const LanguageAndRegionHeaderWidget(),
+                  const SizedBox(height: 22),
+                  Expanded(child: ChangeLanguageButtonWidget())
+                ]
+              ),
             ),
           ),
         ),

lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart

@@ -16,6 +16,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visib
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_header_widget.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
   with AppLoaderMixin,
@@ -137,7 +138,11 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
             context,
             key: const Key('children_tree_mailbox_child'),
             isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-            paddingChild: const EdgeInsets.only(left: 10),
+            isDirectionRTL: AppUtils.isDirectionRTL(context),
+            paddingChild: EdgeInsets.only(
+              left: AppUtils.isDirectionRTL(context) ? 0 : 10,
+              right: AppUtils.isDirectionRTL(context) ? 10 : 0,
+            ),
             parent: MailBoxVisibilityFolderTileBuilder(
               _imagePaths,
               mailboxNode,

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart

@@ -9,6 +9,7 @@ import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_ma
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
 
@@ -75,7 +76,7 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
         else
           const SizedBox(width: 24),
         if (!_mailboxNode.item.isTeamMailboxes)
-          _buildMailboxIcon(),
+          _buildMailboxIcon(context),
       ]
     );
   }
@@ -113,9 +114,12 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
     );
   }
 
-  Widget _buildMailboxIcon() {
+  Widget _buildMailboxIcon(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(right: 8),
+      padding: EdgeInsets.only(
+        right: AppUtils.isDirectionRTL(context) ? 0 : 8,
+        left: AppUtils.isDirectionRTL(context) ? 8 : 0,
+      ),
       child: SvgPicture.asset(
         _mailboxNode.item.getMailboxIcon(_imagePaths),
         width: 20,

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_header_widget.dart

@@ -1,6 +1,7 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class MailboxVisibilityHeaderWidget extends StatelessWidget {
 
@@ -9,7 +10,10 @@ class MailboxVisibilityHeaderWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(left: 24),
+      padding: EdgeInsets.only(
+        left: AppUtils.isDirectionRTL(context) ? 0 : 24,
+        right: AppUtils.isDirectionRTL(context) ? 24 : 0
+      ),
       child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [

lib/features/manage_account/presentation/manage_account_dashboard_view.dart

@@ -11,6 +11,7 @@ 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/extensions/vacation_response_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.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/forward/forward_view.dart';
@@ -46,7 +47,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
               desktop: Column(children: [
                 Row(children: [
                   Container(width: 256, color: Colors.white,
-                      padding: const EdgeInsets.only(top: 25, bottom: 25, left: 32),
+                      padding: SettingsUtils.getPaddingHeaderSetting(context),
                       child: Row(children: [
                         (SloganBuilder(arrangedByHorizontal: true)
                           ..setSloganText(AppLocalizations.of(context).app_name)
@@ -71,7 +72,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
                       ])
                   ),
                   Expanded(child: Padding(
-                      padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48),
+                      padding: SettingsUtils.getPaddingRightHeaderSetting(context),
                       child: _buildRightHeader(context)))
                 ]),
                 Expanded(child: Row(

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

@@ -6,6 +6,7 @@ import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/widgets/account_menu_item_tile_builder.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
 
@@ -57,11 +58,18 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                       color: _responsiveUtils.isWebDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
                       child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                       Padding(
-                          padding: const EdgeInsets.only(left: 20, top: 24),
+                          padding: EdgeInsets.only(
+                            left: AppUtils.isDirectionRTL(context) ? 0 : 20,
+                            right: AppUtils.isDirectionRTL(context) ? 20 : 0,
+                            top: 24
+                          ),
                           child: (ButtonBuilder(_imagePaths.icBack)
                             ..key(const Key('button_back'))
                             ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorBgMailboxSelected))
-                            ..paddingIcon(const EdgeInsets.only(right: 8))
+                            ..paddingIcon(EdgeInsets.only(
+                                right: AppUtils.isDirectionRTL(context) ? 0 : 8,
+                                left: AppUtils.isDirectionRTL(context) ? 8 : 0,
+                            ))
                             ..iconColor(AppColor.colorTextButton)
                             ..maxWidth(100)
                             ..size(16)
@@ -72,14 +80,21 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                             ..text(AppLocalizations.of(context).back, isVertical: false))
                           .build()),
                         Padding(
-                            padding: const EdgeInsets.only(left: 32, top: 20),
+                            padding: EdgeInsets.only(
+                              left: AppUtils.isDirectionRTL(context) ? 0 : 32,
+                              right: AppUtils.isDirectionRTL(context) ? 32 : 0,
+                              top: 20
+                            ),
                             child: Text(
                                 AppLocalizations.of(context).manage_account,
                                 style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 17))),
                         const SizedBox(height: 12),
                         Obx(
                           () => ListView.builder(
-                              padding: const EdgeInsets.only(left: 16, right: 8),
+                              padding: EdgeInsets.only(
+                                left: AppUtils.isDirectionRTL(context) ? 8 : 16,
+                                right: AppUtils.isDirectionRTL(context) ? 16 : 8
+                              ),
                               key: const Key('list_manage_account_property'),
                               shrinkWrap: true,
                               itemCount: controller.listAccountMenuItem.length,
@@ -95,21 +110,31 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                         const Padding(
                             padding: EdgeInsets.symmetric(vertical: 16),
                             child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
-                        Padding(padding: const EdgeInsets.only(left: 32),
-                            child: InkWell(
-                                onTap: () {
-                                  controller.logout(
-                                    controller.dashBoardController.sessionCurrent.value,
-                                    controller.dashBoardController.accountId.value
-                                  );
-                                },
-                                child: Row(children: [
-                                  SvgPicture.asset(_imagePaths.icSignOut, fit: BoxFit.fill),
-                                  const SizedBox(width: 12),
-                                  Expanded(child: Text(AppLocalizations.of(context).sign_out,
-                                      style: const TextStyle(fontWeight: FontWeight.normal, fontSize: 15, color: Colors.black)))
-                                ])
-                            )
+                        Padding(
+                          padding: EdgeInsets.only(
+                            left: AppUtils.isDirectionRTL(context) ? 0 : 32,
+                            right: AppUtils.isDirectionRTL(context) ? 32 : 0,
+                          ),
+                          child: InkWell(
+                            onTap: () {
+                              controller.logout(
+                                controller.dashBoardController.sessionCurrent.value,
+                                controller.dashBoardController.accountId.value
+                              );
+                            },
+                            child: Row(children: [
+                              SvgPicture.asset(_imagePaths.icSignOut, fit: BoxFit.fill),
+                              const SizedBox(width: 12),
+                              Expanded(child: Text(
+                                AppLocalizations.of(context).sign_out,
+                                style: const TextStyle(
+                                  fontWeight: FontWeight.normal,
+                                  fontSize: 15,
+                                  color: Colors.black
+                                )
+                              ))
+                            ])
+                          )
                         ),
                       ]),
                     )),

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

@@ -9,6 +9,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings
 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';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class SettingsFirstLevelView extends GetWidget<SettingsController> {
   SettingsFirstLevelView({Key? key}) : super(key: key);
@@ -25,7 +26,10 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
           child: UserInformationWidgetBuilder(
             _imagePaths,
             controller.manageAccountDashboardController.userProfile.value,
-            titlePadding: const EdgeInsets.only(left: 16))
+            titlePadding: EdgeInsets.only(
+              left: AppUtils.isDirectionRTL(context) ? 0 : 16,
+              right: AppUtils.isDirectionRTL(context) ? 16 : 0
+            ))
         )),
         Divider(
           color: AppColor.colorDividerComposer,

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

@@ -21,6 +21,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/profiles/prof
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/vacation_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 typedef CloseSettingsViewAction = void Function();
 
@@ -66,9 +67,12 @@ class SettingsView extends GetWidget<SettingsController> {
                   fromAccountDashBoard: true,
                   vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
                   padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
-                  leadingIcon: const Padding(
-                    padding: EdgeInsets.only(right: 16),
-                    child: Icon(Icons.timer, size: 20),
+                  leadingIcon: Padding(
+                    padding: EdgeInsets.only(
+                      right: AppUtils.isDirectionRTL(context) ? 0 : 16,
+                      left: AppUtils.isDirectionRTL(context) ? 16 : 0,
+                    ),
+                    child: const Icon(Icons.timer, size: 20),
                   )
                 );
               } else {
@@ -131,13 +135,14 @@ class SettingsView extends GetWidget<SettingsController> {
                 padding: const EdgeInsets.symmetric(horizontal: 8),
                 child: Row(mainAxisSize: MainAxisSize.min, children: [
                   SvgPicture.asset(
-                      _imagePaths.icBack,
-                      width: 18,
-                      height: 18,
+                      AppUtils.isDirectionRTL(context) ? _imagePaths.icCollapseFolder : _imagePaths.icBack,
                       colorFilter: AppColor.colorTextButton.asFilter(),
                       fit: BoxFit.fill),
                   Container(
-                    margin: const EdgeInsets.only(left: 8),
+                    margin: EdgeInsets.only(
+                      left: AppUtils.isDirectionRTL(context) ? 0 : 8,
+                      right: AppUtils.isDirectionRTL(context) ? 8 : 0,
+                    ),
                     constraints: const BoxConstraints(maxWidth: 100),
                     child: Text(
                         AppLocalizations.of(context).settings,

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

@@ -2,6 +2,7 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/utils/build_utils.dart';
 import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class SettingsUtils {
   static double getHorizontalPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
@@ -142,4 +143,20 @@ class SettingsUtils {
       return EdgeInsets.zero;
     }
   }
+
+  static EdgeInsets getPaddingHeaderSetting(BuildContext context) {
+    if (AppUtils.isDirectionRTL(context)) {
+      return const EdgeInsets.only(top: 25, bottom: 25, right: 32);
+    } else {
+      return const EdgeInsets.only(top: 25, bottom: 25, left: 32);
+    }
+  }
+
+  static EdgeInsets getPaddingRightHeaderSetting(BuildContext context) {
+    if (AppUtils.isDirectionRTL(context)) {
+      return const EdgeInsets.only(right: 48, top: 16, bottom: 10, left: 10);
+    } else {
+      return const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48);
+    }
+  }
 }

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

@@ -6,6 +6,7 @@ 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';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 typedef SettingFirstLevelTileClickAction = void Function();
 
@@ -41,7 +42,10 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
               Row(
                 children: [
                   Padding(
-                    padding: EdgeInsets.only(left: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
+                    padding: EdgeInsets.only(
+                      right: AppUtils.isDirectionRTL(context) ? SettingsUtils.getHorizontalPadding(context, _responsiveUtils) : 0,
+                      left: AppUtils.isDirectionRTL(context) ? 0 : SettingsUtils.getHorizontalPadding(context, _responsiveUtils),
+                    ),
                     child: _buildSettingIcon(context)),
                   Expanded(child: Padding(
                     padding: const EdgeInsets.only(left: 12, right: 12),
@@ -61,7 +65,11 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
               ),
               subtitle != null
                 ? Padding(
-                    padding: EdgeInsets.only(left: _getSubtitleLeftPadding(context), right: 12, top: 12),
+                    padding: EdgeInsets.only(
+                      left: AppUtils.isDirectionRTL(context) ? 12 : _getSubtitleLeftPadding(context),
+                      right: AppUtils.isDirectionRTL(context) ? _getSubtitleLeftPadding(context) : 12,
+                      top: 12
+                    ),
                     child: Text(
                       subtitle!,
                       style: const TextStyle(
@@ -72,9 +80,12 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
             ]
           )),
          IconButton(
-           padding: EdgeInsets.only(right: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
+           padding: EdgeInsets.only(
+             right: AppUtils.isDirectionRTL(context) ? 0 : SettingsUtils.getHorizontalPadding(context, _responsiveUtils),
+             left: AppUtils.isDirectionRTL(context) ? SettingsUtils.getHorizontalPadding(context, _responsiveUtils) : 0,
+           ),
            icon: SvgPicture.asset(
-             _imagePath.icCollapseFolder,
+             AppUtils.isDirectionRTL(context) ? _imagePath.icBack : _imagePath.icCollapseFolder,
              fit: BoxFit.fill,
              colorFilter: AppColor.colorCollapseMailbox.asFilter()),
            onPressed: clickAction

lib/features/manage_account/presentation/vacation/vacation_view.dart

@@ -419,10 +419,9 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
   Widget _buildMessagePlainTextEditor(BuildContext context) {
     return (TextFieldBuilder()
       ..onChange((value) => controller.updateMessageBody(context, value))
-      ..textInputAction(TextInputAction.next)
+      ..keyboardType(TextInputType.multiline)
       ..addController(controller.messageTextController)
       ..textStyle(const TextStyle(color: Colors.black, fontSize: 16))
-      ..keyboardType(TextInputType.text)
       ..minLines(10)
       ..maxLines(null)
       ..textDecoration((TextInputDecorationBuilder()