diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index 0e7af7e33..6f7bb06c9 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -317,7 +317,7 @@ class MailboxView extends GetWidget { margin: EdgeInsets.only( left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 16), - padding: const EdgeInsets.only(left: 12, right: 8), + padding: const EdgeInsets.only(left: 12), child: TreeView( key: Key('${categories.keyValue}_mailbox_list'), children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode))); diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index a90a935ac..a38787bda 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -34,15 +34,20 @@ class MailboxView extends GetWidget with AppLoaderMixin, Popu body: Column( children: [ if (!_responsiveUtils.isDesktop(context)) _buildLogoApp(context), - if (!_responsiveUtils.isDesktop(context)) const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), + if (!_responsiveUtils.isDesktop(context)) + const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), Expanded(child: Container( - padding: const EdgeInsets.only(left: 16), + padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 16 : 0), color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, child: Column(children: [ if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context), - Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : const SizedBox.shrink()), + Obx(() => controller.isSearchActive() + ? _buildInputSearchFormWidget(context) + : const SizedBox.shrink()), Expanded(child: Obx(() => Container( - color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, + color: _responsiveUtils.isDesktop(context) + ? AppColor.colorBgDesktop + : Colors.white, padding: EdgeInsets.zero, margin: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 0), child: RefreshIndicator( @@ -147,7 +152,7 @@ class MailboxView extends GetWidget with AppLoaderMixin, Popu key: const PageStorageKey('mailbox_list'), primary: false, shrinkWrap: true, - padding: const EdgeInsets.only(right: 16), + padding: EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 16 : 0), children: [ Obx(() { if (controller.isSelectionEnabled() || _responsiveUtils.isDesktop(context)) { @@ -200,7 +205,9 @@ class MailboxView extends GetWidget with AppLoaderMixin, Popu Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) { return Padding( - padding: const EdgeInsets.symmetric(vertical: 10), + padding: EdgeInsets.only(top: 10, bottom: 10, + left: _responsiveUtils.isDesktop(context) ? 0 : 16, + right: _responsiveUtils.isDesktop(context) ? 0 : 16), child: Row(children: [ buildIconWeb( splashRadius: 5, @@ -231,7 +238,7 @@ class MailboxView extends GetWidget with AppLoaderMixin, Popu return Container( padding: EdgeInsets.only( right: _responsiveUtils.isDesktop(context) ? 0 : 16, - left: _responsiveUtils.isDesktop(context) ? 0 : 12), + left: _responsiveUtils.isDesktop(context) ? 0 : 16), child: TreeView( key: Key('${categories.keyValue}_mailbox_list'), children: _buildListChildTileWidget( @@ -286,7 +293,7 @@ class MailboxView extends GetWidget with AppLoaderMixin, Popu Widget _buildInputSearchFormWidget(BuildContext context) { return Padding( - padding: const EdgeInsets.only(left: 8, top: 16), + padding: const EdgeInsets.only(top: 16), child: Row( children: [ buildIconWeb( 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 797cad195..7f3045cef 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart @@ -62,56 +62,75 @@ class MailBoxFolderTileBuilder { Widget build() { if (BuildUtils.isWeb) { - return StatefulBuilder( - builder: (BuildContext context, StateSetter setState) { - return InkWell( - onTap: () => allSelectMode == SelectMode.ACTIVE - ? _onSelectMailboxFolderClick?.call(_mailboxNode) - : _onOpenMailboxFolderClick?.call(_mailboxNode), - 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: [ + if (mailboxDisplayed == MailboxDisplayed.mailbox) { + return StatefulBuilder( + builder: (BuildContext context, StateSetter setState) { + return InkWell( + onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode), + onHover: (value) => setState(() => isHoverItem = value), + 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: BuildUtils.isWeb ? 4 : 8), + const SizedBox(width: 4), Expanded(child: _buildTitleFolderItem()), const SizedBox(width: 8), _buildTrailingMailboxItem() - ]), - _buildDivider(), - ]) - ), - ); - }); + ]) + ), + ); + }); + } 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() + ]) + ), + ); + } } 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(), - ]) + child: ClipRRect( + borderRadius: const BorderRadius.all(Radius.circular(14)), + child: Container( + color: Colors.white, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.symmetric( + vertical: _mailboxNode.hasChildren() ? 8 : 15), + child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ + _buildLeadingMailboxItem(), + const SizedBox(width: 8), + Expanded(child: _buildTitleFolderItem()), + const SizedBox(width: 8), + _buildTrailingMailboxItem() + ]), + ), + _buildDivider(), + ] + ) + ) ), ); } @@ -143,39 +162,63 @@ class MailBoxFolderTileBuilder { transform: Matrix4.translationValues(-4.0, 0.0, 0.0), child: _buildLeadingIcon()) ]); + } else { + return _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) { + if (isHoverItem) { + return _buildMenuIcon(); + } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty + && mailboxDisplayed == MailboxDisplayed.mailbox) { + return Padding( + padding: const EdgeInsets.only(right: 10), + child: _buildCounter(), + ); + } else { + return const SizedBox(width: 20); + } + } else { + if (_mailboxNode.hasChildren()) { + return Padding( + padding: const EdgeInsets.only(right: 4), + child: Row( + children: [ + if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty + && mailboxDisplayed == MailboxDisplayed.mailbox) + _buildCounter(), + 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: 20, + iconPadding: EdgeInsets.zero, + minSize: 40, + tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND + ? AppLocalizations.of(_context).collapse + : AppLocalizations.of(_context).expand, + onTap: () => _onExpandFolderActionClick?.call(_mailboxNode) + ), + ], + ), + ); + } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty + && mailboxDisplayed == MailboxDisplayed.mailbox) { + return Padding( + padding: const EdgeInsets.only(right: 20), + child: _buildCounter(), + ); + } else { + return const SizedBox(width: 20); + } } - - if (BuildUtils.isWeb && isHoverItem) { - return _buildMenuIcon(); - } - - if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty - && mailboxDisplayed == MailboxDisplayed.mailbox) { - return _buildCounter(); - } - - return const SizedBox(width: 20); } Widget _buildLeadingIcon() { @@ -201,22 +244,23 @@ class MailBoxFolderTileBuilder { } Widget _buildCounter() { - 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), - ), + return Text( + _mailboxNode.item.getCountUnReadEmails(), + maxLines: 1, + overflow: CommonTextStyle.defaultTextOverFlow, + style: const TextStyle( + fontSize: 13, + color: Colors.black, + fontWeight: FontWeight.normal), ); } Widget _buildMailboxIcon() { - return SvgPicture.asset(_mailboxNode.item.getMailboxIcon(_imagePaths)); + return SvgPicture.asset( + _mailboxNode.item.getMailboxIcon(_imagePaths), + width: BuildUtils.isWeb ? 20 : 24, + height: BuildUtils.isWeb ? 20 : 24, + fit: BoxFit.fill); } Widget _buildMenuIcon() { @@ -273,11 +317,10 @@ class MailBoxFolderTileBuilder { } 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( + if (lastNode?.item.id != _mailboxNode.item.id) { + return const Padding( + padding: EdgeInsets.only(left: 30), + child: Divider( color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2