From 54203b234b7012d42692b6cb70b0f9113301cb57 Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 31 May 2022 18:29:51 +0700 Subject: [PATCH] TF-599 Apply new icon mailbox for destination picker --- .../presentation/destination_picker_view.dart | 42 ++++---- .../app_bar_destination_picker_builder.dart | 2 +- .../widgets/mailbox_folder_tile_builder.dart | 97 ++++++++++++------- .../widgets/mailbox_search_tile_builder.dart | 15 ++- .../presentation/mailbox_creator_view.dart | 6 +- .../mailbox_dashboard_view_web.dart | 2 +- 6 files changed, 101 insertions(+), 63 deletions(-) diff --git a/lib/features/destination_picker/presentation/destination_picker_view.dart b/lib/features/destination_picker/presentation/destination_picker_view.dart index 9bc4bfa3f..dbc4bbc23 100644 --- a/lib/features/destination_picker/presentation/destination_picker_view.dart +++ b/lib/features/destination_picker/presentation/destination_picker_view.dart @@ -5,6 +5,7 @@ import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:model/model.dart'; import 'package:pointer_interceptor/pointer_interceptor.dart'; +import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart'; import 'package:tmail_ui_user/features/destination_picker/presentation/destination_picker_controller.dart'; import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart'; import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart'; @@ -17,7 +18,8 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_sear import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; -class DestinationPickerView extends GetWidget { +class DestinationPickerView extends GetWidget + with AppLoaderMixin { final _imagePaths = Get.find(); final _responsiveUtils = Get.find(); @@ -161,12 +163,9 @@ class DestinationPickerView extends GetWidget { return Obx(() => controller.viewState.value.fold( (failure) => const SizedBox.shrink(), (success) => success is LoadingState - ? const Center(child: Padding( - padding: EdgeInsets.only(top: 16), - child: SizedBox( - width: 24, - height: 24, - child: CircularProgressIndicator(color: AppColor.primaryColor)))) + ? Padding( + padding: const EdgeInsets.only(top: 16), + child: loadingWidget) : const SizedBox.shrink())); } @@ -181,17 +180,18 @@ class DestinationPickerView extends GetWidget { const SizedBox(height: 12), if (actions == MailboxActions.create) _buildUnifiedMailbox(context), const SizedBox(height: 12), - Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false - ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root, actions) + Obx(() => controller.defaultMailboxHasChild + ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultRootNode, actions) : const SizedBox.shrink()), if (actions == MailboxActions.create) const SizedBox(height: 12), if (actions != MailboxActions.create && !kIsWeb) const Padding( padding: EdgeInsets.only(left: 60), child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)), - Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false - ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root, actions) + Obx(() => controller.folderMailboxHasChild + ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderRootNode, actions) : const SizedBox.shrink()), + const SizedBox(height: 12), ] ); } @@ -218,7 +218,7 @@ class DestinationPickerView extends GetWidget { child: Row(children: [ Expanded(child: Text(categories.getTitle(context), maxLines: 1, - overflow: TextOverflow.ellipsis, + overflow: CommonTextStyle.defaultTextOverFlow, style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))), buildIconWeb( icon: SvgPicture.asset( @@ -239,7 +239,11 @@ class DestinationPickerView extends GetWidget { margin: EdgeInsets.only( left: actions == MailboxActions.moveEmail ? 8 : _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: actions == MailboxActions.moveEmail ? 0 : 16), - padding: const EdgeInsets.only(left: 12, right: 8), + padding: EdgeInsets.only( + top: _responsiveUtils.isDesktop(context) && actions == MailboxActions.create ? 8 : 0, + bottom: _responsiveUtils.isDesktop(context) && actions == MailboxActions.create ? 8 : 0, + left: _responsiveUtils.isDesktop(context) ? 0 : 12, + right: actions == MailboxActions.create ? 8 : 16), child: TreeView( key: Key('${categories.keyValue}_mailbox_list'), children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode))); @@ -269,9 +273,7 @@ class DestinationPickerView extends GetWidget { Widget _buildListMailboxSearched(BuildContext context) { return Obx(() => Container( - margin: _responsiveUtils.isDesktop(context) - ? const EdgeInsets.only(left: 16, right: 16) - : EdgeInsets.zero, + margin: const EdgeInsets.only(right: 8, bottom: 12), decoration: _responsiveUtils.isDesktop(context) ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white) : null, @@ -287,6 +289,7 @@ class DestinationPickerView extends GetWidget { _imagePaths, _responsiveUtils, controller.listMailboxSearched[index], + mailboxDisplayed: MailboxDisplayed.destinationPicker, lastMailbox: controller.listMailboxSearched.last) ..addOnOpenMailboxAction((mailbox) => controller.selectMailboxAction(mailbox))) .build()) @@ -309,7 +312,10 @@ class DestinationPickerView extends GetWidget { onTap: () => controller.selectMailboxAction(null), leading: Padding( padding: const EdgeInsets.only(left: 16), - child: SvgPicture.asset(_imagePaths.icFolderMailbox, width: 28, height: 28, fit: BoxFit.fill)), + child: SvgPicture.asset(_imagePaths.icFolderMailbox, + width: BuildUtils.isWeb ? 20 : 24, + height: BuildUtils.isWeb ? 20 : 24, + fit: BoxFit.fill)), title: Transform( transform: Matrix4.translationValues(-5.0, 0.0, 0.0), child: Row( @@ -329,7 +335,7 @@ class DestinationPickerView extends GetWidget { } void _handleOpenMailboxClick(MailboxNode mailboxNode) { - var presentationMailbox; + PresentationMailbox presentationMailbox; final path = controller.findNodePath(mailboxNode.item.id) ?? mailboxNode.item.name?.name; if (path != null) { diff --git a/lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart b/lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart index 32740b648..0224bde1d 100644 --- a/lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart +++ b/lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart @@ -79,7 +79,7 @@ class AppBarDestinationPickerBuilder { return Text( _mailboxAction?.getTitle(_context) ?? '', maxLines: 1, - overflow: TextOverflow.ellipsis, + overflow: CommonTextStyle.defaultTextOverFlow, textAlign: TextAlign.center, style: const TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700)); } diff --git a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart index 25850e71c..1dab2a4db 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart @@ -96,19 +96,19 @@ class MailBoxFolderTileBuilder { } else { return InkWell( onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: backgroundColorItem), - padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8), - margin: const EdgeInsets.only(bottom: 4), - child: Row(children: [ - _buildLeadingMailboxItem(), - const SizedBox(width: 4), - Expanded(child: _buildTitleFolderItem()), - const SizedBox(width: 8), - _buildTrailingMailboxItem() - ]) + child: ClipRRect( + borderRadius: const BorderRadius.all(Radius.circular(14)), + child: Container( + color: Colors.white, + padding: const EdgeInsets.only(left: 16, top: 8, bottom: 8), + child: Row(children: [ + _buildLeadingMailboxItem(), + const SizedBox(width: 8), + Expanded(child: _buildTitleFolderItem()), + const SizedBox(width: 8), + _buildTrailingMailboxItem() + ]) + ), ), ); } @@ -147,30 +147,34 @@ class MailBoxFolderTileBuilder { Widget _buildLeadingMailboxItem() { if (BuildUtils.isWeb) { - return Row(mainAxisSize: MainAxisSize.min, children: [ - if (_mailboxNode.hasChildren()) - 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), - Transform( - transform: Matrix4.translationValues(-4.0, 0.0, 0.0), - child: _buildLeadingIcon()) - ]); + if (mailboxDisplayed == MailboxDisplayed.mailbox) { + return Row(mainAxisSize: MainAxisSize.min, children: [ + if (_mailboxNode.hasChildren()) + 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), + Transform( + transform: Matrix4.translationValues(-4.0, 0.0, 0.0), + child: _buildLeadingIcon()) + ]); + } else { + return _buildLeadingIcon(); + } } else { return _buildLeadingIcon(); } @@ -186,6 +190,25 @@ class MailBoxFolderTileBuilder { 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); } diff --git a/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart index f981a1dcb..b65d934f1 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart @@ -3,6 +3,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart'; typedef OnOpenMailboxActionClick = void Function(PresentationMailbox); typedef OnSelectMailboxActionClick = void Function(PresentationMailbox); @@ -16,6 +17,7 @@ class MailboxSearchTileBuilder { final ImagePaths _imagePaths; final ResponsiveUtils _responsiveUtils; final BuildContext _context; + final MailboxDisplayed mailboxDisplayed; bool isHoverItem = false; @@ -31,6 +33,7 @@ class MailboxSearchTileBuilder { { this.allSelectMode = SelectMode.INACTIVE, this.lastMailbox, + this.mailboxDisplayed = MailboxDisplayed.mailbox, } ); @@ -159,7 +162,7 @@ class MailboxSearchTileBuilder { } Widget? _buildMenuIcon() { - if (isHoverItem) { + if (isHoverItem && mailboxDisplayed == MailboxDisplayed.mailbox) { return Padding( padding: const EdgeInsets.only(right: 8), child: InkWell( @@ -188,9 +191,13 @@ class MailboxSearchTileBuilder { if (isHoverItem) { return AppColor.colorBgMailboxSelected; } else { - return _responsiveUtils.isDesktop(_context) - ? AppColor.colorBgDesktop - : Colors.white; + if (mailboxDisplayed == MailboxDisplayed.mailbox) { + return _responsiveUtils.isDesktop(_context) + ? AppColor.colorBgDesktop + : Colors.white; + } else { + return Colors.white; + } } } } \ No newline at end of file diff --git a/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart b/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart index 3d5fb21b6..a9a602bd4 100644 --- a/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart +++ b/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart @@ -13,6 +13,8 @@ class MailboxCreatorView extends GetWidget { final _imagePaths = Get.find(); final _responsiveUtils = Get.find(); + MailboxCreatorView({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return PointerInterceptor(child: Card( @@ -131,8 +133,8 @@ class MailboxCreatorView extends GetWidget { padding: const EdgeInsets.only(left: 16), child: SvgPicture.asset( _imagePaths.icFolderMailbox, - width: 28, - height: 28, + width: BuildUtils.isWeb ? 20 : 24, + height: BuildUtils.isWeb ? 20 : 24, fit: BoxFit.fill)), title: Transform( transform: Matrix4.translationValues(-5.0, 0.0, 0.0), diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart index fa3fe7e44..187fcc2f3 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -76,7 +76,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { ]) ), Expanded(child: Padding( - padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48), + padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10), child: _buildRightHeader(context))) ]), Expanded(child: Row(