TF-682 Standardize layout of Mailbox Dashboard on web

core/lib/presentation/utils/responsive_utils.dart

@@ -84,8 +84,8 @@ class ResponsiveUtils {
 
   bool hasLeftMenuDrawerActive(BuildContext context) {
     if (BuildUtils.isWeb) {
-      return isMobile(context) &&
+      return isMobile(context) ||
-          isTablet(context) &&
+          isTablet(context) ||
           isTabletLarge(context);
     } else {
       return true;
@@ -94,4 +94,26 @@ class ResponsiveUtils {
 
   bool isWebDesktop(BuildContext context) =>
       BuildUtils.isWeb && isDesktop(context);
+
+  bool mailboxDashboardHasMailboxAndEmailView(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      return isDesktop(context) ||
+          isMobile(context) ||
+          isTablet(context);
+    } else {
+      return isPortraitMobile(context) ||
+          isLandscapeMobile(context) ||
+          isTablet(context);
+    }
+  }
+
+  bool mailboxDashboardOnlyHasEmailView(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      return isMobile(context) || isTablet(context);
+    } else {
+      return isPortraitMobile(context) ||
+          isLandscapeMobile(context) ||
+          isTablet(context);
+    }
+  }
 }

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

@@ -122,6 +122,7 @@ class ButtonBuilder {
     if (_text != null) {
       return _isVertical!
         ? Column(
+            mainAxisSize: MainAxisSize.min,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               _buildIcon(),
@@ -129,6 +130,7 @@ class ButtonBuilder {
               if (_iconAction != null) _iconAction!
             ])
         : Row(
+            mainAxisSize: MainAxisSize.min,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               _buildIcon(),
@@ -148,7 +150,7 @@ class ButtonBuilder {
     return Text(
       '${_text ?? ''}',
       maxLines: 1,
-      overflow: TextOverflow.ellipsis,
+      overflow: CommonTextStyle.defaultTextOverFlow,
       style: _textStyle ?? TextStyle(fontSize: 12, color: AppColor.colorTextButton),
     );
   }

core/lib/presentation/views/responsive/responsive_widget.dart

@@ -26,30 +26,51 @@ class ResponsiveWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     log('ResponsiveWidget::build(): WIDTH_SIZE: ${responsiveUtils.getDeviceWidth(context)}');
 
-    if (responsiveUtils.isLandscapeMobile(context)) {
+    if (BuildUtils.isWeb) {
-      return landscapeMobile ?? mobile;
-    }
 
-    if (responsiveUtils.isLandscapeTablet(context)) {
+      if (responsiveUtils.isMobile(context)) {
-      return landscapeTablet ?? tablet ?? mobile;
+        return tablet ?? mobile;
-    }
+      }
 
-    if (responsiveUtils.isMobile(context)) {
+      if (responsiveUtils.isTablet(context)) {
-      return tablet ?? mobile;
+        return tablet ?? mobile;
-    }
+      }
 
-    if (responsiveUtils.isTablet(context)) {
+      if (responsiveUtils.isTabletLarge(context)) {
-      return tablet ?? mobile;
+        return tabletLarge ?? tablet ?? mobile;
-    }
+      }
 
-    if (responsiveUtils.isTabletLarge(context)) {
+      if (responsiveUtils.isDesktop(context)) {
-      return tabletLarge ?? tablet ?? mobile;
+        return desktop ?? tablet ?? mobile;
-    }
+      }
 
-    if (responsiveUtils.isDesktop(context)) {
+      return mobile;
-      return desktop ?? tablet ?? mobile;
+    } else {
-    }
+      if (responsiveUtils.isLandscapeMobile(context)) {
+        return landscapeMobile ?? mobile;
+      }
 
-    return mobile;
+      if (responsiveUtils.isLandscapeTablet(context)) {
+        return landscapeTablet ?? tablet ?? mobile;
+      }
+
+      if (responsiveUtils.isMobile(context)) {
+        return tablet ?? mobile;
+      }
+
+      if (responsiveUtils.isTablet(context)) {
+        return tablet ?? mobile;
+      }
+
+      if (responsiveUtils.isTabletLarge(context)) {
+        return tabletLarge ?? tablet ?? mobile;
+      }
+
+      if (responsiveUtils.isDesktop(context)) {
+        return desktop ?? tablet ?? mobile;
+      }
+
+      return mobile;
+    }
   }
 }

lib/features/email/presentation/email_view.dart

@@ -122,11 +122,11 @@ class EmailView extends GetWidget<EmailController> with NetworkConnectionMixin {
   }
 
   Widget _buildBottomBar(BuildContext context) {
-    bool isMobileDevice = responsiveUtils.isPortraitMobile(context) &&
+    bool isMobileDevice = responsiveUtils.isPortraitMobile(context) ||
         responsiveUtils.isLandscapeMobile(context);
     return Padding(
       padding: EdgeInsets.only(
-          bottom: !BuildUtils.isWeb && isMobileDevice ? 16 : 0),
+          bottom: isMobileDevice ? 16 : 0),
       child: Obx(() => (BottomBarMailWidgetBuilder(
               context,
               imagePaths,

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

@@ -51,9 +51,9 @@ class AppBarMailWidgetBuilder {
         child: Row(
           mainAxisAlignment: MainAxisAlignment.end,
           children: [
-            if (_mailboxDashboardOnlyHasEmailView(_context))
+            if (_responsiveUtils.mailboxDashboardHasMailboxAndEmailView(_context))
               _buildBackButton(),
-            if (_mailboxDashboardOnlyHasEmailView(_context))
+            if (_responsiveUtils.mailboxDashboardHasMailboxAndEmailView(_context))
               Expanded(child: _buildMailboxName()),
             if (_presentationEmail != null) _buildListOptionButton(),
           ]
@@ -62,16 +62,6 @@ class AppBarMailWidgetBuilder {
     );
   }
 
-  bool _mailboxDashboardOnlyHasEmailView(BuildContext context) {
-    if (BuildUtils.isWeb) {
-      return _responsiveUtils.isDesktop(context);
-    } else {
-      return _responsiveUtils.isPortraitMobile(context) || 
-        _responsiveUtils.isLandscapeMobile(context) ||
-        _responsiveUtils.isTablet(context);
-    }
-  }
-
   Widget _buildBackButton() {
     return buildIconWeb(
         icon: SvgPicture.asset(_imagePaths.icBack, width: 18, height: 18, color: AppColor.colorTextButton, fit: BoxFit.fill),

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

@@ -7,6 +7,8 @@ typedef OnPressEmailActionClick = void Function(EmailActionType emailActionType)
 
 class BottomBarMailWidgetBuilder {
 
+  static const double maxWidthBottomBar = 540;
+
   final BuildContext _context;
   final ImagePaths _imagePaths;
   final ResponsiveUtils _responsiveUtils;
@@ -32,7 +34,9 @@ class BottomBarMailWidgetBuilder {
       color: Colors.white,
       child: MediaQuery(
         data: const MediaQueryData(padding: EdgeInsets.zero),
-        child: _presentationEmail != null ? _buildListOptionButton(_presentationEmail!) : const SizedBox.shrink()
+        child: _presentationEmail != null
+            ? _buildListOptionButton(_presentationEmail!)
+            : const SizedBox.shrink()
       )
     );
   }
@@ -91,7 +95,7 @@ class BottomBarMailWidgetBuilder {
                 }})
               ..text(AppLocalizations.of(_context).forward, isVertical: _responsiveUtils.isMobile(_context)))
             .build()),
-        if (!_responsiveUtils.isDesktop(_context))
+        if (_responsiveUtils.mailboxDashboardOnlyHasEmailView(_context))
           Expanded(child: (ButtonBuilder(_imagePaths.icNewMessage)
               ..key(const Key('button_new_message'))
               ..size(20)

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -18,8 +18,6 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/ad
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/email_quick_search_item_tile_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/recent_search_item_tile_widget.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/domain/model/filter_message_option.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_view.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -34,8 +32,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
 
   @override
   Widget build(BuildContext context) {
-    if (controller.isDrawerOpen && (responsiveUtils.isDesktop(context)
+    if (controller.isDrawerOpen && responsiveUtils.isDesktop(context)) {
-        || responsiveUtils.isTabletLarge(context))) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         controller.closeMailboxMenuDrawer();
       });
@@ -48,10 +45,9 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
           responsiveUtils: responsiveUtils,
           mobile: SizedBox(child: MailboxView(), width: ResponsiveUtils.defaultSizeDrawer),
           tablet: SizedBox(child: MailboxView(), width: ResponsiveUtils.defaultSizeDrawer),
-          tabletLarge: const SizedBox.shrink(),
+          tabletLarge: SizedBox(child: MailboxView(), width: ResponsiveUtils.defaultSizeLeftMenuMobile),
-          desktop: const SizedBox.shrink(),
+          desktop: const SizedBox.shrink()),
-      ),
+      drawerEnableOpenDragGesture: !responsiveUtils.isDesktop(context),
-      drawerEnableOpenDragGesture: responsiveUtils.isMobile(context) || responsiveUtils.isTablet(context),
       body: Portal(
         child: Stack(children: [
           ResponsiveWidget(
@@ -97,7 +93,16 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                       SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu),
                       Expanded(child: Column(children: [
                         _buildMarkAsMailboxReadLoading(context),
-                        Expanded(child: _wrapContainerForThreadAndEmail(context))
+                        Expanded(child: Obx(() {
+                          switch(controller.routePath.value) {
+                            case AppRoutes.THREAD:
+                              return ThreadView();
+                            case AppRoutes.EMAIL:
+                              return EmailView();
+                            default:
+                              return const SizedBox.shrink();
+                          }
+                        }))
                       ]))
                     ],
                   ))
@@ -106,60 +111,40 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
               tabletLarge: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu),
+                  SizedBox(
-                  Expanded(child: _wrapContainerForThreadAndEmail(context))
+                      width: ResponsiveUtils.defaultSizeLeftMenuMobile,
+                      child: ThreadView()),
+                  Expanded(child: EmailView()),
                 ],
               ),
-              tablet: ThreadView(),
+              mobile: Obx(() {
-              mobile: ThreadView(),
+                switch(controller.routePath.value) {
+                  case AppRoutes.THREAD:
+                    return ThreadView();
+                  case AppRoutes.EMAIL:
+                    return EmailView();
+                  default:
+                    return ThreadView();
+                }
+              }),
           ),
           Obx(() => controller.composerOverlayState.value == ComposerOverlayState.active
               ? ComposerView()
               : const SizedBox.shrink()),
-          Obx(() => controller.isNetworkConnectionAvailable()
+          Obx(() {
-              ? const SizedBox.shrink()
+            if (controller.isNetworkConnectionAvailable()) {
-              : Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))),
+              return const SizedBox.shrink();
+            } else {
+              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 _buildRightHeader(BuildContext context) {
     return Row(children: [
       Obx(() {

lib/features/manage_account/presentation/model/app_setting.dart

@@ -1,6 +0,0 @@
-
-import 'package:tmail_ui_user/features/manage_account/presentation/model/reading_pane.dart';
-
-class AppSetting {
-  static ReadingPane readingPane = ReadingPane.noSplit;
-}

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

@@ -88,8 +88,10 @@ class AppBarThreadWidgetBuilder {
 
   Widget _buildBodyAppBarForWeb() {
     return Row(children: [
-      if (!_responsiveUtils.isTabletLarge(_context)) _buildMenuButton(),
+      if (_responsiveUtils.hasLeftMenuDrawerActive(_context))
-      if (_responsiveUtils.isTabletLarge(_context)) const SizedBox(width: 16),
+        _buildMenuButton(),
+      if (_responsiveUtils.hasLeftMenuDrawerActive(_context))
+        const SizedBox(width: 16),
       Expanded(child: Text(
           _currentMailbox?.name?.name.capitalizeFirstEach ?? '',
           maxLines: 1,