From efba186e68f7e5b478f99da990e908b0135c79df Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 7 Aug 2025 12:42:45 +0700 Subject: [PATCH] TF-3950 Apply new style for Folder Visibility on web Signed-off-by: dab246 --- .../widgets/label_mailbox_item_widget.dart | 1 - .../widgets/mailbox_category_widget.dart | 4 + .../widgets/mailbox_expand_button.dart | 7 +- .../toggle_expand_folders_extension.dart | 13 + .../mailbox_visibility_controller.dart | 2 + .../mailbox_visibility_view.dart | 253 +++++++++++++----- .../utils/mailbox_visibility_utils.dart | 14 - .../label_mailbox_visibility_item_widget.dart | 91 +++++++ .../widgets/mailbox_subscribe_button.dart | 48 ++++ ...ailbox_visibility_folder_tile_builder.dart | 192 +++++-------- ...mailbox_visibility_folders_bar_widget.dart | 55 ++++ 11 files changed, 457 insertions(+), 223 deletions(-) create mode 100644 lib/features/manage_account/presentation/mailbox_visibility/extensions/toggle_expand_folders_extension.dart delete mode 100644 lib/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart create mode 100644 lib/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart create mode 100644 lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart create mode 100644 lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folders_bar_widget.dart diff --git a/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart b/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart index 1e083ef64..304e8f114 100644 --- a/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart +++ b/lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart @@ -75,7 +75,6 @@ class _LabelMailboxItemWidgetState extends State { itemKey: widget.itemKey, mailboxNode: widget.mailboxNode, imagePaths: _imagePaths, - responsiveUtils: _responsiveUtils, onExpandFolderActionClick: widget.onClickExpandMailboxNodeAction, ), ], diff --git a/lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart b/lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart index fa607e884..ac39561a3 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart @@ -1,3 +1,4 @@ +import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/views/button/tmail_button_widget.dart'; @@ -23,6 +24,7 @@ class MailboxCategoryWidget extends StatefulWidget { final EdgeInsetsGeometry? padding; final double? height; final double? iconSpace; + final Color? iconColor; final TextStyle? labelTextStyle; const MailboxCategoryWidget({ @@ -35,6 +37,7 @@ class MailboxCategoryWidget extends StatefulWidget { this.padding, this.height, this.iconSpace, + this.iconColor, this.labelTextStyle, }); @@ -59,6 +62,7 @@ class _MailboxCategoryWidgetState extends State { _imagePaths.icFolderMailbox, width: MailboxIconWidgetStyles.iconSize, height: MailboxIconWidgetStyles.iconSize, + colorFilter: widget.iconColor?.asFilter(), fit: BoxFit.fill, ), SizedBox(width: widget.iconSpace ?? MailboxItemWidgetStyles.labelIconSpace), diff --git a/lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart b/lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart index 3a54b82ad..408954296 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart @@ -1,6 +1,5 @@ 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/views/button/tmail_button_widget.dart'; import 'package:core/utils/direction_utils.dart'; import 'package:flutter/material.dart'; @@ -14,7 +13,7 @@ class MailboxExpandButton extends StatelessWidget { final GlobalKey itemKey; final MailboxNode mailboxNode; final ImagePaths imagePaths; - final ResponsiveUtils responsiveUtils; + final Color? color; final OnClickExpandMailboxNodeAction? onExpandFolderActionClick; const MailboxExpandButton({ @@ -22,8 +21,8 @@ class MailboxExpandButton extends StatelessWidget { required this.itemKey, required this.mailboxNode, required this.imagePaths, - required this.responsiveUtils, required this.onExpandFolderActionClick, + this.color, }); @override @@ -33,7 +32,7 @@ class MailboxExpandButton extends StatelessWidget { imagePaths, DirectionUtils.isDirectionRTLByLanguage(context), ), - iconColor: _expandIconColor, + iconColor: color ?? _expandIconColor, iconSize: 17, margin: const EdgeInsetsDirectional.only(start: 8), padding: const EdgeInsets.all(3), diff --git a/lib/features/manage_account/presentation/mailbox_visibility/extensions/toggle_expand_folders_extension.dart b/lib/features/manage_account/presentation/mailbox_visibility/extensions/toggle_expand_folders_extension.dart new file mode 100644 index 000000000..0d9cc8b5e --- /dev/null +++ b/lib/features/manage_account/presentation/mailbox_visibility/extensions/toggle_expand_folders_extension.dart @@ -0,0 +1,13 @@ +import 'package:model/mailbox/expand_mode.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart'; + +extension ToggleExpandFoldersExtension on MailboxVisibilityController { + void toggleExpandFolders() { + final currentExpand = foldersExpandMode.value; + if (currentExpand == ExpandMode.COLLAPSE) { + foldersExpandMode.value = ExpandMode.EXPAND; + } else { + foldersExpandMode.value = ExpandMode.COLLAPSE; + } + } +} diff --git a/lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart b/lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart index ee2a677b9..de5eddbb0 100644 --- a/lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart +++ b/lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart @@ -9,6 +9,7 @@ import 'package:jmap_dart_client/jmap/core/properties/properties.dart'; import 'package:jmap_dart_client/jmap/core/state.dart' as jmap; import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart'; import 'package:model/extensions/presentation_mailbox_extension.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/mailbox/domain/constants/mailbox_constants.dart'; @@ -37,6 +38,7 @@ class MailboxVisibilityController extends BaseMailboxController { SubscribeMultipleMailboxInteractor? _subscribeMultipleMailboxInteractor; final _accountDashBoardController = Get.find(); final mailboxListScrollController = ScrollController(); + final foldersExpandMode = Rx(ExpandMode.EXPAND); MailboxVisibilityController( TreeBuilder treeBuilder, diff --git a/lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart b/lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart index 4ed890103..f7e92c1e7 100644 --- a/lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart +++ b/lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart @@ -1,5 +1,6 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/state/success.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/views/list/tree_view.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; @@ -8,13 +9,17 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/mixin/mailbox_widget_mixin.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'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/extensions/toggle_expand_folders_extension.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/state/mailbox_visibility_state.dart'; -import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folders_bar_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_explanation_widget.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart'; class MailboxVisibilityView extends GetWidget @@ -27,30 +32,59 @@ class MailboxVisibilityView extends GetWidget Widget build(BuildContext context) { return SettingDetailViewBuilder( responsiveUtils: controller.responsiveUtils, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (controller.responsiveUtils.isWebDesktop(context)) - ...[ - const SettingHeaderWidget(menuItem: AccountMenuItem.mailboxVisibility), - const Divider(height: 1, color: AppColor.colorDividerHeaderSetting), - ], - _buildLoadingView(), - Expanded(child: Padding( - padding: MailboxVisibilityUtils.getPaddingListView(context, controller.responsiveUtils), - child: _buildListMailbox(context) - )) - ] + child: Container( + color: SettingsUtils.getContentBackgroundColor( + context, + controller.responsiveUtils, + ), + decoration: SettingsUtils.getBoxDecorationForContent( + context, + controller.responsiveUtils, + ), + width: double.infinity, + padding: controller.responsiveUtils.isDesktop(context) + ? const EdgeInsets.symmetric(vertical: 30, horizontal: 22) + : null, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (controller.responsiveUtils.isWebDesktop(context)) + SettingHeaderWidget( + menuItem: AccountMenuItem.mailboxVisibility, + textStyle: ThemeUtils.textStyleInter600().copyWith( + color: Colors.black.withValues(alpha: 0.9), + ), + padding: EdgeInsets.zero, + ) + else + const SettingExplanationWidget( + menuItem: AccountMenuItem.mailboxVisibility, + padding: EdgeInsetsDirectional.only( + start: 16, + end: 16, + bottom: 16, + ), + isCenter: true, + ), + _buildLoadingView(), + Expanded( + child: _buildListMailbox(context), + ), + ], + ), ), ); } Widget _buildLoadingView() { - return Obx(() => controller.viewState.value.fold( - (failure) => const SizedBox.shrink(), - (success) => success is LoadingState || success is LoadingBuildTreeMailboxVisibility - ? Padding(padding: const EdgeInsets.only(top: 16), child: loadingWidget) - : const SizedBox.shrink())); + return Obx( + () => controller.viewState.value.fold( + (failure) => const SizedBox(height: 24), + (success) => success is LoadingState || success is LoadingBuildTreeMailboxVisibility + ? loadingWidget + : const SizedBox(height: 24), + ), + ); } Widget _buildListMailbox(BuildContext context) { @@ -58,68 +92,141 @@ class MailboxVisibilityView extends GetWidget controller: controller.mailboxListScrollController, key: const PageStorageKey('mailbox_list'), physics: const ClampingScrollPhysics(), - child: Column(children: [ - Obx(() => controller.defaultMailboxIsNotEmpty - ? _buildMailboxCategory( - context, - MailboxCategories.exchange, - controller.defaultRootNode) - : const SizedBox.shrink() - ), - Obx(() => controller.teamMailboxesIsNotEmpty - ? _buildMailboxCategory( - context, - MailboxCategories.teamMailboxes, - controller.teamMailboxesRootNode) - : const SizedBox.shrink() - ), - Obx(() => controller.personalMailboxIsNotEmpty - ? _buildMailboxCategory( - context, - MailboxCategories.personalFolders, - controller.personalRootNode) - : const SizedBox.shrink() - ) - ]) + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Obx(() => controller.defaultMailboxIsNotEmpty + ? _buildMailboxCategory( + context, + MailboxCategories.exchange, + controller.defaultRootNode, + ) + : const SizedBox.shrink()), + Obx(() { + return MailboxVisibilityFoldersBarWidget( + imagePaths: controller.imagePaths, + expandMode: controller.foldersExpandMode.value, + onToggleExpandFolder: controller.toggleExpandFolders, + ); + }), + Obx(() => AnimatedContainer( + duration: const Duration(milliseconds: 400), + child: controller.foldersExpandMode.value == ExpandMode.EXPAND + ? buildFolders(context) + : const Offstage(), + )), + ], + ), ); } - Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) { - if (categories == MailboxCategories.exchange) { - return _buildBodyMailboxCategory(context, categories, mailboxNode); - } - return Column(children: [ - Obx(() => MailboxCategoryWidget( - categories: categories, - expandMode: categories.getExpandMode( - controller.mailboxCategoriesExpandMode.value, - ), - onToggleMailboxCategories: (categories, itemKey) => - controller.toggleMailboxCategories( - categories, - controller.mailboxListScrollController, - itemKey, - ), - padding: const EdgeInsetsDirectional.symmetric(vertical: 8), - )), - AnimatedContainer( - duration: const Duration(milliseconds: 400), - child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND - ? _buildBodyMailboxCategory(context, categories, mailboxNode) - : const Offstage() - ) - ]); + 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( + Widget _buildMailboxCategory( BuildContext context, MailboxCategories categories, MailboxNode mailboxNode, ) { - return TreeView( + switch (categories) { + case MailboxCategories.exchange: + return _buildBodyMailboxCategory( + context: context, + categories: categories, + mailboxNode: mailboxNode, + ); + default: + return Column( + children: [ + Obx( + () => MailboxCategoryWidget( + categories: categories, + expandMode: categories.getExpandMode( + controller.mailboxCategoriesExpandMode.value, + ), + onToggleMailboxCategories: (categories, itemKey) => + controller.toggleMailboxCategories( + categories, + controller.mailboxListScrollController, + itemKey, + ), + isArrangeLTR: false, + showIcon: true, + iconSpace: 8, + iconColor: AppColor.steelGrayA540, + padding: const EdgeInsets.symmetric( + horizontal: MailboxItemWidgetStyles.itemPadding, + ), + height: 40, + ), + ), + Obx(() { + final categoriesExpandMode = + controller.mailboxCategoriesExpandMode.value; + + bool isExpand = categories.getExpandMode(categoriesExpandMode) == + ExpandMode.EXPAND; + + return AnimatedContainer( + duration: const Duration(milliseconds: 400), + child: isExpand + ? _buildBodyMailboxCategory( + context: context, + categories: categories, + mailboxNode: mailboxNode, + padding: const EdgeInsetsDirectional.only(start: 10), + ) + : const Offstage(), + ); + }), + ], + ); + } + } + + Widget _buildBodyMailboxCategory({ + required BuildContext context, + required MailboxCategories categories, + required MailboxNode mailboxNode, + EdgeInsetsGeometry? padding, + }) { + final treeView = TreeView( key: Key('${categories.keyValue}_mailbox_list'), - children: _buildListChildTileWidget(context, mailboxNode) + children: _buildListChildTileWidget(context, mailboxNode), ); + + if (padding != null) { + return Padding(padding: padding, child: treeView); + } else { + return treeView; + } } List _buildListChildTileWidget( @@ -134,7 +241,7 @@ class MailboxVisibilityView extends GetWidget isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND, paddingChild: const EdgeInsetsDirectional.only(start: 10), parent: MailBoxVisibilityFolderTileBuilder( - mailboxNode, + mailboxNode: mailboxNode, onClickExpandMailboxNodeAction: (mailboxNode, itemKey) { controller.toggleMailboxFolder( mailboxNode, @@ -146,7 +253,7 @@ class MailboxVisibilityView extends GetWidget ), children: _buildListChildTileWidget(context, mailboxNode)).build() : MailBoxVisibilityFolderTileBuilder( - mailboxNode, + mailboxNode: mailboxNode, onClickExpandMailboxNodeAction: (mailboxNode, itemKey) { controller.toggleMailboxFolder( mailboxNode, diff --git a/lib/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart b/lib/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart deleted file mode 100644 index 4ccc6b519..000000000 --- a/lib/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart +++ /dev/null @@ -1,14 +0,0 @@ -import 'package:core/presentation/utils/responsive_utils.dart'; -import 'package:flutter/material.dart'; - -class MailboxVisibilityUtils { - static EdgeInsets getPaddingListView(BuildContext context, ResponsiveUtils responsiveUtils) { - if (responsiveUtils.isWebDesktop(context)) { - return const EdgeInsets.all(8); - } else if (responsiveUtils.isMobile(context) || responsiveUtils.isLandscapeMobile(context)) { - return const EdgeInsets.symmetric(horizontal: 16, vertical: 8); - } else { - return const EdgeInsets.symmetric(horizontal: 32, vertical: 8); - } - } -} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart b/lib/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart new file mode 100644 index 000000000..fca351a89 --- /dev/null +++ b/lib/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart @@ -0,0 +1,91 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; +import 'package:core/presentation/views/text/text_overflow_builder.dart'; +import 'package:flutter/material.dart'; +import 'package:model/extensions/presentation_mailbox_extension.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/styles/label_mailbox_item_widget_styles.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_expand_button.dart'; + +class LabelMailboxVisibilityItemWidget extends StatelessWidget { + final GlobalKey itemKey; + final ImagePaths imagePaths; + final MailboxNode mailboxNode; + final OnClickExpandMailboxNodeAction onClickExpandMailboxNodeAction; + + const LabelMailboxVisibilityItemWidget({ + super.key, + required this.itemKey, + required this.imagePaths, + required this.mailboxNode, + required this.onClickExpandMailboxNodeAction, + }); + + @override + Widget build(BuildContext context) { + final displayNameWidget = TextOverflowBuilder( + mailboxNode.item.getDisplayName(context), + style: _displayNameTextStyle, + ); + + final nameWithExpandIcon = Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (mailboxNode.hasChildren()) + Flexible(child: displayNameWidget) + else + Flexible( + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 3), + child: displayNameWidget, + ), + ), + if (mailboxNode.hasChildren()) + MailboxExpandButton( + itemKey: itemKey, + mailboxNode: mailboxNode, + imagePaths: imagePaths, + color: mailboxNode.item.isSubscribedMailbox || + mailboxNode.item.isDefault + ? AppColor.m3SurfaceBackground + : AppColor.steelGray400, + onExpandFolderActionClick: onClickExpandMailboxNodeAction, + ), + ], + ); + + if (mailboxNode.item.isTeamMailboxes) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + nameWithExpandIcon, + TextOverflowBuilder( + mailboxNode.item.emailTeamMailBoxes, + style: Theme.of(context).textTheme.bodyMedium?.copyWith( + fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize, + color: LabelMailboxItemWidgetStyles.teamMailboxEmailTextColor, + fontWeight: + LabelMailboxItemWidgetStyles.labelFolderTextFontWeight, + ), + ), + ], + ); + } else { + return nameWithExpandIcon; + } + } + + bool get _isSubscribedMailbox => mailboxNode.item.isSubscribedMailbox; + + TextStyle get _displayNameTextStyle { + return ThemeUtils.textStyleBodyBody3( + color: _isSubscribedMailbox || mailboxNode.item.isDefault + ? Colors.black + : AppColor.steelGray400, + ); + } +} diff --git a/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart b/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart new file mode 100644 index 000000000..9c3ab1840 --- /dev/null +++ b/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart @@ -0,0 +1,48 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; +import 'package:core/presentation/views/button/tmail_button_widget.dart'; +import 'package:flutter/material.dart'; +import 'package:model/extensions/presentation_mailbox_extension.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class MailboxSubscribeButton extends StatelessWidget { + final ImagePaths imagePaths; + final MailboxNode mailboxNode; + final OnClickSubscribeMailboxAction onClickSubscribeMailboxAction; + + const MailboxSubscribeButton({ + super.key, + required this.imagePaths, + required this.mailboxNode, + required this.onClickSubscribeMailboxAction, + }); + + @override + Widget build(BuildContext context) { + final isSubscribedMailbox = mailboxNode.item.isSubscribedMailbox; + final appLocalizations = AppLocalizations.of(context); + + return TMailButtonWidget( + text: isSubscribedMailbox ? appLocalizations.hide : appLocalizations.show, + textStyle: ThemeUtils.textStyleInter400.copyWith( + fontSize: 12, + height: 18 / 12, + letterSpacing: 0.0, + color: AppColor.primaryLinShare, + ), + icon: mailboxNode.item.isSubscribedMailbox + ? imagePaths.icHideMailbox + : imagePaths.icShowMailbox, + iconAlignment: TextDirection.rtl, + iconSize: 20, + iconSpace: 8, + iconColor: AppColor.primaryLinShare, + padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3), + backgroundColor: Colors.transparent, + onTapActionCallback: () => onClickSubscribeMailboxAction(mailboxNode), + ); + } +} diff --git a/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart b/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart index 3147544b3..1e3dda0a2 100644 --- a/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart +++ b/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart @@ -1,168 +1,98 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; -import 'package:core/presentation/utils/style_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:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:model/extensions/presentation_mailbox_extension.dart'; -import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart'; +import 'package:model/mailbox/presentation_mailbox.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.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'; import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart'; -import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart'; class MailBoxVisibilityFolderTileBuilder extends StatefulWidget { - - final MailboxNode _mailboxNode; - final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction; - final OnClickSubscribeMailboxAction? onClickSubscribeMailboxAction; + final MailboxNode mailboxNode; + final OnClickExpandMailboxNodeAction onClickExpandMailboxNodeAction; + final OnClickSubscribeMailboxAction onClickSubscribeMailboxAction; const MailBoxVisibilityFolderTileBuilder( - this._mailboxNode, { - Key? key, - this.onClickExpandMailboxNodeAction, - this.onClickSubscribeMailboxAction - }) : super(key: key); + {Key? key, + required this.mailboxNode, + required this.onClickExpandMailboxNodeAction, + required this.onClickSubscribeMailboxAction}) + : super(key: key); @override - State createState() => _MailBoxVisibilityFolderTileBuilderState(); + State createState() => + _MailBoxVisibilityFolderTileBuilderState(); } -class _MailBoxVisibilityFolderTileBuilderState extends State { - +class _MailBoxVisibilityFolderTileBuilderState + extends State { final _imagePaths = Get.find(); final GlobalKey _key = GlobalKey(); @override Widget build(BuildContext context) { - return Material( + final bodyWidget = Material( key: _key, - color: Colors.transparent, + type: MaterialType.transparency, child: InkWell( onTap: () {}, - borderRadius: const BorderRadius.all(Radius.circular(8)), - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), - child: Row( - children: [ - _buildLeadingMailboxItem(context), - Expanded(child: _buildTitleFolderItem(context)), - if (!widget._mailboxNode.item.isDefault) - _buildSubscribeButton(context), - const SizedBox(width: 32), - ] - ), + borderRadius: const BorderRadius.all( + Radius.circular(MailboxItemWidgetStyles.borderRadius), + ), + child: Container( + padding: const EdgeInsets.symmetric(horizontal: 12), + width: 315, + height: 40, + child: Row(children: [ + if (_isIconDisplayed) + MailboxIconWidget( + icon: _iconMailbox, + padding: const EdgeInsetsDirectional.only(end: 8), + color: _iconMailboxColor, + ), + Expanded( + child: LabelMailboxVisibilityItemWidget( + itemKey: _key, + mailboxNode: widget.mailboxNode, + imagePaths: _imagePaths, + onClickExpandMailboxNodeAction: + widget.onClickExpandMailboxNodeAction, + ), + ), + if (!_mailbox.isDefault) + MailboxSubscribeButton( + imagePaths: _imagePaths, + mailboxNode: widget.mailboxNode, + onClickSubscribeMailboxAction: + widget.onClickSubscribeMailboxAction, + ), + ]), ), ), ); - } - Widget _buildLeadingMailboxItem(BuildContext context) { return Row( - mainAxisSize: MainAxisSize.min, children: [ - Visibility.maintain( - visible: widget._mailboxNode.hasChildren() && widget._mailboxNode.item.isPersonal, - child: TMailButtonWidget.fromIcon( - icon: widget._mailboxNode.expandMode.getIcon( - _imagePaths, - DirectionUtils.isDirectionRTLByLanguage(context), - ), - iconColor: widget._mailboxNode.item.allowedToDisplay - ? Colors.black - : AppColor.colorIconUnSubscribedMailbox, - padding: const EdgeInsets.all(5), - iconSize: 20, - backgroundColor: Colors.transparent, - tooltipMessage: widget._mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)), - onTapActionCallback: () => - widget.onClickExpandMailboxNodeAction?.call( - widget._mailboxNode, - _key, - ) - ), - ), - if (!widget._mailboxNode.item.isTeamMailboxes) - _buildMailboxIcon(context), - ] - ); - } - - Widget _buildTitleFolderItem(BuildContext context) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - widget._mailboxNode.item.getDisplayName(context), - maxLines: 1, - softWrap: CommonTextStyle.defaultSoftWrap, - overflow: CommonTextStyle.defaultTextOverFlow, - style: ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: widget._mailboxNode.item.isTeamMailboxes ? 16 : 14, - color: widget._mailboxNode.item.allowedToDisplay - ? Colors.black - : AppColor.colorTitleAUnSubscribedMailbox, - fontWeight: widget._mailboxNode.item.isTeamMailboxes - ? FontWeight.w500 - : FontWeight.normal), - ), - if (widget._mailboxNode.item.isTeamMailboxes) - Text( - widget._mailboxNode.item.emailTeamMailBoxes, - maxLines: 1, - softWrap: CommonTextStyle.defaultSoftWrap, - overflow: CommonTextStyle.defaultTextOverFlow, - style: ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 13, - color: AppColor.colorEmailAddressFull, - fontWeight: FontWeight.normal), - ), + Flexible(child: bodyWidget), + const Spacer(), ], ); } - Widget _buildMailboxIcon(BuildContext context) { - return Padding( - padding: const EdgeInsetsDirectional.only(end: 8), - child: SvgPicture.asset( - widget._mailboxNode.item.getMailboxIcon(_imagePaths), - width: 20, - height: 20, - colorFilter: widget._mailboxNode.item.allowedToDisplay - ? AppColor.primaryColor.asFilter() - : AppColor.colorIconUnSubscribedMailbox.asFilter(), - fit: BoxFit.fill - ), - ); - } + PresentationMailbox get _mailbox => widget.mailboxNode.item; - Widget _buildSubscribeButton(BuildContext context) { - return Material( - color: Colors.transparent, - child: InkWell( - onTap: () => widget.onClickSubscribeMailboxAction?.call(widget._mailboxNode), - borderRadius: const BorderRadius.all(Radius.circular(5)), - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10), - child: Text( - widget._mailboxNode.item.isSubscribedMailbox - ? AppLocalizations.of(context).hide - : AppLocalizations.of(context).show, - maxLines: 1, - softWrap: CommonTextStyle.defaultSoftWrap, - overflow: CommonTextStyle.defaultTextOverFlow, - style: ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 15, - color: AppColor.primaryColor, - fontWeight: FontWeight.normal - ) - ), - ), - ), - ); - } + bool get _isIconDisplayed => _mailbox.isPersonal || _mailbox.hasParentId(); + + String get _iconMailbox => _mailbox.getMailboxIcon(_imagePaths); + + Color get _iconMailboxColor => + _mailbox.isSubscribedMailbox || _mailbox.isDefault + ? AppColor.steelGrayA540 + : AppColor.steelGray200; } diff --git a/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folders_bar_widget.dart b/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folders_bar_widget.dart new file mode 100644 index 000000000..d4a283782 --- /dev/null +++ b/lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folders_bar_widget.dart @@ -0,0 +1,55 @@ +import 'package:core/presentation/resources/image_paths.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: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 MailboxVisibilityFoldersBarWidget extends StatelessWidget { + final ImagePaths imagePaths; + final ExpandMode expandMode; + final VoidCallback onToggleExpandFolder; + + const MailboxVisibilityFoldersBarWidget({ + super.key, + required this.imagePaths, + required this.expandMode, + required this.onToggleExpandFolder, + }); + + @override + Widget build(BuildContext context) { + final appLocalizations = AppLocalizations.of(context); + return Container( + padding: const EdgeInsetsDirectional.symmetric(horizontal: 12), + height: 40, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Flexible( + child: Text( + appLocalizations.folders, + style: ThemeUtils.textStyleBodyBody3(), + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + ), + TMailButtonWidget.fromIcon( + icon: expandMode.getIcon( + imagePaths, + DirectionUtils.isDirectionRTLByLanguage(context), + ), + iconColor: Colors.black, + iconSize: 17, + backgroundColor: Colors.transparent, + padding: const EdgeInsets.all(3), + tooltipMessage: expandMode.getTooltipMessage(appLocalizations), + onTapActionCallback: onToggleExpandFolder, + ) + ], + ), + ); + } +}