TF-1437 Apply new design mailbox list for destination picker

2023-02-14 16:16:15 +07:00
parent f5c4c10072
commit 62286c85cb
7 changed files with 246 additions and 196 deletions
@@ -93,7 +93,6 @@ class MailboxController extends BaseMailboxController with MailboxActionHandlerM
  final SubscribeMultipleMailboxInteractor _subscribeMultipleMailboxInteractor;

  final currentSelectMode = SelectMode.INACTIVE.obs;
-  final mailboxCategoriesExpandMode = MailboxCategoriesExpandMode.initial().obs;

  final _openMailboxEventController = StreamController<OpenMailboxViewEvent>();
  final mailboxListScrollController = ScrollController();
@@ -174,21 +174,10 @@ class MailboxView extends GetWidget<MailboxController>
            ),
            Obx(() {
              if (controller.personalMailboxIsNotEmpty) {
-                return Padding(
-                  padding: const EdgeInsets.only(bottom: 8),
-                  child: Column(
-                    children: [
-                      _buildHeaderMailboxCategory(
-                        context,
-                        MailboxCategories.personalMailboxes
-                      ),
-                      _buildMailboxCategory(
-                        context,
-                        MailboxCategories.personalMailboxes,
-                        controller.personalRootNode
-                      ),
-                    ],
-                  ),
+                return _buildMailboxCategory(
+                  context,
+                  MailboxCategories.personalMailboxes,
+                  controller.personalRootNode
                );
              } else {
                return const SizedBox.shrink();
@@ -196,21 +185,10 @@ class MailboxView extends GetWidget<MailboxController>
            }),
            Obx(() {
              if (controller.teamMailboxesIsNotEmpty) {
-                return Padding(
-                  padding: const EdgeInsets.only(bottom: 8),
-                  child: Column(
-                    children: [
-                      _buildHeaderMailboxCategory(
-                        context,
-                        MailboxCategories.teamMailboxes
-                      ),
-                      _buildMailboxCategory(
-                        context,
-                        MailboxCategories.teamMailboxes,
-                        controller.teamMailboxesRootNode
-                      ),
-                    ]
-                  )
+                return _buildMailboxCategory(
+                  context,
+                  MailboxCategories.teamMailboxes,
+                  controller.teamMailboxesRootNode
                );
              } else {
                return const SizedBox.shrink();
@@ -256,37 +234,11 @@ class MailboxView extends GetWidget<MailboxController>
    );
  }

-  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
-    return Padding(
-        padding: EdgeInsets.only(
-            top: 10,
-            left: _responsiveUtils.isDesktop(context) ? 0 : 16,
-            right: _responsiveUtils.isDesktop(context) ? 0 : 16),
-        child: Row(children: [
-          buildIconWeb(
-              splashRadius: 5,
-              iconPadding: EdgeInsets.zero,
-              minSize: 12,
-              icon: SvgPicture.asset(
-                  categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-                      ? _imagePaths.icExpandFolder
-                      : _imagePaths.icCollapseFolder,
-                  color: AppColor.primaryColor,
-                  fit: BoxFit.fill),
-              tooltip: AppLocalizations.of(context).collapse,
-              onTap: () => controller.toggleMailboxCategories(categories)),
-          Expanded(child: Text(categories.getTitle(context),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(
-                  fontSize: 17,
-                  color: Colors.black,
-                  fontWeight: FontWeight.bold))),
-        ]));
-  }
-
-  Widget _buildBodyMailboxCategory(BuildContext context,
-      MailboxCategories categories, MailboxNode mailboxNode) {
+  Widget _buildBodyMailboxCategory(
+    BuildContext context,
+    MailboxCategories categories,
+    MailboxNode mailboxNode
+  ) {
    final lastNode = mailboxNode.childrenItems?.last;

    return Container(
@@ -301,15 +253,34 @@ class MailboxView extends GetWidget<MailboxController>
                lastNode: lastNode)));
  }

-  Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
+  Widget _buildMailboxCategory(
+    BuildContext context,
+    MailboxCategories categories,
+    MailboxNode mailboxNode
+  ) {
    if (categories == MailboxCategories.exchange) {
      return _buildBodyMailboxCategory(context, categories, mailboxNode);
+    } else {
+      return Column(
+        children: [
+          buildHeaderMailboxCategory(
+            context,
+            _responsiveUtils,
+            _imagePaths,
+            categories,
+            controller,
+            toggleMailboxCategories: controller.toggleMailboxCategories
+          ),
+          AnimatedContainer(
+            duration: const Duration(milliseconds: 400),
+            child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
+              ? _buildBodyMailboxCategory(context, categories, mailboxNode)
+              : const Offstage()
+          ),
+          const SizedBox(height: 8)
+        ],
+      );
    }
-    return AnimatedContainer(
-        duration: const Duration(milliseconds: 400),
-        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-            ? _buildBodyMailboxCategory(context, categories, mailboxNode)
-            : const Offstage());
  }

  List<Widget> _buildListChildTileWidget(
@@ -1,16 +1,24 @@

+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/utils/style_utils.dart';
+import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/utils/build_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:model/mailbox/expand_mode.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/base/base_mailbox_controller.dart';
 import 'package:tmail_ui_user/features/base/widget/popup_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 mixin MailboxWidgetMixin {

@@ -214,4 +222,56 @@ mixin MailboxWidgetMixin {
      )
    );
  }
+
+  Widget buildHeaderMailboxCategory(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils,
+    ImagePaths imagePaths,
+    MailboxCategories categories,
+    BaseMailboxController baseMailboxController,
+    {
+      required Function(MailboxCategories categories) toggleMailboxCategories,
+      EdgeInsets? padding
+    }
+  ) {
+    return Padding(
+      padding: padding ?? EdgeInsets.only(
+        top: 10,
+        left: responsiveUtils.isDesktop(context) ? 0 : 16,
+        right: responsiveUtils.isDesktop(context) ? 0 : 16
+      ),
+      child: Row(children: [
+        Obx(() {
+          final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
+          return buildIconWeb(
+            splashRadius: 5,
+            iconPadding: EdgeInsets.zero,
+            minSize: 12,
+            icon: SvgPicture.asset(
+              expandMode == ExpandMode.EXPAND
+                ? imagePaths.icExpandFolder
+                : imagePaths.icCollapseFolder,
+              color: AppColor.primaryColor,
+              fit: BoxFit.fill
+            ),
+            tooltip: expandMode == ExpandMode.EXPAND
+              ? AppLocalizations.of(context).collapse
+              : AppLocalizations.of(context).expand,
+            onTap: () => toggleMailboxCategories(categories)
+          );
+        }),
+        Expanded(child: Text(
+          categories.getTitle(context),
+          maxLines: 1,
+          overflow: CommonTextStyle.defaultTextOverFlow,
+          softWrap: CommonTextStyle.defaultSoftWrap,
+          style: const TextStyle(
+            fontSize: 17,
+            color: Colors.black,
+            fontWeight: FontWeight.bold
+          )
+        )),
+      ])
+    );
+  }
 }
@@ -118,7 +118,7 @@ class MailBoxFolderTileBuilder {
                          const SizedBox(width: 4),
                          Expanded(child: _buildTitleFolderItem()),
                          const SizedBox(width: 8),
-                          _buildTrailingMailboxItem()
+                          _buildTrailingItemForMailboxView()
                      ])
                  ),
                );
@@ -157,7 +157,7 @@ class MailBoxFolderTileBuilder {
                                Expanded(child: _buildTitleFolderItem()),
                                _buildSelectedIcon(),
                                const SizedBox(width: 8),
-                                _buildTrailingMailboxItem()
+                                _buildTrailingItemForMailboxView()
                            ]),
                          ),
                        ]
@@ -177,9 +177,11 @@ class MailBoxFolderTileBuilder {
            color: Colors.transparent,
            child: InkWell(
              onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
+              customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
+              hoverColor: AppColor.colorMailboxHovered,
              child: Container(
-                  padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
-                  color: mailboxDisplayed == MailboxDisplayed.destinationPicker && _mailboxNode.isSelected
+                  padding: const EdgeInsets.symmetric(vertical: 8),
+                  color: _mailboxNode.isSelected
                    ? AppColor.colorItemSelected
                    : Colors.transparent,
                  child: Row(children: [
@@ -187,8 +189,7 @@ class MailBoxFolderTileBuilder {
                    const SizedBox(width: 8),
                    Expanded(child: _buildTitleFolderItem()),
                    _buildSelectedIcon(),
-                    const SizedBox(width: 8),
-                    _buildTrailingMailboxItem()
+                    const SizedBox(width: 8)
                  ])
              ),
            ),
@@ -199,105 +200,48 @@ class MailBoxFolderTileBuilder {
  }

  Widget _buildLeadingMailboxItem() {
-    if (BuildUtils.isWeb) {
-      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-        return Row(mainAxisSize: MainAxisSize.min, children: [
-          if (_mailboxNode.hasChildren())
-            Row(
-              children: [
-                const SizedBox(width: 8),
-                buildIconWeb(
-                    icon: SvgPicture.asset(
-                        _mailboxNode.expandMode == ExpandMode.EXPAND
-                            ? _imagePaths.icExpandFolder
-                            : _imagePaths.icCollapseFolder,
-                        color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                            ? AppColor.colorExpandMailbox
-                            : AppColor.colorCollapseMailbox,
-                        fit: BoxFit.fill),
-                    minSize: 12,
-                    splashRadius: 10,
-                    iconPadding: EdgeInsets.zero,
-                    tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                        ? AppLocalizations.of(_context).collapse
-                        : AppLocalizations.of(_context).expand,
-                    onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)),
-              ],
-            )
-          else
-            const SizedBox(width: 32),
-          Transform(
-              transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
-              child: _buildLeadingIcon()),
-        ]);
-      } else {
-        return _buildLeadingIcon();
-      }
-    } else {
-      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-        return Row(mainAxisSize: MainAxisSize.min, children: [
-          if (_mailboxNode.hasChildren())
-            Row(
-              children: [
-                SizedBox(width: _mailboxNode.item.hasRole() ? 0 : 0),
-                buildIconWeb(
-                    icon: SvgPicture.asset(
-                        _mailboxNode.expandMode == ExpandMode.EXPAND
-                            ? _imagePaths.icExpandFolder
-                            : _imagePaths.icCollapseFolder,
-                        color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                            ? AppColor.colorExpandMailbox
-                            : AppColor.colorCollapseMailbox,
-                        fit: BoxFit.fill),
-                    minSize: 12,
-                    splashRadius: 10,
-                    iconPadding: EdgeInsets.zero,
-                    tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                        ? AppLocalizations.of(_context).collapse
-                        : AppLocalizations.of(_context).expand,
-                    onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)),
-              ],
-            )
-          else
-            const SizedBox(width: 24),
-          _buildLeadingIcon(),
-        ]);
-      } else {
-        return _buildLeadingIcon();
-      }
-    }
+    return Row(children: [
+      if (_mailboxNode.hasChildren())
+        Row(children: [
+          const SizedBox(width: 8),
+          buildIconWeb(
+            icon: SvgPicture.asset(
+              _mailboxNode.expandMode == ExpandMode.EXPAND
+                ? _imagePaths.icExpandFolder
+                : _imagePaths.icCollapseFolder,
+              color: _mailboxNode.expandMode == ExpandMode.EXPAND
+                ? AppColor.colorExpandMailbox
+                : AppColor.colorCollapseMailbox,
+              fit: BoxFit.fill
+            ),
+            minSize: 12,
+            splashRadius: 10,
+            iconPadding: EdgeInsets.zero,
+            tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
+              ? AppLocalizations.of(_context).collapse
+              : AppLocalizations.of(_context).expand,
+            onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
+          ),
+        ])
+      else
+        const SizedBox(width: 32),
+      Transform(
+        transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
+        child: _buildLeadingIcon()
+      ),
+    ]);
  }

-  Widget _buildTrailingMailboxItem() {
+  Widget _buildTrailingItemForMailboxView() {
    if (BuildUtils.isWeb) {
      if (isHoverItem) {
        return _buildMenuIcon();
      } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
-          && _mailboxNode.item.matchCountingRules()
-          && mailboxDisplayed == MailboxDisplayed.mailbox) {
+          && _mailboxNode.item.matchCountingRules()) {
        return Padding(
          padding: const EdgeInsets.only(right: 10),
          child: _buildCounter(),
        );
-      } else if (_mailboxNode.hasChildren()
-          && mailboxDisplayed == MailboxDisplayed.destinationPicker) {
-        return buildIconWeb(
-            icon: SvgPicture.asset(
-                _mailboxNode.expandMode == ExpandMode.EXPAND
-                    ? _imagePaths.icExpandFolder
-                    : _imagePaths.icCollapseFolder,
-                color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                    ? AppColor.colorExpandMailbox
-                    : AppColor.colorCollapseMailbox,
-                fit: BoxFit.fill),
-            splashRadius: 10,
-            iconPadding: EdgeInsets.zero,
-            minSize: 30,
-            tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                ? AppLocalizations.of(_context).collapse
-                : AppLocalizations.of(_context).expand,
-            onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
-        );
      } else {
        return const SizedBox(width: 20);
      }
@@ -308,19 +252,17 @@ class MailBoxFolderTileBuilder {
          child: Row(
            children: [
              if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
-                  && _mailboxNode.item.matchCountingRules()
-                  && mailboxDisplayed == MailboxDisplayed.mailbox)
-                _buildCounter(),
+                && _mailboxNode.item.matchCountingRules())
+                  _buildCounter(),
            ],
          ),
        );
      } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
-          && _mailboxNode.item.matchCountingRules()
-          && mailboxDisplayed == MailboxDisplayed.mailbox) {
-        return Padding(
-          padding: const EdgeInsets.only(right: 12),
-          child: _buildCounter(),
-        );
+        && _mailboxNode.item.matchCountingRules()) {
+          return Padding(
+            padding: const EdgeInsets.only(right: 12),
+            child: _buildCounter(),
+          );
      } else {
        return const SizedBox();
      }