TF-1957 Fix name of attachments are reversed in RTL mode

(cherry picked from commit 8f8efa90f6f2488867b236261cc27145d7e9716f)

assets/images/ic_arrow_bottom.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M20.6925 10.2575C20.2824 9.84749 19.6176 9.84749 19.2075 10.2575L14 15.4651L8.79246 10.2575C8.38241 9.84749 7.71758 9.84749 7.30753 10.2575C6.89749 10.6676 6.89749 11.3324 7.30754 11.7425L13.2576 17.6925C13.6676 18.1025 14.3324 18.1025 14.7425 17.6925L20.6925 11.7425C21.1025 11.3324 21.1025 10.6676 20.6925 10.2575Z"
+        fill="#007AFF" />
+</svg>

assets/images/ic_arrow_left.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M17.7425 20.6925C18.1525 20.2824 18.1525 19.6176 17.7425 19.2075L12.5349 14L17.7425 8.79246C18.1525 8.38241 18.1525 7.71758 17.7425 7.30754C17.3324 6.89749 16.6676 6.89749 16.2575 7.30754L10.3075 13.2576C9.89749 13.6676 9.89749 14.3324 10.3075 14.7425L16.2575 20.6925C16.6676 21.1025 17.3324 21.1025 17.7425 20.6925Z"
+        fill="#007AFF" />
+</svg>

assets/images/ic_arrow_right.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M10.2575 7.30754C9.84749 7.71759 9.84749 8.38241 10.2575 8.79246L15.4651 14L10.2575 19.2075C9.84749 19.6176 9.84749 20.2824 10.2575 20.6925C10.6676 21.1025 11.3324 21.1025 11.7425 20.6925L17.6925 14.7424C18.1025 14.3324 18.1025 13.6676 17.6925 13.2575L11.7425 7.30754C11.3324 6.89749 10.6676 6.89749 10.2575 7.30754Z"
+        fill="#007AFF" />
+</svg>

core/lib/presentation/resources/image_paths.dart

@@ -190,6 +190,9 @@ class ImagePaths {
   String get icDelivering => _getImagePath('ic_delivering.svg');
   String get icError => _getImagePath('ic_error.svg');
   String get icConnectedInternet => _getImagePath('ic_connected_internet.svg');
+  String get icArrowBottom => _getImagePath('ic_arrow_bottom.svg');
+  String get icArrowLeft => _getImagePath('ic_arrow_left.svg');
+  String get icArrowRight => _getImagePath('ic_arrow_right.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

lib/features/composer/presentation/widgets/attachment_file_composer_builder.dart

@@ -5,6 +5,7 @@ import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:core/utils/platform_info.dart';
+import 'package:extended_text/extended_text.dart';
 import 'package:filesize/filesize.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
@@ -73,15 +74,29 @@ class AttachmentFileComposerBuilder extends StatelessWidget with AppLoaderMixin
                     0.0),
                   child: Padding(
                     padding: const EdgeInsetsDirectional.only(end: PlatformInfo.isWeb ? 20 : 16),
-                    child: Text(
+                    child: ExtendedText(
                       fileState.fileName,
                       maxLines: 1,
-                      softWrap: CommonTextStyle.defaultSoftWrap,
                       overflow: CommonTextStyle.defaultTextOverFlow,
+                      softWrap: CommonTextStyle.defaultSoftWrap,
+                      overflowWidget: TextOverflowWidget(
+                        position: Directionality.maybeOf(context) == TextDirection.rtl
+                          ? TextOverflowPosition.start
+                          : TextOverflowPosition.end,
+                        child: const Text(
+                          '...',
+                          style: TextStyle(
+                            fontSize: 12,
+                            color: Colors.black,
+                            fontWeight: FontWeight.w500
+                          ),
+                        ),
+                      ),
                       style: const TextStyle(
-                          fontSize: 14,
+                        fontSize: 14,
-                          color: Colors.black,
+                        color: Colors.black,
-                          fontWeight: FontWeight.w500),
+                        fontWeight: FontWeight.w500
+                      ),
                     ),
                   )
               ),

lib/features/destination_picker/presentation/widgets/top_bar_destination_picker_builder.dart

@@ -7,7 +7,6 @@ import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_screen_type.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
-import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 typedef OnCreateNewMailboxAction = Function();
 typedef OnOpenCreateNewMailboxScreenAction = Function();
@@ -62,12 +61,9 @@ class TopBarDestinationPickerBuilder extends StatelessWidget {
                     fontWeight: FontWeight.w700))),
             if (_destinationScreenType == DestinationScreenType.destinationPicker)
               Padding(
-                padding: EdgeInsets.only(
+                padding: const EdgeInsetsDirectional.only(start: 8),
-                  left: AppUtils.isDirectionRTL(context) ? 0 : 8,
-                  right: AppUtils.isDirectionRTL(context) ? 8 : 0,
-                ),
                 child: Align(
-                  alignment: Alignment.centerLeft,
+                  alignment: AlignmentDirectional.centerStart,
                   child: buildIconWeb(
                     iconSize: 24,
                     colorSelected: Colors.white,
@@ -80,12 +76,9 @@ class TopBarDestinationPickerBuilder extends StatelessWidget {
               )
             else
               Padding(
-                padding: EdgeInsets.only(
+                padding: const EdgeInsetsDirectional.only(start: 8),
-                  left: AppUtils.isDirectionRTL(context) ? 0 : 8,
-                  right: AppUtils.isDirectionRTL(context) ? 8 : 0,
-                ),
                 child: Align(
-                  alignment: Alignment.centerLeft,
+                  alignment: AlignmentDirectional.centerStart,
                   child: Material(
                     color: Colors.transparent,
                     child: InkWell(

lib/features/email/presentation/widgets/attachment_file_tile_builder.dart

@@ -1,10 +1,14 @@
 
-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/responsive_utils.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:extended_text/extended_text.dart';
 import 'package:filesize/filesize.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
-import 'package:model/model.dart';
+import 'package:model/email/attachment.dart';
 import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart';
 
 typedef OnDownloadAttachmentFileActionClick = void Function(Attachment attachment);
@@ -52,30 +56,44 @@ class AttachmentFileTileBuilder extends StatelessWidget{
                         fit: BoxFit.fill),
                     const SizedBox(width: 8),
                     Expanded(child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
+                      crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
+                      children: [
-                            Text(
+                        ExtendedText(
-                              _attachment.name ?? '',
+                          (_attachment.name ?? ''),
-                              maxLines: 1,
+                          maxLines: 1,
-                              overflow: CommonTextStyle.defaultTextOverFlow,
+                          overflow: CommonTextStyle.defaultTextOverFlow,
-                              softWrap: CommonTextStyle.defaultSoftWrap,
+                          softWrap: CommonTextStyle.defaultSoftWrap,
-                              style: const TextStyle(
+                          overflowWidget: TextOverflowWidget(
-                                  fontSize: 14,
+                            position: Directionality.maybeOf(context) == TextDirection.rtl
-                                  color: AppColor.attachmentFileNameColor,
+                              ? TextOverflowPosition.start
-                                  fontWeight: FontWeight.normal),
+                              : TextOverflowPosition.end,
+                            child: const Text(
+                              "...",
+                              style: TextStyle(
+                                fontSize: 12,
+                                color: AppColor.attachmentFileNameColor,
+                                fontWeight: FontWeight.normal
+                              ),
                             ),
-                            const SizedBox(height: 4),
+                          ),
-                            Text(
+                          style: const TextStyle(
-                              filesize(_attachment.size?.value),
+                            fontSize: 14,
-                              maxLines: 1,
+                            color: AppColor.attachmentFileNameColor,
-                              overflow: CommonTextStyle.defaultTextOverFlow,
+                            fontWeight: FontWeight.normal
-                              softWrap: CommonTextStyle.defaultSoftWrap,
+                          ),
-                              style: const TextStyle(
+                        ),
-                                  fontSize: 12,
+                        const SizedBox(height: 4),
-                                  color: AppColor.attachmentFileSizeColor,
+                        Text(
-                                  fontWeight: FontWeight.normal),
+                          filesize(_attachment.size?.value),
-                            )
+                          maxLines: 1,
-                        ]
+                          overflow: CommonTextStyle.defaultTextOverFlow,
+                          softWrap: CommonTextStyle.defaultSoftWrap,
+                          style: const TextStyle(
+                            fontSize: 12,
+                            color: AppColor.attachmentFileSizeColor,
+                            fontWeight: FontWeight.normal),
+                        )
+                      ]
                     ))
                   ]),
                 ),

lib/features/mailbox/presentation/mailbox_view.dart

@@ -270,8 +270,8 @@ class MailboxView extends BaseMailboxView {
               splashRadius: 15,
               icon: SvgPicture.asset(
                   categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-                    ? imagePaths.icExpandFolder
+                    ? imagePaths.icArrowBottom
-                    : DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icBack : imagePaths.icCollapseFolder,
+                    : DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icArrowLeft : imagePaths.icArrowRight,
                   colorFilter: AppColor.primaryColor.asFilter(),
                   fit: BoxFit.fill),
               tooltip: AppLocalizations.of(context).collapse,

lib/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart

@@ -300,8 +300,8 @@ mixin MailboxWidgetMixin {
             minSize: 12,
             icon: SvgPicture.asset(
               expandMode == ExpandMode.EXPAND
-                ? imagePaths.icExpandFolder
+                ? imagePaths.icArrowBottom
-                : DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icBack : imagePaths.icCollapseFolder,
+                : DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icArrowLeft : imagePaths.icArrowRight,
               colorFilter: AppColor.primaryColor.asFilter(),
               fit: BoxFit.fill
             ),
@@ -359,7 +359,7 @@ mixin MailboxWidgetMixin {
     MailboxController controller
   ) {
     return Padding(
-      padding: const EdgeInsetsDirectional.only(start: 32, bottom: 8, end: 4),
+      padding: const EdgeInsetsDirectional.only(start: 32, end: 4),
       child: Row(children: [
         SvgPicture.asset(
           imagePaths.icAppDashboard,

lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart

@@ -107,9 +107,6 @@ class MailBoxFolderTileBuilder {
                       color: backgroundColorItem),
                     padding: const EdgeInsets.all(8),
                     child: Row(
-                      crossAxisAlignment: _mailboxNode.item.isTeamMailboxes
-                        ? CrossAxisAlignment.start
-                        : CrossAxisAlignment.end,
                       children: [
                         _buildLeadingMailboxItem(context),
                         const SizedBox(width: 4),
@@ -138,9 +135,6 @@ class MailBoxFolderTileBuilder {
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     Row(
-                      crossAxisAlignment: _mailboxNode.item.isTeamMailboxes
-                        ? CrossAxisAlignment.start
-                        : CrossAxisAlignment.center,
                       children: [
                         _buildLeadingMailboxItem(context),
                         const SizedBox(width: 8),
@@ -194,16 +188,16 @@ class MailBoxFolderTileBuilder {
           buildIconWeb(
             icon: SvgPicture.asset(
               _mailboxNode.expandMode == ExpandMode.EXPAND
-                ? _imagePaths.icExpandFolder
+                ? _imagePaths.icArrowBottom
-                : DirectionUtils.isDirectionRTLByLanguage(context) ? _imagePaths.icBack : _imagePaths.icCollapseFolder,
+                : DirectionUtils.isDirectionRTLByLanguage(context) ? _imagePaths.icArrowLeft : _imagePaths.icArrowRight,
               colorFilter: _mailboxNode.item.allowedToDisplay
                 ? AppColor.primaryColor.asFilter()
                 : AppColor.colorIconUnSubscribedMailbox.asFilter(),
-              fit: BoxFit.fill
+              fit: BoxFit.fill,
             ),
-            minSize: 12,
+            splashRadius: 12,
-            splashRadius: 10,
             iconPadding: EdgeInsets.zero,
+            minSize: 15,
             tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
               ? AppLocalizations.of(_context).collapse
               : AppLocalizations.of(_context).expand,
@@ -288,10 +282,8 @@ class MailBoxFolderTileBuilder {
 
   Widget _buildTitleFolderItem(BuildContext context, {bool showTrailingItem = true}) {
     return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Row(
-          crossAxisAlignment: CrossAxisAlignment.end,
           children: [
             Expanded(
               child: TextOverflowBuilder(

pubspec.lock

@@ -385,6 +385,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.5"
+  extended_text:
+    dependency: "direct main"
+    description:
+      name: extended_text
+      sha256: "3f555a60f63ff51d5080f5eed89e65bc18f17b69e01f4e16cadfd0cb3b49f42a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "10.0.1"
+  extended_text_library:
+    dependency: transitive
+    description:
+      name: extended_text_library
+      sha256: "6d06b0ac53a09989e9864549f133c19c676d1456c5ee9470e2483f3cb1900f6e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "10.0.0"
   external_app_launcher:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -199,6 +199,8 @@ dependencies:
 
   flutter_keyboard_visibility: 5.4.1
 
+  extended_text: 10.0.1
+
 dev_dependencies:
   flutter_test:
     sdk: flutter