diff --git a/lib/features/mailbox/presentation/extensions/toggle_expand_folders_extension.dart b/lib/features/mailbox/presentation/extensions/toggle_expand_folders_extension.dart new file mode 100644 index 000000000..8d612142a --- /dev/null +++ b/lib/features/mailbox/presentation/extensions/toggle_expand_folders_extension.dart @@ -0,0 +1,14 @@ + +import 'package:model/mailbox/expand_mode.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart'; + +extension ToggleExpandFoldersExtension on MailboxController { + void toggleExpandFolders() { + final currentExpand = foldersExpandMode.value; + if (currentExpand == ExpandMode.COLLAPSE) { + foldersExpandMode.value = ExpandMode.EXPAND; + } else { + foldersExpandMode.value = ExpandMode.COLLAPSE; + } + } +} \ No newline at end of file diff --git a/lib/features/mailbox/presentation/mailbox_controller.dart b/lib/features/mailbox/presentation/mailbox_controller.dart index 096cacc87..bff598a41 100644 --- a/lib/features/mailbox/presentation/mailbox_controller.dart +++ b/lib/features/mailbox/presentation/mailbox_controller.dart @@ -122,6 +122,7 @@ class MailboxController extends BaseMailboxController final _activeScrollTop = RxBool(false); final _activeScrollBottom = RxBool(true); + final foldersExpandMode = Rx(ExpandMode.EXPAND); MailboxId? _newFolderId; NavigationRouter? _navigationRouter; diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index 021baa639..3570ed281 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -5,6 +5,7 @@ import 'package:model/model.dart'; import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart'; import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/extensions/toggle_expand_folders_extension.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart'; @@ -98,37 +99,25 @@ class MailboxView extends BaseMailboxView { return const SizedBox.shrink(); } }), - FoldersBarWidget( - onOpenSearchFolder: () => controller.openSearchViewAction(context), - onAddNewFolder: () => controller.goToCreateNewMailboxView(context), - imagePaths: controller.imagePaths, - responsiveUtils: controller.responsiveUtils, - height: 40, - padding: const EdgeInsets.symmetric(horizontal: 24), - labelStyle: ThemeUtils.textStyleInter500(), - ), Obx(() { - if (controller.personalMailboxIsNotEmpty) { - return _buildMailboxCategory( - context, - MailboxCategories.personalFolders, - controller.personalRootNode - ); - } else { - return const SizedBox.shrink(); - } - }), - Obx(() { - if (controller.teamMailboxesIsNotEmpty) { - return _buildMailboxCategory( - context, - MailboxCategories.teamMailboxes, - controller.teamMailboxesRootNode - ); - } else { - return const SizedBox.shrink(); - } + return FoldersBarWidget( + onOpenSearchFolder: () => controller.openSearchViewAction(context), + onAddNewFolder: () => controller.goToCreateNewMailboxView(context), + imagePaths: controller.imagePaths, + responsiveUtils: controller.responsiveUtils, + height: 40, + padding: const EdgeInsetsDirectional.only(start: 24, end: 12), + labelStyle: ThemeUtils.textStyleInter500(), + expandMode: controller.foldersExpandMode.value, + onToggleExpandFolder: controller.toggleExpandFolders, + ); }), + Obx(() => AnimatedContainer( + duration: const Duration(milliseconds: 400), + child: controller.foldersExpandMode.value == ExpandMode.EXPAND + ? _buildFolders(context) + : const Offstage(), + )), Obx(() { final accountId = controller .mailboxDashBoardController @@ -146,12 +135,17 @@ class MailboxView extends BaseMailboxView { return const SizedBox.shrink(); } + final isFoldersExpanded = + controller.foldersExpandMode.value == ExpandMode.EXPAND; + return Column( mainAxisSize: MainAxisSize.min, children: [ - const Padding( - padding: EdgeInsets.only(top: 8), - child: Divider(color: AppColor.folderDivider, height: 1), + Padding( + padding: isFoldersExpanded + ? const EdgeInsets.only(top: 8) + : EdgeInsets.zero, + child: const Divider(color: AppColor.folderDivider, height: 1), ), FolderWidget( icon: controller.imagePaths.icHelp, @@ -175,6 +169,36 @@ class MailboxView extends BaseMailboxView { ); } + Widget _buildFolders(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + Obx(() { + if (controller.personalMailboxIsNotEmpty) { + return _buildMailboxCategory( + context, + MailboxCategories.personalFolders, + controller.personalRootNode, + ); + } else { + return const SizedBox.shrink(); + } + }), + Obx(() { + if (controller.teamMailboxesIsNotEmpty) { + return _buildMailboxCategory( + context, + MailboxCategories.teamMailboxes, + controller.teamMailboxesRootNode, + ); + } else { + return const SizedBox.shrink(); + } + }), + ], + ); + } + Widget _buildBodyMailboxCategory({ required BuildContext context, required MailboxCategories categories, diff --git a/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart b/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart index 892f5688f..42dd4f97f 100644 --- a/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart +++ b/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart @@ -3,7 +3,11 @@ import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/views/button/tmail_button_widget.dart'; +import 'package:core/utils/direction_utils.dart'; +import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; +import 'package:model/mailbox/expand_mode.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class FoldersBarWidget extends StatelessWidget { @@ -14,6 +18,8 @@ class FoldersBarWidget extends StatelessWidget { final double? height; final EdgeInsetsGeometry? padding; final TextStyle? labelStyle; + final ExpandMode? expandMode; + final VoidCallback? onToggleExpandFolder; const FoldersBarWidget({ super.key, @@ -24,6 +30,8 @@ class FoldersBarWidget extends StatelessWidget { this.height, this.padding, this.labelStyle, + this.expandMode, + this.onToggleExpandFolder, }); @override @@ -61,6 +69,13 @@ class FoldersBarWidget extends StatelessWidget { ); } + final labelFolder = Text( + AppLocalizations.of(context).folders, + style: labelStyle ?? ThemeUtils.textStyleInter700(), + maxLines: 1, + overflow: TextOverflow.ellipsis, + ); + return Container( padding: padding ?? EdgeInsetsDirectional.only( start: responsiveUtils.isWebDesktop(context) ? 10 : 26, @@ -69,15 +84,30 @@ class FoldersBarWidget extends StatelessWidget { height: height ?? 48, child: Row( children: [ - Expanded( - child: Text( - AppLocalizations.of(context).folders, - style: labelStyle ?? ThemeUtils.textStyleInter700(), - maxLines: 1, - overflow: TextOverflow.ellipsis, - ), + if (expandMode != null) + Expanded(child: Row( + children: [ + Flexible(child: labelFolder), + TMailButtonWidget.fromIcon( + icon: expandMode!.getIcon( + imagePaths, + DirectionUtils.isDirectionRTLByLanguage(context), + ), + iconColor: Colors.black, + iconSize: PlatformInfo.isMobile ? 17 : 20, + backgroundColor: Colors.transparent, + padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5), + tooltipMessage: expandMode!.getTooltipMessage(AppLocalizations.of(context)), + onTapActionCallback: () => onToggleExpandFolder?.call(), + ) + ], + )) + else + Expanded(child: labelFolder), + Row( + mainAxisSize: MainAxisSize.min, + children: [searchBarIcon, newFolderIcon], ), - Row(children: [searchBarIcon, newFolderIcon]), ], ), );