From 769d36538783be8158338087a8c46d4e515c2f4b Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 31 May 2022 13:58:06 +0700 Subject: [PATCH] TF-599 Apply new icon for mailbox --- assets/images/ic_folder_mailbox.svg | 4 +- assets/images/ic_mailbox_archived.svg | 5 +- assets/images/ic_mailbox_drafts.svg | 4 +- assets/images/ic_mailbox_inbox.svg | 4 +- assets/images/ic_mailbox_sent.svg | 4 +- assets/images/ic_mailbox_spam.svg | 4 +- assets/images/ic_mailbox_trash.svg | 6 +- .../extensions/color_extension.dart | 2 +- .../presentation/utils/responsive_utils.dart | 2 +- core/lib/presentation/utils/style_utils.dart | 4 +- .../views/button/icon_button_web.dart | 2 + .../base/base_mailbox_controller.dart | 10 + .../presentation/mailbox_view_web.dart | 92 +++--- .../widgets/mailbox_folder_tile_builder.dart | 293 ++++++++++++------ .../mailbox_dashboard_view_web.dart | 6 +- .../thread/presentation/thread_view.dart | 9 +- 16 files changed, 292 insertions(+), 159 deletions(-) diff --git a/assets/images/ic_folder_mailbox.svg b/assets/images/ic_folder_mailbox.svg index f1d152f6c..cf2a51ca3 100644 --- a/assets/images/ic_folder_mailbox.svg +++ b/assets/images/ic_folder_mailbox.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/ic_mailbox_archived.svg b/assets/images/ic_mailbox_archived.svg index 1e6bae8c1..52de5ef28 100644 --- a/assets/images/ic_mailbox_archived.svg +++ b/assets/images/ic_mailbox_archived.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/assets/images/ic_mailbox_drafts.svg b/assets/images/ic_mailbox_drafts.svg index 573849489..7de79daf4 100644 --- a/assets/images/ic_mailbox_drafts.svg +++ b/assets/images/ic_mailbox_drafts.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/ic_mailbox_inbox.svg b/assets/images/ic_mailbox_inbox.svg index d27976256..5168aa8e3 100644 --- a/assets/images/ic_mailbox_inbox.svg +++ b/assets/images/ic_mailbox_inbox.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/ic_mailbox_sent.svg b/assets/images/ic_mailbox_sent.svg index eaaa0bdcb..c14d4453c 100644 --- a/assets/images/ic_mailbox_sent.svg +++ b/assets/images/ic_mailbox_sent.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/ic_mailbox_spam.svg b/assets/images/ic_mailbox_spam.svg index 897ea0b6d..0269edc9a 100644 --- a/assets/images/ic_mailbox_spam.svg +++ b/assets/images/ic_mailbox_spam.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/ic_mailbox_trash.svg b/assets/images/ic_mailbox_trash.svg index 8c62ceb1b..d8c1d3b25 100644 --- a/assets/images/ic_mailbox_trash.svg +++ b/assets/images/ic_mailbox_trash.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index a69421fe9..32e301689 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -114,7 +114,7 @@ extension AppColor on Color { static const colorFocusButton = Color(0x14818C99); static const colorBorderEmailAddressInvalid = Color(0xFFFF3347); static const colorBorderIdentityInfo = Color(0xFFE7E8EC); - static const colorBgMailboxSelected = Color(0xFF99E4E8EC); + static const colorBgMailboxSelected = Color(0x99E4E8EC); static const colorLoading = Color(0x2999A2AD); static const colorActionButtonHover = Color(0xFFA2AAB3); static const colorBgMenuItemDropDownSelected = Color(0x80DEE2E7); diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index 59db920e1..d26df50a2 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -10,7 +10,7 @@ class ResponsiveUtils { final int minTabletLargeWidth = 900; final double defaultSizeDrawer = 320; - final double defaultSizeMenu = 262; + final double defaultSizeMenu = 256; final double _loginTextFieldWidthSmallScreen = 280.0; final double _loginTextFieldWidthLargeScreen = 320.0; diff --git a/core/lib/presentation/utils/style_utils.dart b/core/lib/presentation/utils/style_utils.dart index 847c3c0bf..4917ddefa 100644 --- a/core/lib/presentation/utils/style_utils.dart +++ b/core/lib/presentation/utils/style_utils.dart @@ -1,4 +1,4 @@ -import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/core.dart'; import 'package:flutter/material.dart'; class CommonTextStyle { @@ -8,4 +8,6 @@ class CommonTextStyle { fontStyle: FontStyle.normal, fontWeight: FontWeight.normal, ); + + static final defaultTextOverFlow = BuildUtils.isWeb ? null : TextOverflow.ellipsis; } \ No newline at end of file diff --git a/core/lib/presentation/views/button/icon_button_web.dart b/core/lib/presentation/views/button/icon_button_web.dart index 8709f42b4..243932f4c 100644 --- a/core/lib/presentation/views/button/icon_button_web.dart +++ b/core/lib/presentation/views/button/icon_button_web.dart @@ -12,6 +12,7 @@ Widget buildIconWeb({ EdgeInsets? iconPadding, double? iconSize, double? splashRadius, + double? minSize, }) { return Material( color: Colors.transparent, @@ -19,6 +20,7 @@ Widget buildIconWeb({ child: IconButton( icon: icon, iconSize: iconSize, + constraints: minSize != null ? BoxConstraints(minWidth: minSize, minHeight: minSize) : null, padding: iconPadding ?? EdgeInsets.all(8.0), splashRadius: splashRadius ?? 15, tooltip: tooltip ?? '', diff --git a/lib/features/base/base_mailbox_controller.dart b/lib/features/base/base_mailbox_controller.dart index 12701d5ba..543dc7ff3 100644 --- a/lib/features/base/base_mailbox_controller.dart +++ b/lib/features/base/base_mailbox_controller.dart @@ -110,4 +110,14 @@ abstract class BaseMailboxController extends BaseController { } }).toList(); } + + bool get defaultMailboxHasChild => + defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false; + + bool get folderMailboxHasChild => + folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false; + + MailboxNode get defaultRootNode => defaultMailboxTree.value.root; + + MailboxNode get folderRootNode => folderMailboxTree.value.root; } diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index 5e1f80f29..7621db990 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -1,10 +1,10 @@ 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'; import 'package:model/model.dart'; import 'package:package_info_plus/package_info_plus.dart'; +import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.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'; @@ -15,7 +15,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_informa 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 MailboxView extends GetWidget { +class MailboxView extends GetWidget with AppLoaderMixin { final _imagePaths = Get.find(); final _responsiveUtils = Get.find(); @@ -33,7 +33,7 @@ class MailboxView extends GetWidget { if (!_responsiveUtils.isDesktop(context)) _buildLogoApp(context), if (!_responsiveUtils.isDesktop(context)) const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), Expanded(child: Container( - padding: EdgeInsets.zero, + padding: const EdgeInsets.only(left: 16), color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, child: Column(children: [ if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context), @@ -96,7 +96,7 @@ class MailboxView extends GetWidget { Widget _buildComposerButton(BuildContext context) { return Container( - padding: const EdgeInsets.only(top: 16, right: 16, left: 16), + padding: const EdgeInsets.only(top: 16, right: 16), color: AppColor.colorBgDesktop, alignment: Alignment.centerLeft, child: (ButtonBuilder(_imagePaths.icComposeWeb) @@ -134,12 +134,7 @@ class MailboxView 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: CupertinoActivityIndicator(color: AppColor.colorTextButton)))) + ? Padding(padding: const EdgeInsets.only(top: 16), child: loadingWidget) : const SizedBox.shrink())); } @@ -149,9 +144,7 @@ class MailboxView extends GetWidget { key: const PageStorageKey('mailbox_list'), primary: false, shrinkWrap: true, - padding: EdgeInsets.only( - right: _responsiveUtils.isDesktop(context) ? 8 : 0, - left: _responsiveUtils.isDesktop(context) ? 20 : 0), + padding: const EdgeInsets.only(right: 16), children: [ Obx(() { if (controller.isSelectionEnabled() || _responsiveUtils.isDesktop(context)) { @@ -160,18 +153,18 @@ class MailboxView extends GetWidget { return _buildUserInformation(context); }), _buildLoadingView(), - Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false - ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root) + Obx(() => controller.defaultMailboxHasChild + ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultRootNode) : const SizedBox.shrink()), const SizedBox(height: 8), - Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false + Obx(() => controller.folderMailboxHasChild ? Column(children: const [ Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), SizedBox(height: 8), ]) : const SizedBox.shrink()), - Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false - ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root) + Obx(() => controller.folderMailboxHasChild + ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderRootNode) : const SizedBox.shrink()), const SizedBox(height: 8), const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), @@ -204,33 +197,44 @@ class MailboxView extends GetWidget { Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) { return Padding( - padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 12 : 16, right: _responsiveUtils.isDesktop(context) ? 4 : 12), + padding: const EdgeInsets.symmetric(vertical: 10), child: Row(children: [ - Expanded(child: Text(categories.getTitle(context), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 17, color: Colors.black, fontWeight: FontWeight.bold))), buildIconWeb( - splashRadius: 12, + 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), + color: AppColor.primaryColor, + fit: BoxFit.fill), tooltip: AppLocalizations.of(context).collapse, - onTap: () => controller.toggleMailboxCategories(categories)) + 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( - margin: EdgeInsets.zero, - padding: EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 8 : 16, left: _responsiveUtils.isDesktop(context) ? 0 : 12), + padding: EdgeInsets.only( + right: _responsiveUtils.isDesktop(context) ? 0 : 16, + left: _responsiveUtils.isDesktop(context) ? 0 : 12), child: TreeView( key: Key('${categories.keyValue}_mailbox_list'), - children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode))); + children: _buildListChildTileWidget( + context, + mailboxNode, + lastNode: lastNode))); } Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) { @@ -244,7 +248,8 @@ class MailboxView extends GetWidget { ]); } - List _buildListChildTileWidget(BuildContext context, MailboxNode parentNode, {MailboxNode? lastNode}) { + List _buildListChildTileWidget(BuildContext context, + MailboxNode parentNode, {MailboxNode? lastNode}) { return parentNode.childrenItems ?.map((mailboxNode) => mailboxNode.hasChildren() ? TreeViewChild( @@ -253,16 +258,25 @@ class MailboxView extends GetWidget { isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND, parent: Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode, mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value) - ..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item)) - ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode)) - ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode))) + ..addOnOpenMailboxFolderClick((mailboxNode) => + controller.openMailbox(context, mailboxNode.item)) + ..addOnExpandFolderActionClick((mailboxNode) => + controller.toggleMailboxFolder(mailboxNode)) + ..adOnMenuActionClick((position, mailboxNode) => + _openMailboxMenuAction(context, position, mailboxNode.item)) + ..addOnSelectMailboxFolderClick((mailboxNode) => + controller.selectMailboxNode(mailboxNode))) .build()), children: _buildListChildTileWidget(context, mailboxNode) ).build() : Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode, mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value) - ..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item)) - ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode))) + ..addOnOpenMailboxFolderClick((mailboxNode) => + controller.openMailbox(context, mailboxNode.item)) + ..adOnMenuActionClick((position, mailboxNode) => + _openMailboxMenuAction(context, position, mailboxNode.item)) + ..addOnSelectMailboxFolderClick((mailboxNode) => + controller.selectMailboxNode(mailboxNode))) .build()) ).toList() ?? []; } @@ -296,7 +310,7 @@ class MailboxView extends GetWidget { margin: EdgeInsets.zero, color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, child: ListView.builder( - padding: const EdgeInsets.only(left: 16, right: 8), + padding: const EdgeInsets.only(right: 16), key: const Key('list_mailbox_searched'), itemCount: listMailbox.length, shrinkWrap: true, @@ -334,4 +348,8 @@ class MailboxView extends GetWidget { ), ); } + + void _openMailboxMenuAction(BuildContext context, RelativeRect position, + PresentationMailbox presentationMailbox) { + } } \ No newline at end of file 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 c55862137..797cad195 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart @@ -1,5 +1,4 @@ import 'package:core/core.dart'; -import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -12,6 +11,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; typedef OnExpandFolderActionClick = void Function(MailboxNode); typedef OnOpenMailboxFolderClick = void Function(MailboxNode); typedef OnSelectMailboxFolderClick = void Function(MailboxNode); +typedef OnMenuActionClick = void Function(RelativeRect, MailboxNode); class MailBoxFolderTileBuilder { @@ -28,8 +28,9 @@ class MailBoxFolderTileBuilder { OnExpandFolderActionClick? _onExpandFolderActionClick; OnOpenMailboxFolderClick? _onOpenMailboxFolderClick; OnSelectMailboxFolderClick? _onSelectMailboxFolderClick; + OnMenuActionClick? _onMenuActionClick; - bool isHoverIcon = false; + bool isHoverItem = false; MailBoxFolderTileBuilder( this._context, @@ -55,123 +56,202 @@ class MailBoxFolderTileBuilder { _onSelectMailboxFolderClick = onSelectMailboxFolderClick; } + void adOnMenuActionClick(OnMenuActionClick onMenuActionClick) { + _onMenuActionClick = onMenuActionClick; + } + Widget build() { - return Theme( - data: ThemeData( - splashColor: Colors.transparent, - highlightColor: Colors.transparent), - child: Container( - key: const Key('mailbox_folder_tile'), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(kIsWeb ? 10 : 0), - color: backgroundColorItem - ), - padding: kIsWeb ? const EdgeInsets.only(left: 8, right: 4) : EdgeInsets.zero, - child: MediaQuery( - data: const MediaQueryData(padding: EdgeInsets.zero), - child: Column(children: [ - ListTile( - hoverColor: Colors.transparent, + if (BuildUtils.isWeb) { + return StatefulBuilder( + builder: (BuildContext context, StateSetter setState) { + return InkWell( onTap: () => allSelectMode == SelectMode.ACTIVE ? _onSelectMailboxFolderClick?.call(_mailboxNode) : _onOpenMailboxFolderClick?.call(_mailboxNode), - contentPadding: EdgeInsets.zero, - leading: _buildLeadingIcon(), - title: _buildTitleFolderItem(), - trailing: _mailboxNode.hasChildren() - ? Transform( - transform: Matrix4.translationValues(8.0, 0.0, 0.0), - child: 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, - tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND ? AppLocalizations.of(_context).collapse : AppLocalizations.of(_context).expand, - onTap: () => _onExpandFolderActionClick?.call(_mailboxNode))) - : _mailboxNode.item.getCountUnReadEmails().isNotEmpty - && mailboxDisplayed == MailboxDisplayed.mailbox - && !_mailboxNode.hasChildren() - ? const SizedBox(width: 40) - : const SizedBox.shrink() - ), - if (lastNode?.item.id != _mailboxNode.item.id && !kIsWeb) - Padding( - padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35), - child: const Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)), - ]) - ) - ) - ); + onHover: (value) => setState(() => isHoverItem = value), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(BuildUtils.isWeb ? 10 : 0), + color: backgroundColorItem), + padding: BuildUtils.isWeb + ? const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8) + : EdgeInsets.zero, + margin: const EdgeInsets.only(bottom: 4), + child: Column(mainAxisSize: MainAxisSize.min, children: [ + Row(children: [ + _buildLeadingMailboxItem(), + const SizedBox(width: BuildUtils.isWeb ? 4 : 8), + Expanded(child: _buildTitleFolderItem()), + const SizedBox(width: 8), + _buildTrailingMailboxItem() + ]), + _buildDivider(), + ]) + ), + ); + }); + } else { + return InkWell( + onTap: () => allSelectMode == SelectMode.ACTIVE + ? _onSelectMailboxFolderClick?.call(_mailboxNode) + : _onOpenMailboxFolderClick?.call(_mailboxNode), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(BuildUtils.isWeb ? 10 : 0), + color: backgroundColorItem), + padding: BuildUtils.isWeb + ? const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8) + : EdgeInsets.zero, + child: Column(mainAxisSize: MainAxisSize.min, children: [ + Row(children: [ + _buildLeadingMailboxItem(), + const SizedBox(width: BuildUtils.isWeb ? 4 : 8), + Expanded(child: _buildTitleFolderItem()), + const SizedBox(width: 8), + _buildTrailingMailboxItem() + ]), + _buildDivider(), + ]) + ), + ); + } + } + + 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()) + ]); + } + return _buildLeadingIcon(); + } + + Widget _buildTrailingMailboxItem() { + if (_mailboxNode.hasChildren() && !BuildUtils.isWeb) { + 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, + tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND + ? AppLocalizations.of(_context).collapse + : AppLocalizations.of(_context).expand, + onTap: () => _onExpandFolderActionClick?.call(_mailboxNode) + ); + } + + if (BuildUtils.isWeb && isHoverItem) { + return _buildMenuIcon(); + } + + if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty + && mailboxDisplayed == MailboxDisplayed.mailbox) { + return _buildCounter(); + } + + return const SizedBox(width: 20); } Widget _buildLeadingIcon() { - if (kIsWeb) { - return _mailboxNode.selectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon(); + if (BuildUtils.isWeb) { + return _buildMailboxIcon(); } else { - return allSelectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon(); + return allSelectMode == SelectMode.ACTIVE + ? _buildSelectModeIcon() + : _buildMailboxIcon(); } } Widget _buildTitleFolderItem() { - return Row( - children: [ - if (allSelectMode == SelectMode.ACTIVE) - Transform( - transform: Matrix4.translationValues(-24.0, 0.0, 0.0), - child: _buildMailboxIcon()), - Expanded(child: Transform( - transform: Matrix4.translationValues(allSelectMode == SelectMode.ACTIVE ? -16.0 : -20.0, 0.0, 0.0), - child: Text( - _mailboxNode.item.name?.name ?? '', - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.normal), - ))), - if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox) - Transform(transform: Matrix4.translationValues(25.0, 0.0, 0.0), child: _buildCounter()) - ], + return Text( + _mailboxNode.item.name?.name ?? '', + maxLines: 1, + overflow: CommonTextStyle.defaultTextOverFlow, + style: const TextStyle( + fontSize: 15, + color: AppColor.colorNameEmail, + fontWeight: FontWeight.normal), ); } Widget _buildCounter() { - return Text( - _mailboxNode.item.getCountUnReadEmails(), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(fontSize: 13, color: Colors.black, fontWeight: FontWeight.normal), + return Padding( + padding: const EdgeInsets.only(right: 10), + child: Text( + _mailboxNode.item.getCountUnReadEmails(), + maxLines: 1, + overflow: CommonTextStyle.defaultTextOverFlow, + style: const TextStyle( + fontSize: 13, + color: Colors.black, + fontWeight: FontWeight.normal), + ), ); } Widget _buildMailboxIcon() { - if (kIsWeb) { - return StatefulBuilder( - builder: (BuildContext context, StateSetter setState) { - return InkWell( - onTap: () {}, - onHover: (value) => setState(() => isHoverIcon = value), - child: isHoverIcon - ? _buildSelectModeIcon() - : SvgPicture.asset(_mailboxNode.item.getMailboxIcon(_imagePaths), width: 28, height: 28, fit: BoxFit.fill) + return SvgPicture.asset(_mailboxNode.item.getMailboxIcon(_imagePaths)); + } + + Widget _buildMenuIcon() { + return Padding( + padding: const EdgeInsets.only(right: 8), + child: InkWell( + onTapDown: (detail) { + final screenSize = MediaQuery.of(_context).size; + final offset = detail.globalPosition; + final position = RelativeRect.fromLTRB( + offset.dx, + offset.dy, + screenSize.width - offset.dx, + screenSize.height - offset.dy, ); - }); - } else { - return SvgPicture.asset(_mailboxNode.item.getMailboxIcon(_imagePaths), width: 28, height: 28, fit: BoxFit.fill); - } + _onMenuActionClick?.call(position, _mailboxNode); + }, + onTap: () => {}, + child: SvgPicture.asset(_imagePaths.icComposerMenu, + width: 20, + height: 20, + fit: BoxFit.fill)), + ); } Widget _buildSelectModeIcon() { - return Container( - color: Colors.transparent, - child: Transform( - transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0), - child: buildIconWeb( - icon: SvgPicture.asset( - _mailboxNode.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected, - width: kIsWeb ? 20 : 24, - height: kIsWeb ? 20 : 24, - fit: BoxFit.fill), - onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode))), + return InkWell( + onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode), + child: SvgPicture.asset( + _mailboxNode.selectMode == SelectMode.ACTIVE + ? _imagePaths.icSelected + : _imagePaths.icUnSelected, + width: BuildUtils.isWeb ? 20 : 24, + height: BuildUtils.isWeb ? 20 : 24, + fit: BoxFit.fill) ); } @@ -179,14 +259,31 @@ class MailBoxFolderTileBuilder { if (mailboxDisplayed == MailboxDisplayed.destinationPicker) { return Colors.white; } else { - if (kIsWeb) { - if (mailboxNodeSelected?.id == _mailboxNode.item.id) { + if (BuildUtils.isWeb) { + if (mailboxNodeSelected?.id == _mailboxNode.item.id || isHoverItem) { return AppColor.colorBgMailboxSelected; } - return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white; + return _responsiveUtils.isDesktop(_context) + ? AppColor.colorBgDesktop + : Colors.white; } else { return Colors.white; } } } + + Widget _buildDivider() { + if (lastNode?.item.id != _mailboxNode.item.id && !BuildUtils.isWeb) { + return Padding( + padding: EdgeInsets.only( + left: allSelectMode == SelectMode.ACTIVE ? 50 : 35), + child: const Divider( + color: AppColor.lineItemListColor, + height: 0.5, + thickness: 0.2 + ) + ); + } + return const SizedBox.shrink(); + } } \ No newline at end of file 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 7eba59240..fa3fe7e44 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -49,8 +49,10 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { responsiveUtils: responsiveUtils, desktop: Column(children: [ Row(children: [ - Container(width: 256, color: Colors.white, - padding: const EdgeInsets.only(top: 25, bottom: 25, left: 32), + Container( + width: responsiveUtils.defaultSizeMenu, + color: Colors.white, + padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28), child: Row(children: [ (SloganBuilder(arrangedByHorizontal: true) ..setSloganText(AppLocalizations.of(context).app_name) diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index cfc6f9ec9..d65bb2c54 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -79,7 +79,8 @@ class ThreadView extends GetWidget with AppLoaderMixin, else const SizedBox.shrink(), Obx(() { - if (controller.isMailboxTrash && controller.emailList.isNotEmpty + if (controller.isMailboxTrash + && controller.emailList.isNotEmpty && !controller.isSearchActive()) { return _buildEmptyTrashButton(context); } else { @@ -99,7 +100,7 @@ class ThreadView extends GetWidget with AppLoaderMixin, Expanded(child: Container( alignment: Alignment.center, margin: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) - ? const EdgeInsets.only(left: 32, right: 24, top: 16, bottom: 24) + ? const EdgeInsets.only(right: 16, top: 16, bottom: 16) : EdgeInsets.zero, decoration: BoxDecoration( borderRadius: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) @@ -550,8 +551,8 @@ class ThreadView extends GetWidget with AppLoaderMixin, border: Border.all(color: AppColor.colorLineLeftEmailView), color: Colors.white), margin: EdgeInsets.only( - left: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 32 : 16, - right: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 20 : 16, + left: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16, + right: 16, bottom: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16, top: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 16 : 0), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),