TF-682 Support landscape tablet for ThreadView and EmailView

core/lib/presentation/views/button/button_builder.dart

@@ -74,7 +74,7 @@ class ButtonBuilder {
     _paddingIcon = paddingIcon;
   }
 
-  void text(String text, {required bool isVertical}) {
+  void text(String? text, {required bool isVertical}) {
     _text = text;
     _isVertical = isVertical;
   }

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -44,26 +44,26 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                 responsiveUtils: _responsiveUtils,
                 mobile: SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity),
                 landscapeMobile: Row(children: [
-                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: ResponsiveUtils.defaultSizeDrawer),
                   Expanded(child: Container(color: Colors.transparent)),
                 ]),
                 tablet: Row(children: [
                   Expanded(child: Container(color: Colors.transparent)),
                   SizedBox(
                       child: _buildBodyMailboxLocation(context, actions),
-                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer),
+                      width: _responsiveUtils.getSizeScreenWidth(context) - ResponsiveUtils.defaultSizeDrawer),
                 ]),
                 tabletLarge: Row(children: [
                   Expanded(child: Container(color: Colors.transparent)),
                   SizedBox(
                       child: _buildBodyMailboxLocation(context, actions),
-                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer),
+                      width: _responsiveUtils.getSizeScreenWidth(context) - ResponsiveUtils.defaultSizeDrawer),
                 ]),
                 desktop: Row(children: [
                   Expanded(child: Container(color: Colors.transparent)),
                   SizedBox(
                       child: _buildBodyMailboxLocation(context, actions),
-                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer),
+                      width: _responsiveUtils.getSizeScreenWidth(context) - ResponsiveUtils.defaultSizeDrawer),
                 ]),
             ),
           )
@@ -79,19 +79,19 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                 responsiveUtils: _responsiveUtils,
                 mobile: SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity),
                 landscapeMobile: Row(children: [
-                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: ResponsiveUtils.defaultSizeDrawer),
                   Expanded(child: Container(color: Colors.transparent)),
                 ]),
                 tablet: Row(children: [
-                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: ResponsiveUtils.defaultSizeDrawer),
                   Expanded(child: Container(color: Colors.transparent)),
                 ]),
                 tabletLarge: Row(children: [
-                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: ResponsiveUtils.defaultSizeDrawer),
                   Expanded(child: Container(color: Colors.transparent)),
                 ]),
                 desktop: Row(children: [
-                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: ResponsiveUtils.defaultSizeDrawer),
                   Expanded(child: Container(color: Colors.transparent)),
                 ]),
             ),

lib/features/email/presentation/email_controller.dart

@@ -204,7 +204,7 @@ class EmailController extends BaseController {
     if (success is MarkAsEmailReadSuccess
         && success.readActions == ReadActions.markAsUnread
         && currentContext != null) {
-      backToThreadView(currentContext!);
+      closeEmailView(currentContext!);
     }
   }
 
@@ -212,7 +212,7 @@ class EmailController extends BaseController {
     if (failure is MarkAsEmailReadFailure
         && failure.readActions == ReadActions.markAsUnread
         && currentContext != null) {
-      backToThreadView(currentContext!);
+      closeEmailView(currentContext!);
     }
   }
 
@@ -453,7 +453,7 @@ class EmailController extends BaseController {
   }
 
   void _moveToTrashAction(BuildContext context, AccountId accountId, MoveToMailboxRequest moveRequest) {
-    backToThreadView(context);
+    closeEmailView(context);
     mailboxDashBoardController.moveToMailbox(accountId, moveRequest);
   }
 
@@ -489,7 +489,7 @@ class EmailController extends BaseController {
   }
 
   void _moveToSpamAction(BuildContext context, AccountId accountId, MoveToMailboxRequest moveRequest) {
-    backToThreadView(context);
+    closeEmailView(context);
     mailboxDashBoardController.moveToMailbox(accountId, moveRequest);
   }
 
@@ -632,17 +632,13 @@ class EmailController extends BaseController {
 
   void _deleteEmailPermanentlyAction(BuildContext context, PresentationEmail email) {
     popBack();
-    backToThreadView(context);
+    closeEmailView(context);
     mailboxDashBoardController.deleteEmailPermanently(email);
   }
 
-  void backToThreadView(BuildContext context) {
+  void closeEmailView(BuildContext context) {
     mailboxDashBoardController.clearSelectedEmail();
-    if (responsiveUtils.isDesktop(context) || responsiveUtils.isTabletLarge(context)) {
+    mailboxDashBoardController.dispatchRoute(AppRoutes.THREAD);
-      mailboxDashBoardController.dispatchRoute(AppRoutes.THREAD);
-    } else {
-      popBack();
-    }
   }
 
   void pressEmailAction(EmailActionType emailActionType) {

lib/features/email/presentation/email_view.dart

@@ -16,9 +16,8 @@ import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mai
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_action_cupertino_action_sheet_action_builder.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-class EmailView extends GetView with NetworkConnectionMixin {
+class EmailView extends GetWidget<EmailController> with NetworkConnectionMixin {
 
-  final emailController = Get.find<EmailController>();
   final responsiveUtils = Get.find<ResponsiveUtils>();
   final imagePaths = Get.find<ImagePaths>();
 
@@ -30,54 +29,63 @@ class EmailView extends GetView with NetworkConnectionMixin {
   Widget build(BuildContext context) {
     return WillPopScope(
       onWillPop: () async {
-        emailController.backToThreadView(context);
+        controller.closeEmailView(context);
         return true;
       },
       child: Scaffold(
-        backgroundColor: responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
+        backgroundColor: responsiveUtils.isWebDesktop(context)
-        body: Stack(children: [
+            ? AppColor.colorBgDesktop
-          Row(children: [
+            : Colors.white,
-            if ((!kIsWeb && !responsiveUtils.isMobile(context)) || (kIsWeb && responsiveUtils.isTabletLarge(context)))
+        body: Row(children: [
-              const VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2),
+          if (_isMailboxDashboardSplitView(context))
-            Expanded(child: SafeArea(
+            const VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2),
-                right: responsiveUtils.isLandscapeMobile(context),
+          Expanded(child: SafeArea(
-                left: responsiveUtils.isLandscapeMobile(context),
+              right: responsiveUtils.isLandscapeMobile(context),
-                child: _buildBody(context)))
+              left: responsiveUtils.isLandscapeMobile(context),
-          ]),
+              child: Container(
-          Obx(() => !emailController.mailboxDashBoardController.isNetworkConnectionAvailable() && (responsiveUtils.isMobile(context) || responsiveUtils.isTablet(context))
+                  decoration: responsiveUtils.isWebDesktop(context)
-              ? Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))
+                      ? BoxDecoration(
-              : const SizedBox.shrink()),
+                          borderRadius: BorderRadius.circular(20),
+                          border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
+                          color: Colors.white)
+                      : null,
+                  margin: responsiveUtils.isWebDesktop(context)
+                      ? const EdgeInsets.only(right: 16, top: 16, bottom: 16)
+                      : EdgeInsets.zero,
+                  padding: responsiveUtils.isWebDesktop(context)
+                      ? const EdgeInsets.only(top: 5, bottom: 5, left: 5, right: 3)
+                      : EdgeInsets.zero,
+                  child: Column(children: [
+                    _buildAppBar(context),
+                    if (responsiveUtils.isWebDesktop(context))
+                      const SizedBox(height: 5),
+                    Obx(() {
+                     if (controller.currentEmail != null &&
+                         !responsiveUtils.isWebDesktop(context)) {
+                       return _buildDivider();
+                     }
+                     return const SizedBox.shrink();
+                    }),
+                    Expanded(child: _buildEmailBody(context)),
+                    Obx(() => controller.currentEmail != null
+                        ? const Divider(color: AppColor.colorDividerEmailView, height: 1)
+                        : const SizedBox.shrink()),
+                    _buildBottomBar(context),
+                  ])
+              )
+          ))
         ])
       )
     );
   }
 
-  Widget _buildBody(BuildContext context) {
+  bool _isMailboxDashboardSplitView(BuildContext context) {
-    return Container(
+    if (BuildUtils.isWeb) {
-        decoration: responsiveUtils.isDesktop(context)
+      return responsiveUtils.isTabletLarge(context);
-          ? BoxDecoration(
+    } else {
-              borderRadius: BorderRadius.circular(20),
+      return responsiveUtils.isLandscapeTablet(context)
-              border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
+       || responsiveUtils.isDesktop(context);
-              color: Colors.white)
+    }
-          : null,
-        margin: responsiveUtils.isDesktop(context)
-            ? const EdgeInsets.only(right: 16, top: 16, bottom: 16)
-            : EdgeInsets.zero,
-        padding: responsiveUtils.isDesktop(context)
-            ? const EdgeInsets.only(top: 5, bottom: 5, left: 5, right: 3)
-            : EdgeInsets.zero,
-        child: Column(children: [
-          _buildAppBar(context),
-          if (responsiveUtils.isDesktop(context)) const SizedBox(height: 5),
-          Obx(() => emailController.currentEmail != null && !responsiveUtils.isDesktop(context)
-              ? _buildDivider() : const SizedBox.shrink()),
-          Expanded(child: _buildEmailBody(context)),
-          Obx(() => emailController.currentEmail != null
-              ? const Divider(color: AppColor.colorDividerEmailView, height: 1)
-              : const SizedBox.shrink()),
-          _buildBottomBar(context),
-        ])
-    );
   }
 
   Widget _buildDivider({EdgeInsets? edgeInsets}){
@@ -89,24 +97,43 @@ class EmailView extends GetView with NetworkConnectionMixin {
   Widget _buildAppBar(BuildContext context) {
     return Obx(() => Padding(
       padding: const EdgeInsets.only(top: 6),
-      child: (AppBarMailWidgetBuilder(context, imagePaths, responsiveUtils, emailController.currentEmail, emailController.currentMailbox)
+      child: (AppBarMailWidgetBuilder(
-          ..onBackActionClick(() => emailController.backToThreadView(context))
+              context,
-          ..addOnEmailActionClick((email, action) => emailController.handleEmailAction(context, email, action))
+              imagePaths,
-          ..addOnMoreActionClick((email, position) => responsiveUtils.isMobile(context)
+              responsiveUtils,
-              ? emailController.openContextMenuAction(context, _emailActionMoreActionTile(context, email))
+              controller.currentEmail,
-              : emailController.openPopupMenuAction(context, position, _popupMenuEmailActionTile(context, email))))
+              controller.currentMailbox)
+          ..onBackActionClick(() => controller.closeEmailView(context))
+          ..addOnEmailActionClick((email, action) =>
+              controller.handleEmailAction(context, email, action))
+          ..addOnMoreActionClick((email, position) {
+            if (responsiveUtils.isMobile(context)) {
+              controller.openContextMenuAction(
+                  context,
+                  _emailActionMoreActionTile(context, email));
+            } else {
+              controller.openPopupMenuAction(
+                  context,
+                  position,
+                  _popupMenuEmailActionTile(context, email));
+            }
+          }))
         .build()));
   }
 
   Widget _buildBottomBar(BuildContext context) {
+    bool isMobileDevice = responsiveUtils.isPortraitMobile(context) &&
+        responsiveUtils.isLandscapeMobile(context);
     return Padding(
-      padding: const EdgeInsets.only(bottom: 16),
+      padding: EdgeInsets.only(
+          bottom: !BuildUtils.isWeb && isMobileDevice ? 16 : 0),
       child: Obx(() => (BottomBarMailWidgetBuilder(
               context,
               imagePaths,
               responsiveUtils,
-              emailController.mailboxDashBoardController.selectedEmail.value)
+              controller.mailboxDashBoardController.selectedEmail.value)
-          ..addOnPressEmailAction((emailActionType) => emailController.pressEmailAction(emailActionType)))
+          ..addOnPressEmailAction((emailActionType) =>
+              controller.pressEmailAction(emailActionType)))
         .build()));
   }
 
@@ -116,7 +143,7 @@ class EmailView extends GetView with NetworkConnectionMixin {
       margin: EdgeInsets.zero,
       alignment: Alignment.topCenter,
       child: Obx(() {
-        if (emailController.currentEmail != null) {
+        if (controller.currentEmail != null) {
           if (kIsWeb) {
             return _buildEmailMessage(context);
           } else {
@@ -150,7 +177,7 @@ class EmailView extends GetView with NetworkConnectionMixin {
     return Padding(
       padding: const EdgeInsets.only(right: 16),
       child: SelectableText(
-          '${emailController.mailboxDashBoardController.selectedEmail.value?.getEmailTitle()}',
+          '${controller.mailboxDashBoardController.selectedEmail.value?.getEmailTitle()}',
           maxLines: kIsWeb ? 3 : null,
           minLines: kIsWeb ? 1 : null,
           cursorColor: AppColor.colorTextButton,
@@ -178,12 +205,12 @@ class EmailView extends GetView with NetworkConnectionMixin {
                   ]),
               if (responsiveUtils.isDesktop(context)) const SizedBox(height: 20),
               if (!responsiveUtils.isDesktop(context)) _buildDivider(edgeInsets: const EdgeInsets.only(top: 16)),
-              Obx(() => emailController.currentEmail != null
+              Obx(() => controller.currentEmail != null
                   ? _buildEmailAddress(
                       context,
-                      emailController.currentEmail!,
+                      controller.currentEmail!,
-                      emailController.emailAddressExpandMode.value,
+                      controller.emailAddressExpandMode.value,
-                      emailController.isDisplayFullEmailAddress.value)
+                      controller.isDisplayFullEmailAddress.value)
                   : const SizedBox.shrink()),
               _buildDivider(edgeInsets: const EdgeInsets.only(top: 8)),
               _buildLoadingView(),
@@ -201,8 +228,8 @@ class EmailView extends GetView with NetworkConnectionMixin {
 
   Widget _buildLoadingView() {
     return Obx(() {
-      if (emailController.emailContents.isEmpty) {
+      if (controller.emailContents.isEmpty) {
-        return emailController.viewState.value.fold(
+        return controller.viewState.value.fold(
           (failure) => const SizedBox.shrink(),
           (success) {
             if (success is LoadingState) {
@@ -226,9 +253,9 @@ class EmailView extends GetView with NetworkConnectionMixin {
     return Transform(
         transform: Matrix4.translationValues(0.0, 12.0, 0.0),
         child: Text(
-            '${emailController.currentEmail?.getReceivedAt(
+            '${controller.currentEmail?.getReceivedAt(
                 Localizations.localeOf(context).toLanguageTag(),
-                pattern: emailController.currentEmail?.receivedAt?.value.toLocal().toPatternForEmailView())}',
+                pattern: controller.currentEmail?.receivedAt?.value.toLocal().toPatternForEmailView())}',
             maxLines: 1,
             overflow:TextOverflow.ellipsis,
             style: const TextStyle(fontSize: 13, color: AppColor.colorTime)));
@@ -303,7 +330,7 @@ class EmailView extends GetView with NetworkConnectionMixin {
                 return Padding(
                     padding: const EdgeInsets.only(left: 10),
                     child: GestureDetector(
-                      onTap: () => emailController.openEmailAddressDialog(context, emailAddress),
+                      onTap: () => controller.openEmailAddressDialog(context, emailAddress),
                       child: Chip(
                         labelPadding: const EdgeInsets.only(left: 8, right: 8, bottom: 2),
                         label: Text(emailAddress.asString(), maxLines: 1, overflow: TextOverflow.ellipsis),
@@ -337,9 +364,9 @@ class EmailView extends GetView with NetworkConnectionMixin {
         child: Padding(
             padding: const EdgeInsets.only(top: 4, left: 16),
             child: TextButton(
-              onPressed: () => emailController.toggleDisplayEmailAddressAction(),
+              onPressed: () => controller.toggleDisplayEmailAddressAction(),
               child: Text(
-                emailController.isExpandEmailAddress
+                controller.isExpandEmailAddress
                     ? AppLocalizations.of(context).hide
                     : AppLocalizations.of(context).details,
                 style: const TextStyle(fontSize: 15, color: AppColor.colorTextButton, fontWeight: FontWeight.normal),
@@ -358,7 +385,7 @@ class EmailView extends GetView with NetworkConnectionMixin {
 
   Widget _buildEmailAddressCounter(BuildContext context, PresentationEmail email) {
     return GestureDetector(
-      onTap: () => emailController.showFullEmailAddress(),
+      onTap: () => controller.showFullEmailAddress(),
       child: Padding(
         padding: const EdgeInsets.only(left: 8),
         child: Chip(
@@ -377,7 +404,7 @@ class EmailView extends GetView with NetworkConnectionMixin {
 
   Widget _buildAttachments(BuildContext context) {
    return Obx(() {
-     final attachments = emailController.attachments.listAttachmentsDisplayedOutSide;
+     final attachments = controller.attachments.listAttachmentsDisplayedOutSide;
      return attachments.isNotEmpty
          ? _buildAttachmentsBody(context, attachments)
          : const SizedBox.shrink();
@@ -398,10 +425,10 @@ class EmailView extends GetView with NetworkConnectionMixin {
     final attachmentLimitDisplayed = _getAttachmentLimitDisplayed(context);
     final countAttachments = _getListAttachmentsSize(
         context,
-        emailController.attachmentsExpandMode.value,
+        controller.attachmentsExpandMode.value,
         attachments,
         attachmentLimitDisplayed);
-    final isExpand = emailController.attachmentsExpandMode.value == ExpandMode.EXPAND
+    final isExpand = controller.attachmentsExpandMode.value == ExpandMode.EXPAND
         && attachments.length > attachmentLimitDisplayed;
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
@@ -428,13 +455,13 @@ class EmailView extends GetView with NetworkConnectionMixin {
                     attachments[index],
                     attachments.length,
                     attachmentLimitDisplayed)
-                ..setExpandMode((countAttachments - 1 == index) ? emailController.attachmentsExpandMode.value : null)
+                ..setExpandMode((countAttachments - 1 == index) ? controller.attachmentsExpandMode.value : null)
-                ..onExpandAttachmentActionClick(() => emailController.toggleDisplayAttachmentsAction())
+                ..onExpandAttachmentActionClick(() => controller.toggleDisplayAttachmentsAction())
                 ..onDownloadAttachmentFileActionClick((attachment) {
                   if (kIsWeb) {
-                    emailController.downloadAttachmentForWeb(context, attachment);
+                    controller.downloadAttachmentForWeb(context, attachment);
                   } else {
-                    emailController.exportAttachment(context, attachment);
+                    controller.exportAttachment(context, attachment);
                   }
                 }))
             .build())
@@ -485,7 +512,7 @@ class EmailView extends GetView with NetworkConnectionMixin {
                 height: 20,
                 color: AppColor.primaryColor,
                 fit: BoxFit.fill),
-              onPressed: () => emailController.toggleDisplayAttachmentsAction()
+              onPressed: () => controller.toggleDisplayAttachmentsAction()
             ))
       ],
     );
@@ -493,8 +520,8 @@ class EmailView extends GetView with NetworkConnectionMixin {
 
   Widget _buildEmailContent(BuildContext context, BoxConstraints constraints) {
     return Obx(() {
-      if (emailController.emailContents.isNotEmpty) {
+      if (controller.emailContents.isNotEmpty) {
-        final allEmailContents = emailController.emailContents.asHtmlString;
+        final allEmailContents = controller.emailContents.asHtmlString;
 
         if (kIsWeb) {
           return HtmlContentViewerOnWeb(
@@ -502,12 +529,12 @@ class EmailView extends GetView with NetworkConnectionMixin {
               heightContent: responsiveUtils.getSizeScreenHeight(context),
               contentHtml: allEmailContents,
               controller: HtmlViewerControllerForWeb(),
-              mailtoDelegate: (uri) => emailController.openMailToLink(uri));
+              mailtoDelegate: (uri) => controller.openMailToLink(uri));
         } else {
           return HtmlContentViewer(
               heightContent: responsiveUtils.getSizeScreenHeight(context),
               contentHtml: allEmailContents,
-              mailtoDelegate: (uri) async => emailController.openMailToLink(uri));
+              mailtoDelegate: (uri) async => controller.openMailToLink(uri));
         }
       } else {
         return const SizedBox.shrink();
@@ -534,7 +561,7 @@ class EmailView extends GetView with NetworkConnectionMixin {
             iconRightPadding: responsiveUtils.isMobile(context)
                 ? const EdgeInsets.only(right: 12)
                 : EdgeInsets.zero)
-        ..onActionClick((email) => emailController.handleEmailAction(context, email, EmailActionType.markAsUnread)))
+        ..onActionClick((email) => controller.handleEmailAction(context, email, EmailActionType.markAsUnread)))
       .build();
   }
 
@@ -542,9 +569,9 @@ class EmailView extends GetView with NetworkConnectionMixin {
     return (EmailActionCupertinoActionSheetActionBuilder(
             const Key('mark_as_spam_or_un_spam_action'),
             SvgPicture.asset(
-                emailController.currentMailbox?.isSpam == true ? imagePaths.icNotSpam : imagePaths.icSpam,
+                controller.currentMailbox?.isSpam == true ? imagePaths.icNotSpam : imagePaths.icSpam,
                 width: 28, height: 28, fit: BoxFit.fill, color: AppColor.colorTextButton),
-            emailController.currentMailbox?.isSpam == true
+            controller.currentMailbox?.isSpam == true
                 ? AppLocalizations.of(context).remove_from_spam
                 : AppLocalizations.of(context).mark_as_spam,
             email,
@@ -554,8 +581,8 @@ class EmailView extends GetView with NetworkConnectionMixin {
             iconRightPadding: responsiveUtils.isMobile(context)
                 ? const EdgeInsets.only(right: 12)
                 : EdgeInsets.zero)
-        ..onActionClick((email) => emailController.handleEmailAction(context, email,
+        ..onActionClick((email) => controller.handleEmailAction(context, email,
-            emailController.currentMailbox?.isSpam == true ? EmailActionType.unSpam : EmailActionType.moveToSpam)))
+            controller.currentMailbox?.isSpam == true ? EmailActionType.unSpam : EmailActionType.moveToSpam)))
       .build();
   }
 

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

@@ -3,8 +3,6 @@ import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/model.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/model/app_setting.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/model/reading_pane.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnBackActionClick = void Function();
@@ -53,8 +51,10 @@ class AppBarMailWidgetBuilder {
         child: Row(
           mainAxisAlignment: MainAxisAlignment.end,
           children: [
-            if (_conditionShow(_context)) _buildBackButton(),
+            if (_mailboxDashboardOnlyHasEmailView(_context))
-            if (_conditionShow(_context)) Expanded(child: _buildMailboxName()),
+              _buildBackButton(),
+            if (_mailboxDashboardOnlyHasEmailView(_context))
+              Expanded(child: _buildMailboxName()),
             if (_presentationEmail != null) _buildListOptionButton(),
           ]
         )
@@ -62,12 +62,13 @@ class AppBarMailWidgetBuilder {
     );
   }
 
-  bool _conditionShow(BuildContext context) {
+  bool _mailboxDashboardOnlyHasEmailView(BuildContext context) {
-    if (AppSetting.readingPane == ReadingPane.rightOfInbox
+    if (BuildUtils.isWeb) {
-        && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context))) {
+      return _responsiveUtils.isDesktop(context);
-      return false;
     } else {
-      return true;
+      return _responsiveUtils.isPortraitMobile(context) || 
+        _responsiveUtils.isLandscapeMobile(context) ||
+        _responsiveUtils.isTablet(context);
     }
   }
 

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -344,7 +344,7 @@ class MailboxController extends BaseMailboxController {
       mailboxDashBoardController.searchController.disableSearch();
     }
 
-    if (!_responsiveUtils.isDesktop(context) && !_responsiveUtils.isTabletLarge(context)) {
+    if (_responsiveUtils.hasLeftMenuDrawerActive(context)) {
       mailboxDashBoardController.closeMailboxMenuDrawer();
     } else {
       mailboxDashBoardController.dispatchRoute(AppRoutes.THREAD);

lib/features/mailbox/presentation/mailbox_view.dart

@@ -101,9 +101,9 @@ class MailboxView extends GetWidget<MailboxController> {
           child: Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context)
+              Padding(
-                  ? Padding(padding: const EdgeInsets.only(left: 10), child: _buildCloseScreenButton(context))
+                  padding: const EdgeInsets.only(left: 10),
-                  : const SizedBox(width: 50),
+                  child: _buildCloseScreenButton(context)),
               Obx(() {
                 if (controller.isSearchActive()) {
                   return controller.listMailboxSearched.isNotEmpty

lib/features/mailbox_creator/presentation/mailbox_creator_view.dart

@@ -28,15 +28,15 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
               mobile: SizedBox(child: _buildBody(context), width: double.infinity),
               landscapeMobile: SizedBox(child: _buildBody(context), width: double.infinity),
               tablet: Row(children: [
-                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer),
+                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeDrawer),
                 Expanded(child: Container(color: Colors.transparent)),
               ]),
               tabletLarge: Row(children: [
-                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer),
+                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeDrawer),
                 Expanded(child: Container(color: Colors.transparent)),
               ]),
               desktop: Row(children: [
-                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer),
+                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeDrawer),
                 Expanded(child: Container(color: Colors.transparent)),
               ])
           ),

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart

@@ -2,17 +2,14 @@ import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/mixin/network_connection_mixin.dart';
-import 'package:tmail_ui_user/features/composer/presentation/composer_view.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_view.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/composer_overlay_state.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/model/app_setting.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/model/reading_pane.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_view.dart';
 import 'package:tmail_ui_user/main/routes/app_routes.dart';
 
-class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with NetworkConnectionMixin {
+class MailboxDashBoardView extends GetWidget<MailboxDashBoardController>
+    with NetworkConnectionMixin {
 
   final _responsiveUtils = Get.find<ResponsiveUtils>();
 
@@ -20,87 +17,72 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
 
   @override
   Widget build(BuildContext context) {
+    final bodyLandscapeTablet = Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SizedBox(
+            width: ResponsiveUtils.defaultSizeLeftMenuMobile,
+            child: ThreadView()),
+        Expanded(child: EmailView()),
+      ],
+    );
+
     return Scaffold(
       key: controller.scaffoldKey,
       drawer: ResponsiveWidget(
         responsiveUtils: _responsiveUtils,
         mobile: SizedBox(child: MailboxView(), width: double.infinity),
-        landscapeMobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
+        landscapeMobile: SizedBox(
-        tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
+            child: MailboxView(),
-        tabletLarge: const SizedBox.shrink(),
+            width: ResponsiveUtils.defaultSizeDrawer),
-        desktop: const SizedBox.shrink(),
+        tablet: SizedBox(
-      ),
+            child: MailboxView(),
-      drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context)
+            width: ResponsiveUtils.defaultSizeDrawer),
-          || _responsiveUtils.isLandscapeMobile(context)
+        landscapeTablet: SizedBox(
-          || _responsiveUtils.isTablet(context),
+            child: MailboxView(),
+            width: ResponsiveUtils.defaultSizeLeftMenuMobile),
+        tabletLarge: SizedBox(
+            child: MailboxView(),
+            width: ResponsiveUtils.defaultSizeLeftMenuMobile),
+        desktop: SizedBox(
+            child: MailboxView(),
+            width: ResponsiveUtils.defaultSizeLeftMenuMobile)),
+      drawerEnableOpenDragGesture: _responsiveUtils.hasLeftMenuDrawerActive(context),
       body: Stack(children: [
-        ResponsiveWidget(
+        Obx(() {
-          responsiveUtils: _responsiveUtils,
+          switch(controller.routePath.value) {
-          desktop: _buildLargeScreenView(context),
+            case AppRoutes.THREAD:
-          tabletLarge: _buildLargeScreenView(context),
+              return ResponsiveWidget(
-          tablet: ThreadView(),
+                  responsiveUtils: _responsiveUtils,
-          landscapeMobile: ThreadView(),
+                  desktop: bodyLandscapeTablet,
-          mobile: ThreadView(),
+                  tabletLarge: bodyLandscapeTablet,
-        ),
+                  landscapeTablet: bodyLandscapeTablet,
-        Obx(() => controller.composerOverlayState.value == ComposerOverlayState.active
+                  mobile: ThreadView());
-          ? ComposerView()
+            case AppRoutes.EMAIL:
-          : const SizedBox.shrink()),
+              return ResponsiveWidget(
-        Obx(() => controller.isNetworkConnectionAvailable()
+                  responsiveUtils: _responsiveUtils,
-          ? const SizedBox.shrink()
+                  desktop: bodyLandscapeTablet,
-          : Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))),
+                  tabletLarge: bodyLandscapeTablet,
+                  landscapeTablet: bodyLandscapeTablet,
+                  mobile: EmailView());
+            default:
+              return ResponsiveWidget(
+                  responsiveUtils: _responsiveUtils,
+                  desktop: bodyLandscapeTablet,
+                  tabletLarge: bodyLandscapeTablet,
+                  landscapeTablet: bodyLandscapeTablet,
+                  mobile: ThreadView());
+          }
+        }),
+        Obx(() {
+          if (controller.isNetworkConnectionAvailable()) {
+            return const SizedBox.shrink();
+          }
+          return Align(
+              alignment: Alignment.bottomCenter,
+              child: buildNetworkConnectionWidget(context));
+        }),
       ]),
     );
   }
-
-  Widget _wrapContainerForThreadAndEmail(BuildContext context) {
-    switch(AppSetting.readingPane) {
-      case ReadingPane.noSplit:
-        return Obx(() {
-          switch(controller.routePath.value) {
-            case AppRoutes.THREAD:
-              return ThreadView();
-            case AppRoutes.EMAIL:
-              return EmailView();
-            default:
-              return const SizedBox.shrink();
-          }
-        });
-      case ReadingPane.rightOfInbox:
-        if (_responsiveUtils.isDesktop(context)) {
-          return Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Expanded(flex: 1, child: ThreadView()),
-              Expanded(flex: 2, child: EmailView()),
-            ],
-          );
-        } else {
-          return Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Expanded(flex: 1, child: ThreadView()),
-              Expanded(flex: 1, child: EmailView()),
-            ],
-          );
-        }
-      default:
-        return const SizedBox.shrink();
-    }
-  }
-
-  Widget _buildLargeScreenView(BuildContext context) {
-    if (controller.isDrawerOpen && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context))) {
-      WidgetsBinding.instance.addPostFrameCallback((_) {
-        controller.closeMailboxMenuDrawer();
-      });
-    }
-
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
-        Expanded(child: _wrapContainerForThreadAndEmail(context))
-      ],
-    );
-  }
 }

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -46,8 +46,8 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
       backgroundColor: Colors.white,
       drawer: ResponsiveWidget(
           responsiveUtils: responsiveUtils,
-          mobile: SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer),
+          mobile: SizedBox(child: MailboxView(), width: ResponsiveUtils.defaultSizeDrawer),
-          tablet: SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer),
+          tablet: SizedBox(child: MailboxView(), width: ResponsiveUtils.defaultSizeDrawer),
           tabletLarge: const SizedBox.shrink(),
           desktop: const SizedBox.shrink(),
       ),

lib/features/manage_account/presentation/manage_account_dashboard_view.dart

@@ -32,7 +32,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
       backgroundColor: Colors.white,
       drawer: ResponsiveWidget(
           responsiveUtils: _responsiveUtils,
-          mobile: SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeDrawer),
+          mobile: SizedBox(child: ManageAccountMenuView(), width: ResponsiveUtils.defaultSizeDrawer),
           desktop: const SizedBox.shrink()
       ),
       drawerEnableOpenDragGesture: !_responsiveUtils.isDesktop(context),

lib/features/thread/presentation/thread_controller.dart

@@ -459,11 +459,7 @@ class ThreadController extends BaseController {
 
   void previewEmail(BuildContext context, PresentationEmail presentationEmailSelected) {
     mailboxDashBoardController.setSelectedEmail(presentationEmailSelected);
-    if (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) {
+    mailboxDashBoardController.dispatchRoute(AppRoutes.EMAIL);
-      mailboxDashBoardController.dispatchRoute(AppRoutes.EMAIL);
-    } else {
-      goToEmail(context);
-    }
   }
 
   void selectEmail(BuildContext context, PresentationEmail presentationEmailSelected) {
@@ -1255,10 +1251,6 @@ class ThreadController extends BaseController {
     mailboxDashBoardController.openMailboxMenuDrawer();
   }
 
-  void goToEmail(BuildContext context) {
-    push(AppRoutes.EMAIL);
-  }
-
   void editEmail(PresentationEmail presentationEmail) {
     final arguments = ComposerArguments(
         emailActionType: EmailActionType.edit,

lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart

@@ -362,12 +362,12 @@ class AppBarThreadWidgetBuilder {
       children: [
         InkWell(
           onTap: () {
-            if (_responsiveUtils.isSmallScreen(_context)) {
+            if (_responsiveUtils.hasLeftMenuDrawerActive(_context)) {
               _onOpenMailboxMenuActionClick?.call();
             }
           },
           child: Padding(
-            padding: (_responsiveUtils.isSmallScreen(_context))
+            padding: (_responsiveUtils.hasLeftMenuDrawerActive(_context))
                 ? EdgeInsets.zero
                 : const EdgeInsets.only(bottom: 8, top: 8),
             child: Container(
@@ -383,7 +383,7 @@ class AppBarThreadWidgetBuilder {
                     color: AppColor.colorNameEmail,
                     fontWeight: FontWeight.w700))
             ))),
-        if (_responsiveUtils.isSmallScreen(_context))
+        if (_responsiveUtils.hasLeftMenuDrawerActive(_context))
           Transform(
             transform: Matrix4.translationValues(-8.0, 0.0, 0.0),
             child: IconButton(

lib/features/thread/presentation/widgets/bottom_bar_thread_selection_widget.dart

@@ -46,7 +46,7 @@ class BottomBarThreadSelectionWidget {
       children: [
         Expanded(child: (ButtonBuilder(_listSelectionEmail.isAllEmailRead ? _imagePaths.icUnread : _imagePaths.icRead)
             ..key(const Key('button_mark_read_email'))
-            ..paddingIcon(const EdgeInsets.all(8))
+            ..paddingIcon(const EdgeInsets.symmetric(horizontal: 8, vertical: 4))
             ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
             ..onPressActionClick(() {
               if (_onPressEmailSelectionActionClick != null) {
@@ -54,13 +54,11 @@ class BottomBarThreadSelectionWidget {
                     _listSelectionEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
                     _listSelectionEmail);
               }})
-            ..text(
+            ..text(_textButtonMarkAsRead, isVertical: _responsiveUtils.isMobile(_context)))
-                _listSelectionEmail.isAllEmailRead ? AppLocalizations.of(_context).unread : AppLocalizations.of(_context).read,
-                isVertical: _responsiveUtils.isMobile(_context)))
           .build()),
         Expanded(child: (ButtonBuilder(_listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar)
             ..key(const Key('button_mark_as_star_email'))
-            ..paddingIcon(const EdgeInsets.all(8))
+            ..paddingIcon(const EdgeInsets.symmetric(horizontal: 8, vertical: 4))
             ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
             ..onPressActionClick(() {
               if (_onPressEmailSelectionActionClick != null) {
@@ -68,24 +66,23 @@ class BottomBarThreadSelectionWidget {
                     _listSelectionEmail.isAllEmailStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred,
                     _listSelectionEmail);
               }})
-            ..text(_listSelectionEmail.isAllEmailStarred ? AppLocalizations.of(_context).un_star : AppLocalizations.of(_context).star,
+            ..text(_textButtonMarkAsStar, isVertical: _responsiveUtils.isMobile(_context)))
-                isVertical: _responsiveUtils.isMobile(_context)))
           .build()),
         if (_currentMailbox?.isDrafts == false)
           Expanded(child: (ButtonBuilder(_imagePaths.icMove)
               ..key(const Key('button_move_to_mailbox'))
-              ..paddingIcon(const EdgeInsets.all(8))
+              ..paddingIcon(const EdgeInsets.symmetric(horizontal: 8, vertical: 4))
               ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
               ..onPressActionClick(() {
                 if (_onPressEmailSelectionActionClick != null) {
                   _onPressEmailSelectionActionClick!(EmailActionType.moveToMailbox, _listSelectionEmail);
                 }})
-              ..text(AppLocalizations.of(_context).move, isVertical: _responsiveUtils.isMobile(_context)))
+              ..text(_textButtonMove, isVertical: _responsiveUtils.isMobile(_context)))
             .build()),
         if (_currentMailbox?.isDrafts == false)
           Expanded(child: (ButtonBuilder(_currentMailbox?.isSpam == true ? _imagePaths.icNotSpam : _imagePaths.icSpam)
               ..key(const Key('button_move_to_spam'))
-              ..paddingIcon(const EdgeInsets.all(8))
+              ..paddingIcon(const EdgeInsets.symmetric(horizontal: 8, vertical: 4))
               ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
               ..onPressActionClick(() {
                 if (_currentMailbox?.isSpam == true) {
@@ -94,14 +91,11 @@ class BottomBarThreadSelectionWidget {
                   _onPressEmailSelectionActionClick?.call(EmailActionType.moveToSpam, _listSelectionEmail);
                 }
               })
-              ..text(_currentMailbox?.isSpam == true
+              ..text(_textButtonSpam, isVertical: _responsiveUtils.isMobile(_context)))
-                    ? AppLocalizations.of(_context).un_spam
-                    : AppLocalizations.of(_context).spam,
-                  isVertical: _responsiveUtils.isMobile(_context)))
             .build()),
         Expanded(child: (ButtonBuilder(_imagePaths.icDelete)
             ..key(const Key('button_delete_email'))
-            ..paddingIcon(const EdgeInsets.all(8))
+            ..paddingIcon(const EdgeInsets.symmetric(horizontal: 8, vertical: 4))
             ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
             ..onPressActionClick(() {
               if (_currentMailbox?.isTrash == true) {
@@ -110,9 +104,60 @@ class BottomBarThreadSelectionWidget {
                 _onPressEmailSelectionActionClick?.call(EmailActionType.moveToTrash, _listSelectionEmail);
               }
             })
-            ..text(AppLocalizations.of(_context).delete, isVertical: _responsiveUtils.isMobile(_context)))
+            ..text(_textButtonDelete, isVertical: _responsiveUtils.isMobile(_context)))
           .build())
       ]
     );
   }
+
+  String? get _textButtonMarkAsRead {
+    if (!_isMailboxDashboardSplitView(_context)) {
+      return _listSelectionEmail.isAllEmailRead
+          ? AppLocalizations.of(_context).unread
+          : AppLocalizations.of(_context).read;
+    }
+    return null;
+  }
+
+  String? get _textButtonMarkAsStar {
+    if (!_isMailboxDashboardSplitView(_context)) {
+      return _listSelectionEmail.isAllEmailStarred
+          ? AppLocalizations.of(_context).un_star
+          : AppLocalizations.of(_context).star;
+    }
+    return null;
+  }
+
+  String? get _textButtonMove {
+    if (!_isMailboxDashboardSplitView(_context)) {
+      return AppLocalizations.of(_context).move;
+    }
+    return null;
+  }
+
+  String? get _textButtonSpam {
+    if (!_isMailboxDashboardSplitView(_context)) {
+      return _currentMailbox?.isSpam == true
+          ? AppLocalizations.of(_context).un_spam
+          : AppLocalizations.of(_context).spam;
+    }
+    return null;
+  }
+
+  String? get _textButtonDelete {
+    if (!_isMailboxDashboardSplitView(_context)) {
+      return AppLocalizations.of(_context).delete;
+    }
+    return null;
+  }
+
+  bool _isMailboxDashboardSplitView(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      return _responsiveUtils.isTabletLarge(context);
+    } else {
+      return _responsiveUtils.isLandscapeTablet(context) ||
+          _responsiveUtils.isTabletLarge(context) ||
+          _responsiveUtils.isDesktop(context);
+    }
+  }
 }