TF-1581 Update UI to support language RTL

2023-03-10 13:05:00 +07:00
parent 42bde0e415
commit 9af4924b9a
44 changed files with 821 additions and 392 deletions
@@ -14,6 +14,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_fold
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
 import 'package:tmail_ui_user/features/quotas/presentation/widget/quotas_footer_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';

 class MailboxView extends GetWidget<MailboxController>
  with MailboxWidgetMixin,
@@ -101,8 +102,11 @@ class MailboxView extends GetWidget<MailboxController>
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
-                  padding: const EdgeInsets.only(left: 10),
-                  child: _buildCloseScreenButton(context)),
+                padding: EdgeInsets.only(
+                  left: AppUtils.isDirectionRTL(context) ? 0 : 10,
+                  right: AppUtils.isDirectionRTL(context) ? 19 : 0,
+                ),
+                child: _buildCloseScreenButton(context)),
              SizedBox(width: controller.isSelectionEnabled() ? 49 : 40),
              Expanded(child: Text(
                AppLocalizations.of(context).folders,
@@ -147,8 +151,8 @@ class MailboxView extends GetWidget<MailboxController>
    return Column(children: [
      Padding(
        padding: EdgeInsets.only(
-          left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
-          right: 16),
+          left: AppUtils.isDirectionRTL(context) ? 16 : _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
+          right: AppUtils.isDirectionRTL(context) ?_responsiveUtils.isLandscapeMobile(context) ? 0 : 16 : 16),
        child: UserInformationWidgetBuilder(
          _imagePaths,
          controller.mailboxDashBoardController.userProfile.value,
@@ -203,44 +207,45 @@ class MailboxView extends GetWidget<MailboxController>
          const SizedBox(height: 12),
          Container(
            margin: EdgeInsets.only(
-              left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 8,
-              right: 16),
-            padding: const EdgeInsets.only(left: 8),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  Text(AppLocalizations.of(context).mailBoxes,
-                  style: const TextStyle(
-                    fontSize: 20,
-                    color: Colors.black,
-                    fontWeight: FontWeight.bold)),
-                  Row(
-                    children: [
-                      buildIconWeb(
-                        minSize: 40,
-                        iconPadding: EdgeInsets.zero,
-                        icon: SvgPicture.asset(
-                          _imagePaths.icSearchBar,
-                          colorFilter: AppColor.colorTextButton.asFilter(),
-                          fit: BoxFit.fill
-                        ),
-                        tooltip: AppLocalizations.of(context).searchForMailboxes,
-                        onTap: () => controller.openSearchViewAction(context)
-                      ),
-                      buildIconWeb(
-                          minSize: 40,
-                          iconSize: 20,
-                          iconPadding: EdgeInsets.zero,
-                          splashRadius: 15,
-                          icon: SvgPicture.asset(
-                            _imagePaths.icAddNewFolder,
-                            colorFilter: AppColor.colorTextButton.asFilter(),
-                            fit: BoxFit.fill),
-                          tooltip: AppLocalizations.of(context).new_mailbox,
-                          onTap: () => controller.goToCreateNewMailboxView(context)),
-                    ],
+              left: AppUtils.isDirectionRTL(context) ? 16 : _responsiveUtils.isLandscapeMobile(context) ? 0 : 8,
+              right: AppUtils.isDirectionRTL(context) ? _responsiveUtils.isLandscapeMobile(context) ? 0 : 8 : 16),
+            padding: EdgeInsets.only(
+              left: AppUtils.isDirectionRTL(context) ? 0 : 8,
+              right: AppUtils.isDirectionRTL(context) ? 8 : 0,
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(AppLocalizations.of(context).mailBoxes,
+                style: const TextStyle(
+                  fontSize: 20,
+                  color: Colors.black,
+                  fontWeight: FontWeight.bold)),
+                Row(children: [
+                  buildIconWeb(
+                    minSize: 40,
+                    iconPadding: EdgeInsets.zero,
+                    icon: SvgPicture.asset(
+                      _imagePaths.icSearchBar,
+                      colorFilter: AppColor.colorTextButton.asFilter(),
+                      fit: BoxFit.fill
+                    ),
+                    tooltip: AppLocalizations.of(context).searchForMailboxes,
+                    onTap: () => controller.openSearchViewAction(context)
                  ),
+                  buildIconWeb(
+                    minSize: 40,
+                    iconSize: 20,
+                    iconPadding: EdgeInsets.zero,
+                    splashRadius: 15,
+                    icon: SvgPicture.asset(
+                      _imagePaths.icAddNewFolder,
+                      colorFilter: AppColor.colorTextButton.asFilter(),
+                      fit: BoxFit.fill),
+                    tooltip: AppLocalizations.of(context).new_mailbox,
+                  onTap: () => controller.goToCreateNewMailboxView(context)),
                ]),
+              ]),
            ),
            const SizedBox(height: 8),
            Obx(() {
@@ -274,8 +279,8 @@ class MailboxView extends GetWidget<MailboxController>
  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
    return Padding(
        padding: EdgeInsets.only(
-            right: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
-            left: 4),
+          right: AppUtils.isDirectionRTL(context) ? 4 : _responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
+          left: AppUtils.isDirectionRTL(context) ? _responsiveUtils.isLandscapeMobile(context) ? 8 : 28 : 4),
        child: Row(children: [
         buildIconWeb(
              minSize: 40,
@@ -302,9 +307,13 @@ class MailboxView extends GetWidget<MailboxController>

    return Container(
        margin: EdgeInsets.only(
-            left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 8,
-            right: 16),
-        padding: const EdgeInsets.only(left: 12),
+          left: AppUtils.isDirectionRTL(context) ? 16 : _responsiveUtils.isLandscapeMobile(context) ? 0 : 8,
+          right: AppUtils.isDirectionRTL(context) ? _responsiveUtils.isLandscapeMobile(context) ? 0 : 8 : 16
+        ),
+        padding: EdgeInsets.only(
+          left: AppUtils.isDirectionRTL(context) ? 0 : 12,
+          right: AppUtils.isDirectionRTL(context) ? 12 : 0,
+        ),
        child: TreeView(
            key: Key('${categories.keyValue}_mailbox_list'),
            children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
@@ -332,7 +341,11 @@ class MailboxView extends GetWidget<MailboxController>
              context,
              key: const Key('children_tree_mailbox_child'),
              isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-              paddingChild: const EdgeInsets.only(left: 14),
+              isDirectionRTL: AppUtils.isDirectionRTL(context),
+              paddingChild: EdgeInsets.only(
+                left: AppUtils.isDirectionRTL(context) ? 0 : 14,
+                right: AppUtils.isDirectionRTL(context) ? 14 : 0,
+              ),
              parent: Obx(() => (MailBoxFolderTileBuilder(
                    context,
                    _imagePaths,
@@ -15,6 +15,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/ap
 import 'package:tmail_ui_user/features/quotas/presentation/widget/quotas_footer_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/utils/app_config.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';

 class MailboxView extends GetWidget<MailboxController>
  with AppLoaderMixin,
@@ -39,8 +40,7 @@ class MailboxView extends GetWidget<MailboxController>
                  height: 0.5,
                  thickness: 0.2),
            Expanded(child: Container(
-              padding: EdgeInsets.only(
-                  left: _responsiveUtils.isDesktop(context) ? 16 : 0),
+              padding: _getViewPadding(context),
              color: _responsiveUtils.isDesktop(context)
                  ? AppColor.colorBgDesktop
                  : Colors.white,
@@ -61,13 +61,23 @@ class MailboxView extends GetWidget<MailboxController>
    );
  }

+  EdgeInsets _getViewPadding(BuildContext context) {
+    if (AppUtils.isDirectionRTL(context)) {
+      return EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 16 : 0);
+    } else {
+      return EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 16 : 0);
+    }
+  }
+
  Widget _buildLogoApp(BuildContext context) {
    return Container(
        color: Colors.white,
        padding: EdgeInsets.only(
-            top: _responsiveUtils.isDesktop(context) ? 25 : 16,
-            bottom: _responsiveUtils.isDesktop(context) ? 25 : 16,
-            left: _responsiveUtils.isDesktop(context) ? 32 : 16),
+          top: _responsiveUtils.isDesktop(context) ? 25 : 16,
+          bottom: _responsiveUtils.isDesktop(context) ? 25 : 16,
+          left: AppUtils.isDirectionRTL(context) ? 0 : _responsiveUtils.isDesktop(context) ? 32 : 16,
+          right: AppUtils.isDirectionRTL(context) ? _responsiveUtils.isDesktop(context) ? 32 : 16 : 0
+        ),
        child: Row(children: [
          (SloganBuilder(arrangedByHorizontal: true)
            ..setSloganText(AppLocalizations.of(context).app_name)
@@ -102,7 +112,10 @@ class MailboxView extends GetWidget<MailboxController>
          controller: controller.mailboxListScrollController,
          key: const PageStorageKey('mailbox_list'),
          physics: const ClampingScrollPhysics(),
-          padding: EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 16 : 0),
+          padding: EdgeInsets.only(
+            right: AppUtils.isDirectionRTL(context) ? 0 : _responsiveUtils.isDesktop(context) ? 16 : 0,
+            left: AppUtils.isDirectionRTL(context) ? _responsiveUtils.isDesktop(context) ? 16 : 0 : 0
+          ),
          child: Column(children: [
            if (!_responsiveUtils.isDesktop(context))
              _buildUserInformation(context),
@@ -131,7 +144,8 @@ class MailboxView extends GetWidget<MailboxController>
            const SizedBox(height: 13),
            Padding(
              padding: EdgeInsets.only(
-                left: _responsiveUtils.isDesktop(context) ? 0 : 12,
+                left: AppUtils.isDirectionRTL(context) ? 0 : _responsiveUtils.isDesktop(context) ? 0 : 12,
+                right: AppUtils.isDirectionRTL(context) ? _responsiveUtils.isDesktop(context) ? 0 : 12 : 0,
                bottom: 8
              ),
              child: Row(
@@ -143,7 +157,10 @@ class MailboxView extends GetWidget<MailboxController>
                    color: Colors.black,
                    fontWeight: FontWeight.bold)),
                  Padding(
-                    padding: EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 0 : 12),
+                    padding: EdgeInsets.only(
+                      right: AppUtils.isDirectionRTL(context) ? 0 : _responsiveUtils.isDesktop(context) ? 0 : 12,
+                      left: AppUtils.isDirectionRTL(context) ? _responsiveUtils.isDesktop(context) ? 0 : 12 : 0,
+                    ),
                    child: Row(
                      children: [
                        buildIconWeb(
@@ -293,8 +310,12 @@ class MailboxView extends GetWidget<MailboxController>
        return TreeViewChild(
          context,
          key: const Key('children_tree_mailbox_child'),
+          isDirectionRTL: AppUtils.isDirectionRTL(context),
          isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-          paddingChild: const EdgeInsets.only(left: 14),
+          paddingChild: EdgeInsets.only(
+            left: AppUtils.isDirectionRTL(context) ? 0 : 14,
+            right: AppUtils.isDirectionRTL(context) ? 14 : 0,
+          ),
          parent: Obx(() => (MailBoxFolderTileBuilder(
                context,
                _imagePaths,
@@ -1,71 +0,0 @@
-
-import 'package:core/core.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
-
-typedef OnOpenMailboxNewFolderActionClick = void Function();
-
-class MailboxNewFolderTileBuilder {
-
-  String? _icon;
-  String? _name;
-
-  OnOpenMailboxNewFolderActionClick? _onOpenMailboxFolderActionClick;
-
-  MailboxNewFolderTileBuilder();
-
-  void addIcon(String icon) {
-    _icon = icon;
-  }
-
-  void addName(String name) {
-    _name = name;
-  }
-
-  void onOpenMailboxFolderAction(OnOpenMailboxNewFolderActionClick onOpenMailboxFolderActionClick) {
-    _onOpenMailboxFolderActionClick = onOpenMailboxFolderActionClick;
-  }
-
-  Widget build() {
-    return Theme(
-      data: ThemeData(
-        splashColor: Colors.transparent,
-        highlightColor: Colors.transparent),
-      child: Container(
-        key: const Key('mailbox_new_folder_tile'),
-        alignment: Alignment.center,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(16),
-          color: AppColor.mailboxBackgroundColor),
-        child: MediaQuery(
-          data: const MediaQueryData(padding: EdgeInsets.zero),
-          child: ListTile(
-            contentPadding: EdgeInsets.zero,
-            onTap: () => {
-              if (_onOpenMailboxFolderActionClick != null) {
-                _onOpenMailboxFolderActionClick!()
-              }
-            },
-            leading: Padding(
-              padding: const EdgeInsets.only(left: 34),
-              child: _icon != null
-                ? SvgPicture.asset(
-                    _icon!,
-                    width: 24,
-                    height: 24,
-                    colorFilter: AppColor.mailboxIconColor.asFilter(),
-                    fit: BoxFit.fill)
-                : const SizedBox.shrink()),
-            title: Padding(
-              padding: const EdgeInsets.only(left: 8),
-              child: Text(
-                _name ?? '',
-                maxLines: 1,
-                style: const TextStyle(fontSize: 15, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
-              )),
-          )
-        )
-      )
-    );
-  }
-}
@@ -17,6 +17,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displa
 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 MailBoxFolderTileBuilder {

@@ -82,15 +83,15 @@ class MailBoxFolderTileBuilder {
  Widget build() {
    if (responsiveUtils?.isWebDesktop(_context) == true && mailboxDisplayed == MailboxDisplayed.mailbox) {
      return DragTarget<List<PresentationEmail>>(
-        builder: (_, __, ___) => _buildMailboxItem(),
+        builder: (_, __, ___) => _buildMailboxItem(_context),
        onAccept: (emails) => _onDragItemAccepted?.call(emails, _mailboxNode.item),
      );
    } else {
-      return _buildMailboxItem();
+      return _buildMailboxItem(_context);
    }
  }

-  Widget _buildMailboxItem() {
+  Widget _buildMailboxItem(BuildContext context) {
    if (mailboxDisplayed == MailboxDisplayed.mailbox) {
      if (BuildUtils.isWeb) {
        return StatefulBuilder(
@@ -108,11 +109,11 @@ class MailBoxFolderTileBuilder {
                        ? CrossAxisAlignment.start
                        : CrossAxisAlignment.center,
                      children: [
-                        _buildLeadingMailboxItem(),
+                        _buildLeadingMailboxItem(context),
                        const SizedBox(width: 4),
                        Expanded(child: _buildTitleFolderItem()),
                        const SizedBox(width: 8),
-                        _buildTrailingItemForMailboxView()
+                        _buildTrailingItemForMailboxView(context)
                    ])
                ),
              );
@@ -141,12 +142,12 @@ class MailBoxFolderTileBuilder {
                        ? CrossAxisAlignment.start
                        : CrossAxisAlignment.center,
                      children: [
-                        _buildLeadingMailboxItem(),
+                        _buildLeadingMailboxItem(context),
                        const SizedBox(width: 8),
                        Expanded(child: _buildTitleFolderItem()),
                        _buildSelectedIcon(),
                        const SizedBox(width: 8),
-                        _buildTrailingItemForMailboxView()
+                        _buildTrailingItemForMailboxView(context)
                    ]),
                  ]
              ),
@@ -171,7 +172,7 @@ class MailBoxFolderTileBuilder {
                    ? AppColor.colorItemSelected
                    : Colors.transparent,
                  child: Row(children: [
-                    _buildLeadingMailboxItem(),
+                    _buildLeadingMailboxItem(context),
                    const SizedBox(width: 8),
                    Expanded(child: _buildTitleFolderItem()),
                    _buildSelectedIcon()
@@ -184,7 +185,7 @@ class MailBoxFolderTileBuilder {
    }
  }

-  Widget _buildLeadingMailboxItem() {
+  Widget _buildLeadingMailboxItem(BuildContext context) {
    return Row(children: [
      if (_mailboxNode.hasChildren())
        Row(children: [
@@ -211,20 +212,27 @@ class MailBoxFolderTileBuilder {
      else
        const SizedBox(width: 32),
      Transform(
-        transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
+        transform: Matrix4.translationValues(
+          AppUtils.isDirectionRTL(context) ? 0.0 : -4.0,
+          0.0,
+          0.0
+        ),
        child: _buildLeadingIcon()
      ),
    ]);
  }

-  Widget _buildTrailingItemForMailboxView() {
+  Widget _buildTrailingItemForMailboxView(BuildContext context) {
    if (BuildUtils.isWeb) {
      if (isHoverItem) {
-        return _buildMenuIcon();
+        return _buildMenuIcon(context);
      } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
          && _mailboxNode.item.matchCountingRules()) {
        return Padding(
-          padding: const EdgeInsets.only(right: 10),
+          padding: EdgeInsets.only(
+            right: AppUtils.isDirectionRTL(context) ? 0 : 10,
+            left: AppUtils.isDirectionRTL(context) ? 10 : 0,
+          ),
          child: _buildCounter(),
        );
      } else {
@@ -233,7 +241,10 @@ class MailBoxFolderTileBuilder {
    } else {
      if (_mailboxNode.hasChildren()) {
        return Padding(
-          padding: const EdgeInsets.only(right: 12),
+          padding: EdgeInsets.only(
+            right: AppUtils.isDirectionRTL(context) ? 0 : 12,
+            left: AppUtils.isDirectionRTL(context) ? 12 : 0,
+          ),
          child: Row(
            children: [
              if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
@@ -245,7 +256,10 @@ class MailBoxFolderTileBuilder {
      } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
        && _mailboxNode.item.matchCountingRules()) {
          return Padding(
-            padding: const EdgeInsets.only(right: 12),
+            padding: EdgeInsets.only(
+              right: AppUtils.isDirectionRTL(context) ? 0 : 12,
+              left: AppUtils.isDirectionRTL(context) ? 12 : 0,
+            ),
            child: _buildCounter(),
          );
      } else {
@@ -328,9 +342,12 @@ class MailBoxFolderTileBuilder {
        fit: BoxFit.fill);
  }

-  Widget _buildMenuIcon() {
+  Widget _buildMenuIcon(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: InkWell(
          onTapDown: (detail) {
            final screenSize = MediaQuery.of(_context).size;
@@ -1,11 +1,15 @@

-import 'package:core/core.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/views/image/avatar_builder.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get_utils/src/platform/platform.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';

 typedef OnSubtitleClick = void Function();

@@ -49,7 +53,11 @@ class UserInformationWidgetBuilder extends StatelessWidget {
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
-                padding: titlePadding ?? const EdgeInsets.only(left: 16, top: 10),
+                padding: titlePadding ?? EdgeInsets.only(
+                  left: AppUtils.isDirectionRTL(context) ? 0 : 16,
+                  right: AppUtils.isDirectionRTL(context) ? 16 : 0,
+                  top: 10
+                ),
                child: Text(
                    _userProfile != null ? '${_userProfile?.email}' : '',
                    maxLines: 1,
@@ -60,7 +68,10 @@ class UserInformationWidgetBuilder extends StatelessWidget {
            ),
            subtitle != null
              ? Padding(
-                  padding: const EdgeInsets.only(left: 10),
+                  padding: EdgeInsets.only(
+                    left: AppUtils.isDirectionRTL(context) ? 0 : 10,
+                    right: AppUtils.isDirectionRTL(context) ? 10 : 0
+                  ),
                  child: Material(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.transparent,
@@ -80,10 +91,14 @@ class UserInformationWidgetBuilder extends StatelessWidget {
        ])),
        if (!kIsWeb)
          Transform(
-            transform: Matrix4.translationValues(14.0, 0.0, 0.0),
+            transform: Matrix4.translationValues(
+              AppUtils.isDirectionRTL(context) ? -14.0 : 14.0,
+              0.0,
+              0.0
+            ),
            child: IconButton(
              icon: SvgPicture.asset(
-                _imagePaths.icCollapseFolder,
+                AppUtils.isDirectionRTL(context) ? _imagePaths.icBack : _imagePaths.icCollapseFolder,
                fit: BoxFit.fill,
                colorFilter: AppColor.colorCollapseMailbox.asFilter()),
              onPressed: () => {}))