TF-2189 Only store email to sending queue when offline on iOS

Signed-off-by: dab246 <tdvu@linagora.com> (cherry picked from commit 0dd22e5c3d300573b13d43fbfe50fc1622e2ab13)
2023-10-19 11:56:44 +07:00
parent 7700bfea04
commit 11be09014d
19 changed files with 431 additions and 228 deletions
@@ -20,5 +20,7 @@ extension ListSendingEmailExtension on List<SendingEmail> {

  bool isAllSendingStateError() => every((sendingEmail) => sendingEmail.isError);

+  bool isAllSendingStateWaitingOrError() => every((sendingEmail) => sendingEmail.isWaiting || sendingEmail.isError);
+
  List<SendingEmail> toSendingStateWaiting() => map((sendingEmail) => sendingEmail.updatingSendingState(SendingState.waiting)).toList();
 }
@@ -1,5 +1,6 @@

 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
@@ -35,13 +36,16 @@ class SendingQueueView extends GetWidget<SendingQueueController> with AppLoaderM
                );
              }),
              const Divider(color: AppColor.colorDividerComposer, height: 1),
-              Obx(() {
-                if (!controller.isConnectedNetwork) {
-                  return const BannerMessageSendingQueueWidget();
-                } else {
-                  return const SizedBox.shrink();
-                }
-              }),
+              if (PlatformInfo.isIOS)
+                const BannerMessageSendingQueueWidget()
+              else
+                Obx(() {
+                  if (!controller.isConnectedNetwork) {
+                    return const BannerMessageSendingQueueWidget();
+                  } else {
+                    return const SizedBox.shrink();
+                  }
+                }),
              Expanded(child: _buildListSendingEmails(context)),
              Obx(() {
                if (controller.isAllUnSelected) {
@@ -0,0 +1,35 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+
+class AppBarSendingQueueWidgetStyle {
+  static const double height = 52;
+  static const double leadingRadius = 15;
+  static const double space = 8;
+  static const double trailingSize = 50;
+
+  static const Color backgroundColor = Colors.white;
+  static const Color iconColor = AppColor.colorTextButton;
+
+  static const EdgeInsetsGeometry leadingPadding = EdgeInsetsDirectional.only(start: 8);
+  static const EdgeInsetsGeometry selectIconPadding = EdgeInsets.symmetric(horizontal: 10, vertical: 5);
+
+  static EdgeInsetsGeometry getPaddingAppBarByResponsiveSize(double width) {
+    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
+      return const EdgeInsets.symmetric(horizontal: 10);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 24);
+    }
+  }
+
+  static const TextStyle countStyle = TextStyle(
+    fontSize: 17,
+    color: AppColor.colorTextButton
+  );
+  static const TextStyle labelStyle = TextStyle(
+    fontSize: 21,
+    color: Colors.black,
+    fontWeight: FontWeight.bold
+  );
+}
@@ -0,0 +1,49 @@
+
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/offline_mode/model/sending_state.dart';
+
+class SendingEmailTileStyle {
+  static const double avatarIconSize = 60;
+  static const double avatarIconRadius = 30;
+  static const double selectIconSize = 24;
+  static const double attachmentIconSize = 20;
+  static const double space = 8;
+  static const double stateRowWidth = 120;
+  static const double stateLabelWidth = 80;
+
+  static const EdgeInsetsGeometry attachmentPadding = EdgeInsetsDirectional.only(start: 8);
+  static const EdgeInsetsGeometry timeCreatedPadding = EdgeInsetsDirectional.only(start: 8);
+  static const EdgeInsetsGeometry statePadding = EdgeInsetsDirectional.only(start: 8);
+  static const EdgeInsetsGeometry statePaddingMobile = EdgeInsetsDirectional.only(top: 8);
+  static EdgeInsets getPaddingItemListViewByResponsiveSize(double width) {
+    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
+      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
+    }
+  }
+  static EdgeInsets getPaddingDividerListViewByResponsiveSize(double width) {
+    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
+      return const EdgeInsets.only(left: 84, right: 8, top: 8);
+    } else {
+      return const EdgeInsets.only(left: 100, right: 24, top: 8);
+    }
+  }
+
+  static TextStyle getTitleTextStyle(SendingState state) => TextStyle(
+    fontSize: 15,
+    color: state.getTitleSendingEmailItemColor(),
+    fontWeight: FontWeight.w600
+  );
+  static TextStyle getSubTitleTextStyle(SendingState state) => TextStyle(
+    fontSize: 13,
+    color: state.getSubTitleSendingEmailItemColor(),
+    fontWeight: FontWeight.normal
+  );
+  static TextStyle getTimeCreatedTextStyle(SendingState state) => TextStyle(
+    fontSize: 13,
+    color: state.getTitleSendingEmailItemColor(),
+    fontWeight: FontWeight.normal
+  );
+}
@@ -0,0 +1,17 @@
+
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/offline_mode/model/sending_state.dart';
+
+class SendingStateWidgetStyle {
+  static const double space = 4;
+  static const double iconSize = 20;
+  static const double radius = 16;
+
+  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(horizontal: 8, vertical: 6);
+
+  static TextStyle getTitleTextStyle(SendingState state) => TextStyle(
+    fontSize: 15,
+    color: state.getTitleColor(),
+    fontWeight: FontWeight.normal
+  );
+}
@@ -4,13 +4,7 @@ import 'package:flutter/cupertino.dart';

 class SendingQueueUtils {

-  static EdgeInsets getPaddingAppBarByResponsiveSize(double width) {
-    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
-      return const EdgeInsets.symmetric(horizontal: 10);
-    } else {
-      return const EdgeInsets.symmetric(horizontal: 24);
-    }
-  }
+

  static EdgeInsets getMarginBannerMessageByResponsiveSize(double width) {
    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
@@ -19,20 +13,4 @@ class SendingQueueUtils {
      return const EdgeInsets.symmetric(horizontal: 24, vertical: 16);
    }
  }
-
-  static EdgeInsets getPaddingItemListViewByResponsiveSize(double width) {
-    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
-      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
-    } else {
-      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
-    }
-  }
-
-  static EdgeInsets getPaddingDividerListViewByResponsiveSize(double width) {
-    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
-      return const EdgeInsets.only(left: 84, right: 8, top: 8);
-    } else {
-      return const EdgeInsets.only(left: 100, right: 24, top: 8);
-    }
-  }
 }
@@ -1,15 +1,14 @@
-
 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/button/icon_button_web.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/sending_queue/domain/model/sending_email.dart';
-import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart';
+import 'package:tmail_ui_user/features/sending_queue/presentation/styles/app_bar_sending_queue_widget_style.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class AppBarSendingQueueWidget extends StatelessWidget {
@@ -19,7 +18,9 @@ class AppBarSendingQueueWidget extends StatelessWidget {
  final SelectMode selectMode;
  final List<SendingEmail> listSendingEmailSelected;

-  const AppBarSendingQueueWidget({
+  final _imagePaths = Get.find<ImagePaths>();
+
+  AppBarSendingQueueWidget({
    super.key,
    required this.listSendingEmailSelected,
    this.onBackAction,
@@ -29,54 +30,49 @@ class AppBarSendingQueueWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-
    return LayoutBuilder(builder: (context, constraints) {
      return Container(
-        height: 52,
-        color: Colors.white,
-        padding: SendingQueueUtils.getPaddingAppBarByResponsiveSize(constraints.maxWidth),
+        height: AppBarSendingQueueWidgetStyle.height,
+        color: AppBarSendingQueueWidgetStyle.backgroundColor,
+        padding: AppBarSendingQueueWidgetStyle.getPaddingAppBarByResponsiveSize(constraints.maxWidth),
        child: Row(
          children: [
            if (selectMode == SelectMode.INACTIVE)
-              buildIconWeb(
-                icon: SvgPicture.asset(
-                  imagePaths.icMenuMailbox,
-                  colorFilter: AppColor.colorTextButton.asFilter(),
-                  fit: BoxFit.fill
-                ),
-                tooltip: AppLocalizations.of(context).openMailboxMenu,
-                onTap: onOpenMailboxMenu
+              TMailButtonWidget.fromIcon(
+                icon: _imagePaths.icMenuMailbox,
+                backgroundColor: Colors.transparent,
+                iconColor: AppBarSendingQueueWidgetStyle.iconColor,
+                tooltipMessage: AppLocalizations.of(context).openMailboxMenu,
+                onTapActionCallback: onOpenMailboxMenu
              )
            else
              Padding(
-                padding: const EdgeInsets.only(left: 8),
+                padding: AppBarSendingQueueWidgetStyle.leadingPadding,
                child: Material(
                  color: Colors.transparent,
-                  borderRadius: BorderRadius.circular(15),
+                  borderRadius: const BorderRadius.all(Radius.circular(AppBarSendingQueueWidgetStyle.leadingRadius)),
                  child: InkWell(
                    onTap: onBackAction,
-                    borderRadius: BorderRadius.circular(15),
+                    borderRadius: const BorderRadius.all(Radius.circular(AppBarSendingQueueWidgetStyle.leadingRadius)),
                    child: Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                      padding: AppBarSendingQueueWidgetStyle.selectIconPadding,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          SvgPicture.asset(
-                            DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icCollapseFolder : imagePaths.icBack,
-                            colorFilter: AppColor.colorTextButton.asFilter(),
+                            DirectionUtils.isDirectionRTLByLanguage(context)
+                              ? _imagePaths.icCollapseFolder
+                              : _imagePaths.icBack,
+                            colorFilter: AppBarSendingQueueWidgetStyle.iconColor.asFilter(),
                            fit: BoxFit.fill
                          ),
-                          const SizedBox(width: 8),
+                          const SizedBox(width: AppBarSendingQueueWidgetStyle.space),
                          Text(
                            listSendingEmailSelected.length.toString(),
                            maxLines: 1,
                            overflow: CommonTextStyle.defaultTextOverFlow,
                            softWrap: CommonTextStyle.defaultSoftWrap,
-                            style: const TextStyle(
-                              fontSize: 17,
-                              color: AppColor.colorTextButton
-                            )
+                            style: AppBarSendingQueueWidgetStyle.countStyle
                          )
                        ]
                      ),
@@ -90,13 +86,9 @@ class AppBarSendingQueueWidget extends StatelessWidget {
              textAlign: TextAlign.center,
              overflow: CommonTextStyle.defaultTextOverFlow,
              softWrap: CommonTextStyle.defaultSoftWrap,
-              style: const TextStyle(
-                fontSize: 21,
-                color: Colors.black,
-                fontWeight: FontWeight.bold
-              )
+              style: AppBarSendingQueueWidgetStyle.labelStyle
            )),
-            const SizedBox(width: 50)
+            const SizedBox(width: AppBarSendingQueueWidgetStyle.trailingSize)
          ],
        ),
      );
@@ -1,6 +1,7 @@

 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart';
@@ -35,7 +36,9 @@ class BannerMessageSendingQueueWidget extends StatelessWidget {
            ),
            const SizedBox(width: 8),
            Expanded(child: Text(
-              AppLocalizations.of(context).bannerMessageSendingQueueView,
+              PlatformInfo.isAndroid
+                ? AppLocalizations.of(context).bannerMessageSendingQueueView
+                : AppLocalizations.of(context).bannerMessageSendingQueueViewOnIOS,
              style: const TextStyle(
                fontSize: 15,
                color: Colors.black,
@@ -3,6 +3,7 @@ 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/views/button/tmail_button_widget.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/state/button_state.dart';
@@ -18,7 +19,10 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
  final OnHandleSendingEmailActionType? onHandleSendingEmailActionType;
  final bool isConnectedNetwork;

-  const BottomBarSendingQueueWidget({
+  final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  BottomBarSendingQueueWidget({
    super.key,
    required this.listSendingEmailSelected,
    this.onHandleSendingEmailActionType,
@@ -27,9 +31,6 @@ class BottomBarSendingQueueWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-    final responsiveUtils = Get.find<ResponsiveUtils>();
-
    return Container(
      decoration: const BoxDecoration(
        border: Border(top: BorderSide(
@@ -45,7 +46,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
            child: TMailButtonWidget(
              key: Key(SendingEmailActionType.edit.getButtonKey()),
              text: SendingEmailActionType.edit.getButtonTitle(context),
-              icon: imagePaths.icEdit,
+              icon: _imagePaths.icEdit,
              borderRadius: 0,
              backgroundColor: Colors.transparent,
              iconColor: SendingEmailActionType.edit.getButtonIconColor(_isEditable ? ButtonState.enabled : ButtonState.disabled),
@@ -53,7 +54,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
                fontSize: 12,
                color: SendingEmailActionType.edit.getButtonTitleColor(_isEditable ? ButtonState.enabled : ButtonState.disabled)
              ),
-              verticalDirection: responsiveUtils.isPortraitMobile(context),
+              verticalDirection: _responsiveUtils.isPortraitMobile(context),
              onTapActionCallback: () {
                if (_isEditable) {
                  onHandleSendingEmailActionType?.call(
@@ -68,7 +69,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
            child: TMailButtonWidget(
              key: Key(SendingEmailActionType.resend.getButtonKey()),
              text: SendingEmailActionType.resend.getButtonTitle(context),
-              icon: imagePaths.icRefresh,
+              icon: _imagePaths.icRefresh,
              borderRadius: 0,
              backgroundColor: Colors.transparent,
              iconColor: SendingEmailActionType.resend.getButtonIconColor(_isCanResend ? ButtonState.enabled : ButtonState.disabled),
@@ -76,7 +77,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
                fontSize: 12,
                color: SendingEmailActionType.resend.getButtonTitleColor(_isCanResend ? ButtonState.enabled : ButtonState.disabled)
              ),
-              verticalDirection: responsiveUtils.isPortraitMobile(context),
+              verticalDirection: _responsiveUtils.isPortraitMobile(context),
              onTapActionCallback: () {
                if (_isCanResend) {
                  onHandleSendingEmailActionType?.call(SendingEmailActionType.resend, listSendingEmailSelected);
@@ -88,7 +89,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
            child: TMailButtonWidget(
              key: Key(SendingEmailActionType.delete.getButtonKey()),
              text: SendingEmailActionType.delete.getButtonTitle(context),
-              icon: imagePaths.icDeleteComposer,
+              icon: _imagePaths.icDeleteComposer,
              borderRadius: 0,
              backgroundColor: Colors.transparent,
              iconColor: SendingEmailActionType.delete.getButtonIconColor(ButtonState.enabled),
@@ -96,7 +97,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
                fontSize: 12,
                color: SendingEmailActionType.delete.getButtonTitleColor(ButtonState.enabled)
              ),
-              verticalDirection: responsiveUtils.isPortraitMobile(context),
+              verticalDirection: _responsiveUtils.isPortraitMobile(context),
              onTapActionCallback: () => onHandleSendingEmailActionType?.call(SendingEmailActionType.delete, listSendingEmailSelected),
            ),
          ),
@@ -105,9 +106,28 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
    );
  }

-  bool get _isEditable => !isConnectedNetwork &&
-    listSendingEmailSelected.length == 1 &&
-    listSendingEmailSelected.first.isEditableSupported;
+  bool get _isEditable {
+    if (PlatformInfo.isAndroid) {
+      return !isConnectedNetwork &&
+        listSendingEmailSelected.length == 1 &&
+        listSendingEmailSelected.first.isEditableSupported;
+    } else if (PlatformInfo.isIOS) {
+      return listSendingEmailSelected.length == 1 &&
+        listSendingEmailSelected.first.isEditableSupported;
+    } else {
+      return false;
+    }
+  }

-  bool get _isCanResend => listSendingEmailSelected.isAllSendingStateError();
+  bool get _isCanResend {
+    if (PlatformInfo.isAndroid) {
+      return listSendingEmailSelected.isAllSendingStateError();
+    } else if (PlatformInfo.isIOS) {
+      return isConnectedNetwork &&
+        listSendingEmailSelected.length == 1 &&
+        (listSendingEmailSelected.first.isWaiting || listSendingEmailSelected.first.isError);
+    } else {
+      return false;
+    }
+  }
 }
@@ -3,6 +3,7 @@ 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/text/text_overflow_builder.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -10,7 +11,7 @@ import 'package:model/extensions/presentation_email_extension.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/sending_queue/domain/model/sending_email.dart';
 import 'package:tmail_ui_user/features/sending_queue/presentation/model/sending_email_action_type.dart';
-import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart';
+import 'package:tmail_ui_user/features/sending_queue/presentation/styles/sending_email_tile_style.dart';
 import 'package:tmail_ui_user/features/sending_queue/presentation/widgets/sending_state_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

@@ -26,7 +27,9 @@ class SendingEmailTileWidget extends StatelessWidget {
  final OnSelectSendingEmailItemAction? onTapAction;
  final OnSelectLeadingSendingEmailItemAction? onSelectLeadingAction;

-  const SendingEmailTileWidget({
+  final _imagePaths = Get.find<ImagePaths>();
+  
+  SendingEmailTileWidget({
    super.key,
    required this.sendingEmail,
    required this.selectMode,
@@ -37,8 +40,6 @@ class SendingEmailTileWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-
    return LayoutBuilder(builder: (context, constraints) {
      return Material(
        color: Colors.transparent,
@@ -49,27 +50,27 @@ class SendingEmailTileWidget extends StatelessWidget {
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
-                padding: SendingQueueUtils.getPaddingItemListViewByResponsiveSize(constraints.maxWidth),
+                padding: SendingEmailTileStyle.getPaddingItemListViewByResponsiveSize(constraints.maxWidth),
                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.start,
+                  crossAxisAlignment: _axisAlignment,
                  children: [
                    if (selectMode == SelectMode.ACTIVE)
                      GestureDetector(
                        child: Container(
-                          width: 60,
-                          height: 60,
+                          width: SendingEmailTileStyle.avatarIconSize,
+                          height: SendingEmailTileStyle.avatarIconSize,
                          decoration: const BoxDecoration(
                            color: Colors.white,
-                            borderRadius: BorderRadius.all(Radius.circular(30))
+                            borderRadius: BorderRadius.all(Radius.circular(SendingEmailTileStyle.avatarIconRadius))
                          ),
                          alignment: Alignment.center,
                          child: SvgPicture.asset(
                            sendingEmail.isSelected
-                              ? imagePaths.icSelected
-                              : imagePaths.icUnSelected,
+                              ? _imagePaths.icSelected
+                              : _imagePaths.icUnSelected,
                            fit: BoxFit.fill,
-                            width: 24,
-                            height: 24
+                            width: SendingEmailTileStyle.selectIconSize,
+                            height: SendingEmailTileStyle.selectIconSize
                          ),
                        ),
                        onTap: () => onSelectLeadingAction?.call(sendingEmail),
@@ -77,84 +78,72 @@ class SendingEmailTileWidget extends StatelessWidget {
                    else
                      SvgPicture.asset(
                        sendingEmail.presentationEmail.numberOfAllEmailAddress() == 1
-                          ? sendingEmail.sendingState.getAvatarPersonal(imagePaths)
-                          : sendingEmail.sendingState.getAvatarGroup(imagePaths),
+                          ? sendingEmail.sendingState.getAvatarPersonal(_imagePaths)
+                          : sendingEmail.sendingState.getAvatarGroup(_imagePaths),
                        fit: BoxFit.fill,
-                        width: 60,
-                        height: 60,
+                        width: SendingEmailTileStyle.avatarIconSize,
+                        height: SendingEmailTileStyle.avatarIconSize,
                      ),
-                    const SizedBox(width: 8),
+                    const SizedBox(width: SendingEmailTileStyle.space),
                    Expanded(child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(children: [
                          Expanded(child: TextOverflowBuilder(
                            AppLocalizations.of(context).titleRecipientSendingEmail(sendingEmail.presentationEmail.recipientsName()),
-                            style: TextStyle(
-                              fontSize: 15,
-                              color: sendingEmail.sendingState.getTitleSendingEmailItemColor(),
-                              fontWeight: FontWeight.w600
-                            )
+                            style: SendingEmailTileStyle.getTitleTextStyle(sendingEmail.sendingState)
                          )),
                          if (sendingEmail.email.attachments != null && sendingEmail.email.attachments!.isNotEmpty)
                            Padding(
-                              padding: const EdgeInsets.only(left: 8),
+                              padding: SendingEmailTileStyle.attachmentPadding,
                              child: SvgPicture.asset(
-                                imagePaths.icAttachment,
-                                width: 20,
-                                height: 20,
+                                _imagePaths.icAttachment,
+                                width: SendingEmailTileStyle.attachmentIconSize,
+                                height: SendingEmailTileStyle.attachmentIconSize,
                                fit: BoxFit.fill
                              )
                            ),
                          Padding(
-                            padding: const EdgeInsets.only(left: 8),
+                            padding: SendingEmailTileStyle.timeCreatedPadding,
                            child: Text(
                              sendingEmail.getCreateTimeAt(Localizations.localeOf(context).toLanguageTag()),
                              maxLines: 1,
                              softWrap: CommonTextStyle.defaultSoftWrap,
                              overflow: CommonTextStyle.defaultTextOverFlow,
-                              style: TextStyle(
-                                fontSize: 13,
-                                color: sendingEmail.sendingState.getTitleSendingEmailItemColor(),
-                                fontWeight: FontWeight.normal
-                              )
+                              style: SendingEmailTileStyle.getTimeCreatedTextStyle(sendingEmail.sendingState)
                            )
                          ),
-                          if (!ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth))
+                          if (!ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth) && _isShowStateLabel)
                            Container(
-                              margin: const EdgeInsets.only(left: 8),
-                              width: 120,
+                              margin: SendingEmailTileStyle.statePadding,
+                              width: SendingEmailTileStyle.stateRowWidth,
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  const Spacer(),
                                  SendingStateWidget(
                                    sendingState: sendingEmail.sendingState,
-                                    constraints: const BoxConstraints(maxWidth: 80),
+                                    constraints: const BoxConstraints(maxWidth: SendingEmailTileStyle.stateLabelWidth),
                                  )
                                ]
                              )
                            )
                        ]),
-                        const SizedBox(height: 8),
+                        const SizedBox(height: SendingEmailTileStyle.space),
                        TextOverflowBuilder(
                          sendingEmail.presentationEmail.getEmailTitle(),
-                          style: TextStyle(
-                            fontSize: 13,
-                            color: sendingEmail.sendingState.getSubTitleSendingEmailItemColor(),
-                            fontWeight: FontWeight.normal
-                          )
+                          style: SendingEmailTileStyle.getSubTitleTextStyle(sendingEmail.sendingState)
                        ),
-                        if (ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth))
+                        if (ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth) && _isShowStateLabel)
                          Padding(
-                            padding: const EdgeInsets.only(top: 8),
+                            padding: SendingEmailTileStyle.statePaddingMobile,
                            child: SendingStateWidget(sendingState: sendingEmail.sendingState))
                      ]
                    ))
                ]),
              ),
              Padding(
-                padding: SendingQueueUtils.getPaddingDividerListViewByResponsiveSize(constraints.maxWidth),
+                padding: SendingEmailTileStyle.getPaddingDividerListViewByResponsiveSize(constraints.maxWidth),
                child: const Divider(color: AppColor.lineItemListColor, height: 1),
              )
            ],
@@ -163,4 +152,20 @@ class SendingEmailTileWidget extends StatelessWidget {
      );
    });
  }
+
+  bool get _isShowStateLabel {
+    if (PlatformInfo.isIOS) {
+      return !sendingEmail.isWaiting;
+    } else {
+      return true;
+    }
+  }
+
+  CrossAxisAlignment get _axisAlignment {
+    if (PlatformInfo.isIOS) {
+      return _isShowStateLabel ? CrossAxisAlignment.start : CrossAxisAlignment.center;
+    } else {
+      return CrossAxisAlignment.start;
+    }
+  }
 }
@@ -1,16 +1,21 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/views/loading/cupertino_loading_widget.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/offline_mode/model/sending_state.dart';
-import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+import 'package:tmail_ui_user/features/sending_queue/presentation/styles/sending_state_widget_style.dart';

 class SendingStateWidget extends StatelessWidget {

  final SendingState sendingState;
  final BoxConstraints? constraints;

-  const SendingStateWidget({
+  final _imagePath = Get.find<ImagePaths>();
+
+  SendingStateWidget({
    super.key,
    required this.sendingState,
    this.constraints
@@ -18,25 +23,35 @@ class SendingStateWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final imagePath = getBinding<ImagePaths>();

    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      padding: SendingStateWidgetStyle.padding,
      decoration: BoxDecoration(
        color: sendingState.getBackgroundColor(),
-        borderRadius: const BorderRadius.all(Radius.circular(16))
+        borderRadius: const BorderRadius.all(Radius.circular(SendingStateWidgetStyle.radius))
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
-          SvgPicture.asset(
-            sendingState.getIcon(imagePath!),
-            fit: BoxFit.fill,
-            width: 20,
-            height: 20
-          ),
-          const SizedBox(width: 4),
+          if (PlatformInfo.isIOS)
+            if (sendingState == SendingState.running)
+              const CupertinoLoadingWidget(size: SendingStateWidgetStyle.iconSize)
+            else
+              SvgPicture.asset(
+                sendingState.getIcon(_imagePath),
+                fit: BoxFit.fill,
+                width: SendingStateWidgetStyle.iconSize,
+                height: SendingStateWidgetStyle.iconSize
+              )
+          else
+            SvgPicture.asset(
+              sendingState.getIcon(_imagePath),
+              fit: BoxFit.fill,
+              width: SendingStateWidgetStyle.iconSize,
+              height: SendingStateWidgetStyle.iconSize
+            ),
+          const SizedBox(width: SendingStateWidgetStyle.space),
          if (constraints != null)
            ConstrainedBox(
              constraints: constraints!,
@@ -45,11 +60,7 @@ class SendingStateWidget extends StatelessWidget {
                maxLines: 1,
                overflow: CommonTextStyle.defaultTextOverFlow,
                softWrap: CommonTextStyle.defaultSoftWrap,
-                style: TextStyle(
-                  fontSize: 15,
-                  color: sendingState.getTitleColor(),
-                  fontWeight: FontWeight.normal
-                )
+                style: SendingStateWidgetStyle.getTitleTextStyle(sendingState)
              ),
            )
          else
@@ -58,11 +69,7 @@ class SendingStateWidget extends StatelessWidget {
              maxLines: 1,
              overflow: CommonTextStyle.defaultTextOverFlow,
              softWrap: CommonTextStyle.defaultSoftWrap,
-              style: TextStyle(
-                fontSize: 15,
-                color: sendingState.getTitleColor(),
-                fontWeight: FontWeight.normal
-              )
+              style: SendingStateWidgetStyle.getTitleTextStyle(sendingState)
            )
        ]
      ),