TF-381 Apply new UI for MailboxView in browser

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

@@ -23,6 +23,7 @@ class ButtonBuilder {
   BoxDecoration? _decoration;
   Widget? _iconAction;
   double? _radiusSplash;
+  double? _maxWidth;
   EdgeInsets? _padding;
 
   void key(Key key) {
@@ -37,6 +38,10 @@ class ButtonBuilder {
     _size = size;
   }
 
+  void maxWidth(double? size) {
+    _maxWidth = size;
+  }
+
   void iconColor(Color color) {
     _iconColor = color;
   }
@@ -106,6 +111,7 @@ class ButtonBuilder {
         alignment: Alignment.center,
         color: _decoration == null ? _colorButton ?? Colors.white : null,
         decoration: _decoration,
+        width: _maxWidth,
         padding: _padding ?? EdgeInsets.zero,
         child: _buildBody()
       )

core/lib/presentation/views/search/search_bar_view.dart

@@ -75,11 +75,12 @@ class SearchBarView {
 
  Widget _buildSearchButton() {
    return Material(
-     borderRadius: BorderRadius.circular(12),
      color: Colors.transparent,
+     shape: CircleBorder(),
      child: Padding(
        padding: EdgeInsets.only(left: 2),
        child: IconButton(
+         splashRadius: 20,
          icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill),
          onPressed: () => _onOpenSearchViewAction?.call()
        )

lib/features/mailbox/presentation/mailbox_view.dart

@@ -1,4 +1,5 @@
 import 'package:core/core.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -34,12 +35,13 @@ class MailboxView extends GetWidget<MailboxController> {
                 topLeft: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0)),
             child: Drawer(
                 child: Scaffold(
-                  backgroundColor: Colors.white,
+                  backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
                   body: Column(
                       children: [
                         if (_responsiveUtils.isDesktop(context))
-                          Padding(
+                          Container(
-                            padding: EdgeInsets.only(left: 20, top: 30),
+                            color: Colors.white,
+                            padding: EdgeInsets.only(left: 20, top: 20, bottom: 24),
                             child: (SloganBuilder(arrangedByHorizontal: true)
                                 ..setSloganText(AppLocalizations.of(context).app_name)
                                 ..setSloganTextAlign(TextAlign.center)
@@ -47,10 +49,55 @@ class MailboxView extends GetWidget<MailboxController> {
                                 ..setSizeLogo(28)
                                 ..setLogo(_imagePaths.icLogoTMail))
                               .build()),
-                        _buildHeaderMailbox(context),
+                        if (!_responsiveUtils.isDesktop(context)) _buildHeaderMailbox(context),
+                        if (_responsiveUtils.isDesktop(context))
+                          Row(children: [
+                            Expanded(child: Container(
+                                padding: EdgeInsets.only(top: 16, left: 20),
+                                color: AppColor.colorBgDesktop,
+                                alignment: Alignment.centerLeft,
+                                child: (ButtonBuilder(_imagePaths.icCompose)
+                                      ..key(Key('button_compose_email'))
+                                      ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(25), color: AppColor.colorTextButton))
+                                      ..paddingIcon(EdgeInsets.only(right: 8))
+                                      ..iconColor(Colors.white)
+                                      ..maxWidth(140)
+                                      ..size(20)
+                                      ..radiusSplash(10)
+                                      ..padding(EdgeInsets.symmetric(vertical: 13))
+                                      ..textStyle(TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w500))
+                                      ..onPressActionClick(() => controller.mailboxDashBoardController.composeEmailAction())
+                                      ..text(AppLocalizations.of(context).compose, isVertical: false))
+                                    .build())
+                            ),
+                            Obx(() {
+                              if (controller.isSearchActive()) {
+                                return controller.listMailboxSearched.isNotEmpty
+                                    ? Padding(
+                                        padding: EdgeInsets.only(top: 16),
+                                        child: _buildEditMailboxButton(context, controller.isSelectionEnabled()))
+                                    : SizedBox.shrink();
+                              } else {
+                                return Padding(
+                                  padding: EdgeInsets.only(top: 16),
+                                  child: _buildEditMailboxButton(context, controller.isSelectionEnabled()));
+                              }
+                            })
+                          ]),
+                        Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context)
+                            ? Row(children: [
+                                Expanded(child: _buildSearchBarWidget(context)),
+                                buildIconWeb(
+                                    icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill),
+                                    tooltip: AppLocalizations.of(context).new_mailbox,
+                                    onTap: () => controller.goToCreateNewMailboxView()),
+                              ])
+                            : SizedBox.shrink()),
                         Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()),
                         Expanded(child: Obx(() => Container(
-                          color: controller.isSearchActive() ? Colors.white : AppColor.colorBgMailbox,
+                          color: _responsiveUtils.isDesktop(context)
+                            ? Colors.transparent
+                            : controller.isSearchActive() ? Colors.white : AppColor.colorBgMailbox,
                           child: RefreshIndicator(
                               color: AppColor.primaryColor,
                               onRefresh: () async => controller.refreshAllMailbox(),
@@ -59,10 +106,7 @@ class MailboxView extends GetWidget<MailboxController> {
                                   : _buildListMailbox(context)),
                         ))),
                         Obx(() => controller.isSelectionEnabled()
-                            ? Column(children: [
+                            ? _buildOptionSelectionMailbox(context)
-                          Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
-                          _buildOptionSelectionBottomBar(context)
-                        ])
                             : SizedBox.shrink()),
                       ]
                   ),
@@ -82,7 +126,9 @@ class MailboxView extends GetWidget<MailboxController> {
               top: _responsiveUtils.isMobile(context) ? 14 : 30,
               bottom: 10),
           child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
-            !_responsiveUtils.isDesktop(context) ? _buildCloseScreenButton(context) : SizedBox(width: 50),
+            !_responsiveUtils.isDesktop(context) && !_responsiveUtils.isTabletLarge(context)
+                ? _buildCloseScreenButton(context)
+                : SizedBox(width: 50),
             Obx(() {
               if (controller.isSearchActive()) {
                 return controller.listMailboxSearched.isNotEmpty
@@ -132,7 +178,7 @@ class MailboxView extends GetWidget<MailboxController> {
 
   Widget _buildEditMailboxButton(BuildContext context, bool isSelectionEnabled) {
     return Material(
-        borderRadius: BorderRadius.circular(20),
+        shape: CircleBorder(),
         color: Colors.transparent,
         child: TextButton(
             child: Text(
@@ -158,7 +204,7 @@ class MailboxView extends GetWidget<MailboxController> {
 
   Widget _buildSearchBarWidget(BuildContext context) {
     return Padding(
-      padding: EdgeInsets.only(top: 12, bottom: 16, left: 16, right: 16),
+      padding: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 12, bottom: 16, left: 16, right: 16),
       child: (SearchBarView(_imagePaths)
           ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
           ..addOnOpenSearchViewAction(() => controller.enableSearch()))
@@ -174,7 +220,7 @@ class MailboxView extends GetWidget<MailboxController> {
             child: SizedBox(
               width: 24,
               height: 24,
-              child: CircularProgressIndicator(color: AppColor.primaryColor))))
+              child: CupertinoActivityIndicator(color: AppColor.colorTextButton))))
         : SizedBox.shrink()));
   }
 
@@ -186,12 +232,10 @@ class MailboxView extends GetWidget<MailboxController> {
       padding: EdgeInsets.zero,
       children: [
         Obx(() => (controller.isSelectionEnabled() && _responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context))
-            ? SizedBox.shrink()
+            || _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildUserInformationWidget(context)),
-            : _buildUserInformationWidget(context)),
         Obx(() => (controller.isSelectionEnabled() && _responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context))
-            ? SizedBox.shrink()
+            || _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildLineSpaceUserInformation()),
-            : _buildLineSpaceUserInformation()),
+        if (!_responsiveUtils.isDesktop(context)) _buildSearchBarWidget(context),
-        _buildSearchBarWidget(context),
         _buildLoadingView(),
         Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
           ? Container(
@@ -201,13 +245,14 @@ class MailboxView extends GetWidget<MailboxController> {
               margin: EdgeInsets.only(left: 16, right: 16, top: 4),
               child: _buildDefaultMailbox(context))
           : SizedBox.shrink()),
-        Padding(
+        Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
-          padding: EdgeInsets.only(left: 25, top: 26, bottom: 12),
+           ? Padding(
-          child: Text(
+              padding: EdgeInsets.only(left: 25, top: 26, bottom: 12),
-            AppLocalizations.of(context).folders,
+              child: Text(
-            maxLines: 1,
+                AppLocalizations.of(context).folders,
-            style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
+                maxLines: 1,
-        ),
+                style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)))
+          : SizedBox.shrink()),
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(14),
@@ -321,30 +366,32 @@ class MailboxView extends GetWidget<MailboxController> {
     return Padding(
         padding: EdgeInsets.only(left: 5),
         child: Material(
-            borderRadius: BorderRadius.circular(12),
+            shape: CircleBorder(),
             color: Colors.transparent,
             child: IconButton(
+                splashRadius: 20,
                 color: AppColor.colorTextButton,
-                icon: SvgPicture.asset(
+                icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill),
-                    _imagePaths.icBack,
-                    width: 20,
-                    height: 20,
-                    color: AppColor.colorTextButton,
-                    fit: BoxFit.fill),
                 onPressed: () => controller.disableSearch(context)
             )
         ));
   }
 
   Widget _buildListMailboxSearched(BuildContext context, List<PresentationMailbox> listMailbox) {
-    return ListView.builder(
+    return Container(
-        padding: EdgeInsets.only(left: 16, right: 8, bottom: 30),
+        margin: _responsiveUtils.isDesktop(context)
-        key: Key('list_mailbox_searched'),
+            ? EdgeInsets.only(left: 16, right: 16)
-        itemCount: listMailbox.length,
+            : EdgeInsets.zero,
-        shrinkWrap: true,
+        decoration: _responsiveUtils.isDesktop(context)
-        primary: false,
+          ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white)
-        itemBuilder: (context, index) =>
+          : null,
-            Obx(() => (MailboxTileBuilder(
+        child: ListView.builder(
+            padding: EdgeInsets.only(left: 16, right: 8),
+            key: Key('list_mailbox_searched'),
+            itemCount: listMailbox.length,
+            shrinkWrap: true,
+            primary: false,
+            itemBuilder: (context, index) => Obx(() => (MailboxTileBuilder(
                     _imagePaths,
                     listMailbox[index],
                     isSearchActive: controller.isSearchActive(),
@@ -352,19 +399,33 @@ class MailboxView extends GetWidget<MailboxController> {
                     isLastElement: index == listMailbox.length - 1)
                 ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox))
                 ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailbox(context, mailbox)))
-              .build()));
+              .build()))
-  }
-
-  Widget _buildOptionSelectionBottomBar(BuildContext context) {
-    return Padding(
-        padding: EdgeInsets.only(bottom: 30, top: 5),
-        child: (BottomBarSelectionMailboxWidget(
-              context,
-              _imagePaths,
-              controller.listMailboxSelected)
-            ..addOnMailboxActionsClick((actions, listMailboxSelected) =>
-                controller.pressMailboxSelectionAction(context, actions, listMailboxSelected)))
-          .build()
     );
   }
+
+  Widget _buildOptionSelectionMailbox(BuildContext context) {
+    if (_responsiveUtils.isDesktop(context)) {
+      return Container(
+        decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(16),
+            boxShadow: [BoxShadow(color: AppColor.colorEmailAddressTag, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))],
+            color: Colors.white),
+        margin: EdgeInsets.only(left: 10, bottom: 10, right: 10),
+        padding: EdgeInsets.all(8),
+        child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected)
+            ..addOnMailboxActionsClick((actions, listMailboxSelected) => controller.pressMailboxSelectionAction(context, actions, listMailboxSelected)))
+          .build(),
+      );
+    } else {
+      return Column(children: [
+        Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
+        Padding(
+          padding: EdgeInsets.only(bottom: 30, top: 5),
+          child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected)
+              ..addOnMailboxActionsClick((actions, listMailboxSelected) => controller.pressMailboxSelectionAction(context, actions, listMailboxSelected)))
+            .build()
+        )
+      ]);
+    }
+  }
 }

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart

@@ -15,6 +15,7 @@ import 'package:tmail_ui_user/features/composer/domain/state/update_email_drafts
 import 'package:tmail_ui_user/features/composer/presentation/composer_bindings.dart';
 import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_controller.dart';
+import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/get_user_profile_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/remove_email_drafts_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart';
@@ -263,6 +264,16 @@ class MailboxDashBoardController extends ReloadableController {
     accountId.value = sessionCurrent?.accounts.keys.first;
   }
 
+  void composeEmailAction() {
+    if (kIsWeb) {
+      if (dashBoardAction != DashBoardAction.compose) {
+        dispatchDashBoardAction(DashBoardAction.compose, arguments: ComposerArguments());
+      }
+    } else {
+      push(AppRoutes.COMPOSER, arguments: ComposerArguments());
+    }
+  }
+
   @override
   void onClose() {
     searchInputController.dispose();

lib/features/thread/presentation/thread_controller.dart

@@ -739,12 +739,6 @@ class ThreadController extends BaseController {
   }
 
   void composeEmailAction() {
-    if (kIsWeb) {
+    mailboxDashBoardController.composeEmailAction();
-      if (mailboxDashBoardController.dashBoardAction != DashBoardAction.compose) {
-        mailboxDashBoardController.dispatchDashBoardAction(DashBoardAction.compose, arguments: ComposerArguments());
-      }
-    } else {
-      push(AppRoutes.COMPOSER, arguments: ComposerArguments());
-    }
   }
 }

lib/features/thread/presentation/thread_view.dart

@@ -143,6 +143,7 @@ class ThreadView extends GetWidget<ThreadController> {
 
   Widget _buildOptionTopBar(BuildContext context) {
     return Row(children: [
+      SizedBox(width: 16),
       (ButtonBuilder(_imagePaths.icRefresh)
           ..key(Key('button_reload_thread'))
           ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorButtonHeaderThread))

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

@@ -108,11 +108,12 @@ class SearchAppBarWidget {
 
  Widget _buildBackButton() {
    return Material(
-     borderRadius: BorderRadius.circular(12),
+     shape: CircleBorder(),
      color: Colors.transparent,
      child: Padding(
        padding: EdgeInsets.only(left: 8),
        child: IconButton(
+         splashRadius: 20,
          color: AppColor.appColor,
          icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.appColor, fit: BoxFit.fill),
          onPressed: () {
@@ -126,9 +127,10 @@ class SearchAppBarWidget {
 
  Widget _buildClearTextSearchButton() {
    return Material(
-     borderRadius: BorderRadius.circular(12),
+       shape: CircleBorder(),
      color: Colors.transparent,
      child: IconButton(
+         splashRadius: 20,
          padding: EdgeInsets.zero,
          icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill),
          onPressed: () {
@@ -163,9 +165,10 @@ class SearchAppBarWidget {
 
  Widget _buildSearchButton() {
    return Material(
-       borderRadius: BorderRadius.circular(12),
+       shape: CircleBorder(),
        color: Colors.transparent,
        child: IconButton(
+           splashRadius: 20,
            icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill),
            onPressed: () => _onSearchTextAction?.call(_searchInputController?.text ?? '')
        )

lib/main/localizations/app_localizations.dart

@@ -527,7 +527,7 @@ class AppLocalizations {
 
   String get hint_search_mailboxes {
     return Intl.message(
-        'Search for mailboxes',
+        'Search mailboxes',
         name: 'hint_search_mailboxes');
   }