Support RTL mode for alignment mailbox view

(cherry picked from commit 9136f16236305ef65ebbc3c0415e7ffdc637bef7)
2023-06-15 15:06:17 +07:00
parent 96145aae7a
commit b7a4e3f585
14 changed files with 198 additions and 291 deletions
@@ -4,7 +4,8 @@ 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:core/presentation/views/button/icon_button_web.dart';
-import 'package:core/utils/build_utils.dart';
+import 'package:core/utils/direction_utils.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
@@ -18,7 +19,6 @@ 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 {

@@ -94,7 +94,7 @@ class MailBoxFolderTileBuilder {

  Widget _buildMailboxItem(BuildContext context) {
    if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-      if (BuildUtils.isWeb) {
+      if (PlatformInfo.isWeb) {
        return StatefulBuilder(
            builder: (context, setState) {
              return InkWell(
@@ -194,7 +194,7 @@ class MailBoxFolderTileBuilder {
            icon: SvgPicture.asset(
              _mailboxNode.expandMode == ExpandMode.EXPAND
                ? _imagePaths.icExpandFolder
-                : _imagePaths.icCollapseFolder,
+                : DirectionUtils.isDirectionRTLByLanguage(context) ? _imagePaths.icBack : _imagePaths.icCollapseFolder,
              colorFilter: _mailboxNode.item.allowedToDisplay
                ? AppColor.primaryColor.asFilter()
                : AppColor.colorIconUnSubscribedMailbox.asFilter(),
@@ -213,7 +213,7 @@ class MailBoxFolderTileBuilder {
        const SizedBox(width: 32),
      Transform(
        transform: Matrix4.translationValues(
-          AppUtils.isDirectionRTL(context) ? 0.0 : -4.0,
+          DirectionUtils.isDirectionRTLByLanguage(context) ? 0.0 : -4.0,
          0.0,
          0.0
        ),
@@ -223,16 +223,13 @@ class MailBoxFolderTileBuilder {
  }

  Widget _buildTrailingItemForMailboxView(BuildContext context) {
-    if (BuildUtils.isWeb) {
+    if (PlatformInfo.isWeb) {
      if (isHoverItem) {
        return _buildMenuIcon(context);
      } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
          && _mailboxNode.item.matchCountingRules()) {
        return Padding(
-          padding: EdgeInsets.only(
-            right: AppUtils.isDirectionRTL(context) ? 0 : 10,
-            left: AppUtils.isDirectionRTL(context) ? 10 : 0,
-          ),
+          padding: const EdgeInsetsDirectional.only(start: 10),
          child: _buildCounter(),
        );
      } else {
@@ -241,10 +238,7 @@ class MailBoxFolderTileBuilder {
    } else {
      if (_mailboxNode.hasChildren()) {
        return Padding(
-          padding: EdgeInsets.only(
-            right: AppUtils.isDirectionRTL(context) ? 0 : 12,
-            left: AppUtils.isDirectionRTL(context) ? 12 : 0,
-          ),
+          padding: const EdgeInsetsDirectional.only(start: 12),
          child: Row(
            children: [
              if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
@@ -256,10 +250,7 @@ class MailBoxFolderTileBuilder {
      } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
        && _mailboxNode.item.matchCountingRules()) {
          return Padding(
-            padding: EdgeInsets.only(
-              right: AppUtils.isDirectionRTL(context) ? 0 : 12,
-              left: AppUtils.isDirectionRTL(context) ? 12 : 0,
-            ),
+            padding: const EdgeInsetsDirectional.only(start: 12),
            child: _buildCounter(),
          );
      } else {
@@ -269,7 +260,7 @@ class MailBoxFolderTileBuilder {
  }

  Widget _buildLeadingIcon() {
-    if (BuildUtils.isWeb) {
+    if (PlatformInfo.isWeb) {
      return _buildLeadingIconTeamMailboxes();
    } else {
      return allSelectMode == SelectMode.ACTIVE
@@ -346,17 +337,14 @@ class MailBoxFolderTileBuilder {

  Widget _buildMailboxIcon() {
    return SvgPicture.asset(_mailboxNode.item.getMailboxIcon(_imagePaths),
-        width: BuildUtils.isWeb ? 20 : 24,
-        height: BuildUtils.isWeb ? 20 : 24,
+        width: PlatformInfo.isWeb ? 20 : 24,
+        height: PlatformInfo.isWeb ? 20 : 24,
        fit: BoxFit.fill);
  }

  Widget _buildMenuIcon(BuildContext context) {
    return Padding(
-      padding: EdgeInsets.only(
-        right: AppUtils.isDirectionRTL(context) ? 0 : 8,
-        left: AppUtils.isDirectionRTL(context) ? 8 : 0,
-      ),
+      padding: const EdgeInsetsDirectional.only(start: 8),
      child: InkWell(
          onTapDown: (detail) {
            final screenSize = MediaQuery.of(_context).size;
@@ -384,8 +372,8 @@ class MailBoxFolderTileBuilder {
        _mailboxNode.selectMode == SelectMode.ACTIVE
            ? _imagePaths.icSelected
            : _imagePaths.icUnSelected,
-        width: BuildUtils.isWeb ? 20 : 24,
-        height: BuildUtils.isWeb ? 20 : 24,
+        width: PlatformInfo.isWeb ? 20 : 24,
+        height: PlatformInfo.isWeb ? 20 : 24,
        fit: BoxFit.fill)
    );
  }
@@ -4,13 +4,13 @@ import 'package:core/presentation/extensions/string_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:core/utils/direction_utils.dart';
+import 'package:core/utils/platform_info.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:model/user/user_profile.dart';
+import 'package:tmail_ui_user/features/base/widget/material_text_button.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();

@@ -18,8 +18,9 @@ class UserInformationWidgetBuilder extends StatelessWidget {
  final ImagePaths _imagePaths;
  final UserProfile? _userProfile;
  final String? subtitle;
-  final EdgeInsets? titlePadding;
+  final EdgeInsetsGeometry? titlePadding;
  final OnSubtitleClick? onSubtitleClick;
+  final EdgeInsetsGeometry? padding;

  const UserInformationWidgetBuilder(
    this._imagePaths,
@@ -29,16 +30,14 @@ class UserInformationWidgetBuilder extends StatelessWidget {
      this.subtitle,
      this.titlePadding,
      this.onSubtitleClick,
+      this.padding,
    }
  ) : super(key: key);

  @override
  Widget build(BuildContext context) {
-    return Container(
-      key: const Key('user_information_widget'),
-      color: Colors.transparent,
-      padding: EdgeInsets.zero,
-      margin: EdgeInsets.zero,
+    return Padding(
+      padding: padding ?? const EdgeInsetsDirectional.only(start: 16, end: 4, top: 16, bottom: 16),
      child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        (AvatarBuilder()
            ..text(_userProfile != null ? _userProfile!.getAvatarText() : '')
@@ -47,62 +46,40 @@ class UserInformationWidgetBuilder extends StatelessWidget {
            ..addBoxShadows([const BoxShadow(
                color: AppColor.colorShadowBgContentEmail,
                spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))])
-            ..size(GetPlatform.isWeb ? 48 : 56))
+            ..size(PlatformInfo.isWeb ? 48 : 56))
          .build(),
+        const SizedBox(width: 16),
        Expanded(child: Column(
-          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
-            Padding(
-                padding: titlePadding ?? EdgeInsets.only(
-                  left: AppUtils.isDirectionRTL(context) ? 0 : 16,
-                  right: AppUtils.isDirectionRTL(context) ? 16 : 0,
-                  top: 10
-                ),
-                child: Text(
-                    _userProfile != null ? '${_userProfile?.email}'.withUnicodeCharacter : '',
-                    maxLines: 1,
-                    overflow: CommonTextStyle.defaultTextOverFlow,
-                    softWrap: CommonTextStyle.defaultSoftWrap,
-                    style: const TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)
-                )
+            Text(
+              _userProfile != null ? '${_userProfile?.email}'.withUnicodeCharacter : '',
+              maxLines: 1,
+              overflow: CommonTextStyle.defaultTextOverFlow,
+              softWrap: CommonTextStyle.defaultSoftWrap,
+              style: const TextStyle(
+                fontSize: 17,
+                color: AppColor.colorNameEmail,
+                fontWeight: FontWeight.w600
+              )
            ),
-            subtitle != null
-              ? Padding(
-                  padding: EdgeInsets.only(
-                    left: AppUtils.isDirectionRTL(context) ? 0 : 10,
-                    right: AppUtils.isDirectionRTL(context) ? 10 : 0
-                  ),
-                  child: Material(
-                    borderRadius: BorderRadius.circular(20),
-                    color: Colors.transparent,
-                    child: Align(
-                      alignment: Alignment.centerLeft,
-                      child: TextButton(
-                        onPressed: () => onSubtitleClick?.call(),
-                        child: Text(
-                          AppLocalizations.of(context).manage_account,
-                          style: const TextStyle(fontSize: 14, color: AppColor.colorTextButton),
-                        ),
-                      )
-                    )
-                  )
-                )
-              : const SizedBox.shrink()
+            const SizedBox(height: 10),
+            if (subtitle != null)
+              MaterialTextButton(
+                label: AppLocalizations.of(context).manage_account,
+                onTap: onSubtitleClick,
+                borderRadius: 20,
+                padding: const EdgeInsetsDirectional.symmetric(horizontal: 8, vertical: 8),
+                customStyle: const TextStyle(fontSize: 14, color: AppColor.colorTextButton),
+              )
        ])),
-        if (!kIsWeb)
-          Transform(
-            transform: Matrix4.translationValues(
-              AppUtils.isDirectionRTL(context) ? -14.0 : 14.0,
-              0.0,
-              0.0
-            ),
-            child: IconButton(
-              icon: SvgPicture.asset(
-                AppUtils.isDirectionRTL(context) ? _imagePaths.icBack : _imagePaths.icCollapseFolder,
-                fit: BoxFit.fill,
-                colorFilter: AppColor.colorCollapseMailbox.asFilter()),
-              onPressed: () => {}))
+        if (PlatformInfo.isMobile)
+          SvgPicture.asset(
+            DirectionUtils.isDirectionRTLByLanguage(context) ? _imagePaths.icBack : _imagePaths.icCollapseFolder,
+            fit: BoxFit.fill,
+            colorFilter: AppColor.colorCollapseMailbox.asFilter()
+          ),
+        const SizedBox(width: 16),
      ]),
    );
  }