diff --git a/assets/images/ic_menu_drawer.svg b/assets/images/ic_menu_drawer.svg new file mode 100644 index 000000000..80f9ab02c --- /dev/null +++ b/assets/images/ic_menu_drawer.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index daaca6e7d..5a453dd62 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -107,6 +107,7 @@ extension AppColor on Color { static const colorAvatar = Color(0xFFDE5E5E); static const colorFocusButton = Color(0x14818C99); static const colorBorderEmailAddressInvalid = Color(0xFFFF3347); + static const colorBgMailboxSelected = Color(0xFF99E4E8EC); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index 71973ffe6..af69a5171 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -87,6 +87,7 @@ class ImagePaths { String get icEmpty => _getImagePath('ic_empty.svg'); String get icNotConnection => _getImagePath('ic_not_connection.svg'); String get icDeleteTrash => _getImagePath('ic_delete_trash.svg'); + String get icMenuDrawer => _getImagePath('ic_menu_drawer.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index b8862c264..e2bc07b0b 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -9,7 +9,7 @@ class ResponsiveUtils { final int minTabletLargeWidth = 900; final double defaultSizeDrawerWidthMobileTablet = 375; - final double defaultSizeDrawerWidthWeb = 320; + final double defaultSizeDrawerWidthWeb = 262; final double _loginTextFieldWidthSmallScreen = 280.0; final double _loginTextFieldWidthLargeScreen = 320.0; diff --git a/core/lib/presentation/views/button/icon_button_web.dart b/core/lib/presentation/views/button/icon_button_web.dart index cba9b9d7e..5b2738a53 100644 --- a/core/lib/presentation/views/button/icon_button_web.dart +++ b/core/lib/presentation/views/button/icon_button_web.dart @@ -20,7 +20,7 @@ Widget buildIconWeb({ icon: icon, iconSize: iconSize, padding: iconPadding ?? EdgeInsets.all(8.0), - splashRadius: splashRadius ?? 20, + splashRadius: splashRadius ?? 15, tooltip: tooltip ?? '', onPressed: onTap) ); diff --git a/core/lib/presentation/views/search/search_bar_view.dart b/core/lib/presentation/views/search/search_bar_view.dart index 29cb8acb2..4c4d29f1e 100644 --- a/core/lib/presentation/views/search/search_bar_view.dart +++ b/core/lib/presentation/views/search/search_bar_view.dart @@ -1,6 +1,8 @@ import 'package:core/core.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; import 'package:flutter_svg/flutter_svg.dart'; typedef OnOpenSearchViewAction = Function(); @@ -61,30 +63,20 @@ class SearchBarView { child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ - _buildSearchButton(), - Expanded(child: Text( - _hintTextSearch ?? '', - maxLines: 1, - style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar))) + buildIconWeb( + splashRadius: 12, + icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill), + onTap: () => _onOpenSearchViewAction?.call()), + Expanded(child: + Transform(transform: Matrix4.translationValues(-5, 0.0, 0.0), + child: Text( + _hintTextSearch ?? '', + maxLines: 1, + style: TextStyle(fontSize: kIsWeb ? 15 : 17, color: AppColor.colorHintSearchBar)))) ] ) ) ), ); } - - Widget _buildSearchButton() { - return Material( - color: Colors.transparent, - shape: CircleBorder(), - child: Padding( - padding: EdgeInsets.only(left: 2), - child: IconButton( - splashRadius: 20, - icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill), - onPressed: () => _onOpenSearchViewAction?.call() - ) - ) - ); - } } \ No newline at end of file diff --git a/lib/features/base/base_mailbox_controller.dart b/lib/features/base/base_mailbox_controller.dart index c0da162e5..fe31c7f9d 100644 --- a/lib/features/base/base_mailbox_controller.dart +++ b/lib/features/base/base_mailbox_controller.dart @@ -14,6 +14,8 @@ abstract class BaseMailboxController extends BaseController { final folderMailboxTree = MailboxTree(MailboxNode.root()).obs; final defaultMailboxTree = MailboxTree(MailboxNode.root()).obs; + final listMailboxNodeSelected = [].obs; + final listPresentationMailboxSelected = [].obs; List allMailboxes = []; @@ -55,6 +57,13 @@ abstract class BaseMailboxController extends BaseController { ? SelectMode.ACTIVE : SelectMode.INACTIVE; + + if (newSelectMode == SelectMode.INACTIVE) { + listMailboxNodeSelected.removeWhere((mailboxNode) => mailboxNode.item.id == mailboxNodeSelected.item.id); + } else { + listMailboxNodeSelected.add(mailboxNodeSelected); + } + if (defaultMailboxTree.value.updateSelectedNode(mailboxNodeSelected, newSelectMode) != null) { log('selectMailboxNode() refresh defaultMailboxTree'); defaultMailboxTree.refresh(); diff --git a/lib/features/mailbox/presentation/mailbox_controller.dart b/lib/features/mailbox/presentation/mailbox_controller.dart index 28030235f..dbbbe3ff8 100644 --- a/lib/features/mailbox/presentation/mailbox_controller.dart +++ b/lib/features/mailbox/presentation/mailbox_controller.dart @@ -2,6 +2,7 @@ import 'dart:async'; import 'package:core/core.dart'; import 'package:dartz/dartz.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -168,6 +169,8 @@ class MailboxController extends BaseMailboxController { _openMailboxEventController.stream.throttleTime(Duration(milliseconds: 800)).listen((event) { _handleOpenMailbox(event.buildContext, event.presentationMailbox); }); + + _initCollapseMailboxCategories(); } @override @@ -225,6 +228,16 @@ class MailboxController extends BaseMailboxController { @override void onError(error) {} + void _initCollapseMailboxCategories() { + if (currentContext != null) { + if (kIsWeb && (_responsiveUtils.isMobile(currentContext!)) || _responsiveUtils.isTablet(currentContext!)) { + mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode( + defaultMailbox: ExpandMode.COLLAPSE, + folderMailbox: ExpandMode.COLLAPSE); + } + } + } + void getAllMailboxAction(AccountId accountId) async { consumeState(_getAllMailboxInteractor.execute(accountId)); } @@ -367,12 +380,13 @@ class MailboxController extends BaseMailboxController { void enableSearch() { _cancelSelectMailbox(); + listMailboxNodeSelected.clear(); searchState.value = searchState.value.enableSearchState(); } void disableSearch(BuildContext context) { _cancelSelectMailbox(); - + listPresentationMailboxSelected.clear(); listMailboxSearched.clear(); searchState.value = searchState.value.disableSearchState(); searchQuery.value = SearchQuery.initial(); @@ -384,10 +398,12 @@ class MailboxController extends BaseMailboxController { searchQuery.value = SearchQuery.initial(); searchFocus.requestFocus(); listMailboxSearched.clear(); + listPresentationMailboxSelected.clear(); } void searchMailbox(String value) { searchQuery.value = SearchQuery(value); + listPresentationMailboxSelected.clear(); _searchMailboxAction(allMailboxes, searchQuery.value); } @@ -418,13 +434,17 @@ class MailboxController extends BaseMailboxController { bool isSelectionEnabled() => currentSelectMode.value == SelectMode.ACTIVE; - void selectMailbox(BuildContext context, PresentationMailbox mailboxSelected) { - if (isSearchActive()) { - listMailboxSearched.value = listMailboxSearched - .map((mailbox) => mailbox.id == mailboxSelected.id - ? mailbox.toggleSelectPresentationMailbox() - : mailbox) - .toList(); + void selectMailboxSearched(BuildContext context, PresentationMailbox mailboxSelected) { + listMailboxSearched.value = listMailboxSearched + .map((mailbox) => mailbox.id == mailboxSelected.id ? mailbox.toggleSelectPresentationMailbox() : mailbox) + .toList(); + + if (kIsWeb) { + if (mailboxSelected.selectMode == SelectMode.ACTIVE) { + listPresentationMailboxSelected.removeWhere((mailbox) => mailbox.id == mailboxSelected.id); + } else { + listPresentationMailboxSelected.add(mailboxSelected); + } } } @@ -438,6 +458,10 @@ class MailboxController extends BaseMailboxController { folderMailboxTree.value.updateNodesUIMode(SelectMode.INACTIVE, ExpandMode.COLLAPSE); } currentSelectMode.value = SelectMode.INACTIVE; + if (kIsWeb) { + listPresentationMailboxSelected.clear(); + listMailboxNodeSelected.clear(); + } } List get listMailboxSelected { diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index a9df1f1c4..aaa91b7ec 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -418,7 +418,7 @@ class MailboxView extends GetWidget { allSelectMode: controller.currentSelectMode.value, lastMailbox: controller.listMailboxSearched.last) ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox)) - ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailbox(context, mailbox))) + ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailboxSearched(context, mailbox))) .build()) ) )); diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index 096396df1..4a697602b 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -6,6 +6,7 @@ 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/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'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart'; @@ -21,195 +22,102 @@ class MailboxView extends GetWidget { @override Widget build(BuildContext context) { - return _buildBodyMailbox(context); - } - - Widget _buildBodyMailbox(BuildContext context) { - return SafeArea( - top: _responsiveUtils.isMobile(context) ? true : false, - bottom: false, - left: false, - right: false, - child: ClipRRect( - borderRadius: BorderRadius.only( - topRight: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0), - topLeft: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0)), - child: Drawer( - child: Scaffold( - backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, - body: Column( - children: [ - if (_responsiveUtils.isDesktop(context)) - Container( - color: Colors.white, - padding: EdgeInsets.only(left: 20, top: 20, bottom: 24), - child: (SloganBuilder(arrangedByHorizontal: true) - ..setSloganText(AppLocalizations.of(context).app_name) - ..setSloganTextAlign(TextAlign.center) - ..setSloganTextStyle(TextStyle(color: Colors.black, fontSize: 25, fontWeight: FontWeight.bold)) - ..setSizeLogo(28) - ..setLogo(_imagePaths.icLogoTMail)) - .build()), - if (!_responsiveUtils.isDesktop(context)) _buildHeaderMailbox(context), - if (_responsiveUtils.isDesktop(context)) - Row(children: [ - Expanded(child: Container( - padding: EdgeInsets.only(top: 16, left: 20), - color: AppColor.colorBgDesktop, - alignment: Alignment.centerLeft, - child: (ButtonBuilder(_imagePaths.icCompose) - ..key(Key('button_compose_email')) - ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(25), color: AppColor.colorTextButton)) - ..paddingIcon(EdgeInsets.only(right: 8)) - ..iconColor(Colors.white) - ..maxWidth(140) - ..size(20) - ..radiusSplash(10) - ..padding(EdgeInsets.symmetric(vertical: 13)) - ..textStyle(TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w500)) - ..onPressActionClick(() => controller.mailboxDashBoardController.composeEmailAction()) - ..text(AppLocalizations.of(context).compose, isVertical: false)) - .build()) - ), - Obx(() { - if (controller.isSearchActive()) { - return controller.listMailboxSearched.isNotEmpty - ? Padding( - padding: EdgeInsets.only(top: 16), - child: _buildEditMailboxButton(context, controller.isSelectionEnabled())) - : SizedBox.shrink(); - } else { - return Padding( - padding: EdgeInsets.only(top: 16), - child: _buildEditMailboxButton(context, controller.isSelectionEnabled())); - } - }) - ]), - Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context) - ? Row(children: [ - Expanded(child: _buildSearchBarWidget(context)), - buildIconWeb( - icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill), - tooltip: AppLocalizations.of(context).new_mailbox, - onTap: () => controller.goToCreateNewMailboxView()), - ]) - : SizedBox.shrink()), - Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()), - Expanded(child: Obx(() => Container( - color: _responsiveUtils.isDesktop(context) - ? Colors.transparent - : controller.isSearchActive() ? Colors.white : AppColor.colorBgMailbox, - child: RefreshIndicator( - color: AppColor.primaryColor, - onRefresh: () async => controller.refreshAllMailbox(), - child: controller.isSearchActive() - ? _buildListMailboxSearched(context, controller.listMailboxSearched) - : _buildListMailbox(context)), - ))), - Obx(() => controller.isSelectionEnabled() - ? _buildOptionSelectionMailbox(context) - : SizedBox.shrink()), - ] - ), - ) - ) - ) - ); - } - - Widget _buildHeaderMailbox(BuildContext context) { - return Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Padding( - padding: EdgeInsets.only( - top: _responsiveUtils.isMobile(context) ? 14 : 30, - bottom: 10), - child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ - !_responsiveUtils.isDesktop(context) && !_responsiveUtils.isTabletLarge(context) - ? _buildCloseScreenButton(context) - : SizedBox(width: 50), + return Drawer( + child: Scaffold( + backgroundColor: Colors.white, + body: Column( + children: [ + _buildLogoApp(context), + if (!_responsiveUtils.isDesktop(context)) Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), + Expanded(child: Container( + padding: EdgeInsets.zero, + color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, + child: Column(children: [ + if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context), + SizedBox(height: 16), + Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()), + Expanded(child: Obx(() => Container( + color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, + padding: EdgeInsets.zero, + child: RefreshIndicator( + color: AppColor.primaryColor, + onRefresh: () async => controller.refreshAllMailbox(), + child: controller.isSearchActive() + ? _buildListMailboxSearched(context, controller.listMailboxSearched) + : _buildListMailbox(context)), + ))), + ]), + )), Obx(() { if (controller.isSearchActive()) { - return controller.listMailboxSearched.isNotEmpty - ? SizedBox(width: controller.isSelectionEnabled() ? 49 : 40) + return controller.listPresentationMailboxSelected.isNotEmpty + ? _buildOptionSelectionMailbox(context) : SizedBox.shrink(); } else { - return SizedBox(width: controller.isSelectionEnabled() ? 49 : 40); + return controller.listMailboxNodeSelected.isNotEmpty + ? _buildOptionSelectionMailbox(context) + : SizedBox.shrink(); } }), - Expanded(child: Text( - AppLocalizations.of(context).folders, - textAlign: TextAlign.center, - style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700))), - Obx(() { - if (controller.isSearchActive()) { - return controller.listMailboxSearched.isNotEmpty - ? _buildEditMailboxButton(context, controller.isSelectionEnabled()) - : SizedBox(width: 25); - } else { - return _buildEditMailboxButton(context, controller.isSelectionEnabled()); - } - }), - _buildAddNewFolderButton(context), - ])), - Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), - ] - ); - } - - Widget _buildCloseScreenButton(BuildContext context) { - return Padding( - padding: EdgeInsets.only(left: 16, right: 16), - child: IconButton( - key: Key('mailbox_close_button'), - onPressed: () => controller.closeMailboxScreen(context), - icon: SvgPicture.asset(_imagePaths.icCloseMailbox, width: 30, height: 30, fit: BoxFit.fill))); - } - - Widget _buildAddNewFolderButton(BuildContext context) { - return Padding( - padding: EdgeInsets.only(right: 10), - child: IconButton( - key: Key('create_new_mailbox_button'), - onPressed: () => controller.goToCreateNewMailboxView(), - icon: SvgPicture.asset(_imagePaths.icAddNewFolder, width: 30, height: 30, fit: BoxFit.fill))); - } - - Widget _buildEditMailboxButton(BuildContext context, bool isSelectionEnabled) { - return Material( - shape: CircleBorder(), - color: Colors.transparent, - child: TextButton( - child: Text( - !isSelectionEnabled ? AppLocalizations.of(context).edit : AppLocalizations.of(context).cancel, - style: TextStyle(fontSize: 17, color: AppColor.colorTextButton)), - onPressed: () => !isSelectionEnabled - ? controller.enableSelectionMailbox() - : controller.disableSelectionMailbox() + ] + ), ) ); } - Widget _buildUserInformationWidget(BuildContext context) { - return Padding( - padding: EdgeInsets.only(left: 16, top: 8.0, right: 16), - child: Obx(() => (UserInformationWidgetBuilder( - _imagePaths, - context, - controller.mailboxDashBoardController.userProfile.value) - ..addOnLogoutAction(() => controller.mailboxDashBoardController.logoutAction())) - .build())); + Widget _buildLogoApp(BuildContext context) { + return Container( + color: Colors.white, + padding: EdgeInsets.only( + top: _responsiveUtils.isDesktop(context) ? 25 : 16, + bottom: _responsiveUtils.isDesktop(context) ? 25 : 16, + left: _responsiveUtils.isDesktop(context) ? 32 : 16), + child: Row(children: [ + (SloganBuilder(arrangedByHorizontal: true) + ..setSloganText(AppLocalizations.of(context).app_name) + ..setSloganTextAlign(TextAlign.center) + ..setSloganTextStyle(TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)) + ..setSizeLogo(24) + ..setLogo(_imagePaths.icLogoTMail)) + .build(), + Obx(() { + if (controller.mailboxDashBoardController.appInformation.value != null) { + return _buildVersionInformation(context, controller.mailboxDashBoardController.appInformation.value!); + } else { + return SizedBox.shrink(); + } + }), + ]) + ); + } + + Widget _buildComposerButton(BuildContext context) { + return Container( + padding: EdgeInsets.only(top: 16, right: 16, left: 20), + color: AppColor.colorBgDesktop, + alignment: Alignment.centerLeft, + child: (ButtonBuilder(_imagePaths.icCompose) + ..key(Key('button_compose_email')) + ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(25), color: AppColor.colorTextButton)) + ..paddingIcon(EdgeInsets.only(right: 8)) + ..iconColor(Colors.white) + ..maxWidth(140) + ..size(20) + ..radiusSplash(10) + ..padding(EdgeInsets.symmetric(vertical: 13)) + ..textStyle(TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w500)) + ..onPressActionClick(() => controller.mailboxDashBoardController.composeEmailAction()) + ..text(AppLocalizations.of(context).compose, isVertical: false)) + .build()); } Widget _buildSearchBarWidget(BuildContext context) { return Padding( - padding: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 12, bottom: 16, left: 16, right: 16), + padding: EdgeInsets.only(top: 16, bottom: 16, right: 4, left: _responsiveUtils.isDesktop(context) ? 0 : 12), child: (SearchBarView(_imagePaths) - ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes) - ..addOnOpenSearchViewAction(() => controller.enableSearch())) - .build()); + ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes) + ..addOnOpenSearchViewAction(() => controller.enableSearch())) + .build()); } Widget _buildLoadingView() { @@ -231,222 +139,191 @@ class MailboxView extends GetWidget { key: PageStorageKey('mailbox_list'), primary: false, shrinkWrap: true, - padding: EdgeInsets.zero, + padding: EdgeInsets.only( + right: _responsiveUtils.isDesktop(context) ? 8 : 0, + left: _responsiveUtils.isDesktop(context) ? 20 : 0), children: [ - Obx(() => (controller.isSelectionEnabled() && _responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context)) - || _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildUserInformationWidget(context)), - Obx(() => (controller.isSelectionEnabled() && _responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context)) - || _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildLineSpaceUserInformation()), - if (!_responsiveUtils.isDesktop(context)) _buildSearchBarWidget(context), - _buildLoadingView(), - Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false - ? Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(14), - color: Colors.white), - margin: EdgeInsets.only(left: 16, right: 16, top: 4), - child: _buildDefaultMailbox(context)) - : SizedBox.shrink()), - Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false - ? Padding( - padding: EdgeInsets.only(left: 25, top: 26, bottom: 12), - child: Text( - AppLocalizations.of(context).folders, - maxLines: 1, - style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))) - : SizedBox.shrink()), - Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(14), - color: Colors.white), - margin: EdgeInsets.only(left: 16, right: 16, bottom: 30), - child: _buildFolderMailbox(context), - ), Obx(() { - if (controller.mailboxDashBoardController.appInformation.value != null) { - return _buildVersionInformation(context, controller.mailboxDashBoardController.appInformation.value!); - } else { + if ((controller.isSelectionEnabled() + && _responsiveUtils.isMobile(context) + && _responsiveUtils.isLandscape(context)) + || _responsiveUtils.isDesktop(context)) { return SizedBox.shrink(); } + return _buildUserInformation(context); }), + _buildLoadingView(), + Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false + ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root) + : SizedBox.shrink()), + SizedBox(height: 8), + Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false + ? Column(children: [ + Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), + SizedBox(height: 8), + ]) + : SizedBox.shrink()), + Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false + ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root) + : SizedBox.shrink()), + Obx(() => !controller.isSearchActive() + ? Row(children: [ + Expanded(child: _buildSearchBarWidget(context)), + Padding( + padding: EdgeInsets.only(right: 8), + child: buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill), + tooltip: AppLocalizations.of(context).new_mailbox, + onTap: () => controller.goToCreateNewMailboxView())), + ]) + : SizedBox.shrink()), ] ); } - Widget _buildLineSpaceUserInformation() { + Widget _buildUserInformation(BuildContext context) { + return Container( + padding: EdgeInsets.symmetric(vertical: 10), + child: Column(children: [ + Padding( + padding: EdgeInsets.only(left: 16, bottom: 10), + child: (UserInformationWidgetBuilder(_imagePaths, context, controller.mailboxDashBoardController.userProfile.value) + ..addOnLogoutAction(() => controller.mailboxDashBoardController.logoutAction())) + .build()), + Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2) + ]), + ); + } + + Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) { return Padding( - padding: EdgeInsets.only(top: 16), - child: Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2)); + padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 12 : 16, right: _responsiveUtils.isDesktop(context) ? 4 : 12), + child: Row(children: [ + Expanded(child: Text(categories.getTitle(context), + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontSize: 17, color: Colors.black, fontWeight: FontWeight.bold))), + buildIconWeb( + splashRadius: 12, + icon: SvgPicture.asset( + categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND + ? _imagePaths.icExpandFolder + : _imagePaths.icCollapseFolder, + color: AppColor.primaryColor, fit: BoxFit.fill), + tooltip: AppLocalizations.of(context).collapse, + onTap: () => controller.toggleMailboxCategories(categories)) + ])); } - Widget _buildDefaultMailbox(BuildContext context) { - return Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false - ? Transform( - transform: Matrix4.translationValues(-4.0, 0.0, 0.0), - child: Padding( - padding: EdgeInsets.only(top: 10, bottom: 10), - child: TreeView( - startExpanded: false, - key: Key('default_mailbox_list'), - children: _buildListChildTileWidget(context, controller.defaultMailboxTree.value.root))) - ) - : SizedBox.shrink() - ); + 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), + child: TreeView( + key: Key('${categories.keyValue}_mailbox_list'), + children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode))); } - Widget _buildFolderMailbox(BuildContext context) { - return Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false - ? Transform( - transform: Matrix4.translationValues(-4.0, 0.0, 0.0), - child: Padding( - padding: EdgeInsets.only(top: 10, bottom: 10), - child: TreeView( - startExpanded: false, - key: Key('folder_mailbox_list'), - children: _buildListChildTileWidget(context, controller.folderMailboxTree.value.root))) - ) - : SizedBox.shrink() - ); + Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) { + return Column(children: [ + _buildHeaderMailboxCategory(context, categories), + AnimatedContainer( + duration: Duration(milliseconds: 400), + child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND + ? _buildBodyMailboxCategory(context, categories, mailboxNode) + : Offstage()) + ]); } - List _buildListChildTileWidget(BuildContext context, MailboxNode parentNode) { + List _buildListChildTileWidget(BuildContext context, MailboxNode parentNode, {MailboxNode? lastNode}) { return parentNode.childrenItems ?.map((mailboxNode) => mailboxNode.hasChildren() - ? Padding( - padding: EdgeInsets.only(left: 16), - child: TreeViewChild( - context, - key: Key('children_tree_mailbox_child'), - isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND, - parent: Obx(() => (MailBoxFolderTileBuilder( + ? TreeViewChild( context, - _imagePaths, - mailboxNode, - allSelectMode: controller.currentSelectMode.value) + key: Key('children_tree_mailbox_child'), + 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))) + .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)) - ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode)) ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode))) - .build()), - children: _buildListChildTileWidget(context, mailboxNode) - ).build()) - : Padding( - padding: EdgeInsets.only(left: 16), - child: Obx(() => (MailBoxFolderTileBuilder( - context, - _imagePaths, - mailboxNode, - allSelectMode: controller.currentSelectMode.value) - ..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item)) - ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode))) - .build(), - ) - ) + .build()) ).toList() ?? []; } Widget _buildInputSearchFormWidget(BuildContext context) { return Padding( - padding: EdgeInsets.only(top: 16, bottom: 16), + padding: EdgeInsets.only(left: 8), child: Row( children: [ - _buildBackSearchButton(context), - Expanded(child: (SearchAppBarWidget( - context, - _imagePaths, - _responsiveUtils, - controller.searchQuery.value, - controller.searchFocus, - controller.searchInputController, - hasBackButton: false, - hasSearchButton: true) - ..addPadding(EdgeInsets.zero) - ..setMargin(EdgeInsets.only(right: 16)) - ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar)) - ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill)) - ..setHintText(AppLocalizations.of(context).hint_search_mailboxes) - ..addOnClearTextSearchAction(() => controller.clearSearchText()) - ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query)) - ..addOnSearchTextAction((query) => controller.searchMailbox(query))) - .build()) + buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill), + onTap: () => controller.disableSearch(context)), + Expanded(child: (SearchAppBarWidget(context, _imagePaths, _responsiveUtils, controller.searchQuery.value, + controller.searchFocus, controller.searchInputController, hasBackButton: false, hasSearchButton: true) + ..addPadding(EdgeInsets.zero) + ..setMargin(EdgeInsets.only(right: 16)) + ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar)) + ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill)) + ..setHintText(AppLocalizations.of(context).hint_search_mailboxes) + ..addOnClearTextSearchAction(() => controller.clearSearchText()) + ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query)) + ..addOnSearchTextAction((query) => controller.searchMailbox(query))) + .build()) ] ) ); } - Widget _buildBackSearchButton(BuildContext context) { - return Padding( - padding: EdgeInsets.only(left: 5), - child: Material( - shape: CircleBorder(), - color: Colors.transparent, - child: IconButton( - splashRadius: 20, - color: AppColor.colorTextButton, - icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill), - onPressed: () => controller.disableSearch(context) - ) - )); - } - Widget _buildListMailboxSearched(BuildContext context, List listMailbox) { return Container( - margin: _responsiveUtils.isDesktop(context) - ? EdgeInsets.only(left: 16, right: 16) - : EdgeInsets.zero, - decoration: _responsiveUtils.isDesktop(context) - ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white) - : null, + margin: EdgeInsets.zero, + color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, child: ListView.builder( padding: EdgeInsets.only(left: 16, right: 8), key: Key('list_mailbox_searched'), itemCount: listMailbox.length, shrinkWrap: true, primary: false, - itemBuilder: (context, index) => Obx(() => (MailboxSearchTileBuilder( + itemBuilder: (context, index) => + Obx(() => (MailboxSearchTileBuilder( _imagePaths, listMailbox[index], - allSelectMode: controller.currentSelectMode.value, lastMailbox: controller.listMailboxSearched.last) ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox)) - ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailbox(context, mailbox))) + ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailboxSearched(context, mailbox))) .build())) ); } Widget _buildOptionSelectionMailbox(BuildContext context) { - if (_responsiveUtils.isDesktop(context)) { - return Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(16), - boxShadow: [BoxShadow(color: AppColor.colorEmailAddressTag, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))], - color: Colors.white), - margin: EdgeInsets.only(left: 10, bottom: 10, right: 10), - padding: EdgeInsets.all(8), - child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected) - ..addOnMailboxActionsClick((actions, listMailboxSelected) => controller.pressMailboxSelectionAction(context, actions, listMailboxSelected))) - .build(), - ); - } else { - return Column(children: [ - Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2), - Padding( - padding: EdgeInsets.only(bottom: 30, top: 5), - child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected) + return Column(children: [ + Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2), + Padding( + padding: EdgeInsets.symmetric(vertical: 16), + child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected) ..addOnMailboxActionsClick((actions, listMailboxSelected) => controller.pressMailboxSelectionAction(context, actions, listMailboxSelected))) - .build() - ) - ]); - } + .build() + ) + ]); } Widget _buildVersionInformation(BuildContext context, PackageInfo packageInfo) { return Container( - padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), - margin: EdgeInsets.only(bottom: 30), + padding: EdgeInsets.only(top: 4), child: Text( - '${AppLocalizations.of(context).version} ${packageInfo.version}', + 'v.${packageInfo.version}', textAlign: TextAlign.center, - style: TextStyle(fontSize: 16, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500), + style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500), ), ); } 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 c98c4e670..20565131d 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart @@ -1,6 +1,8 @@ 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'; 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'; @@ -13,17 +15,22 @@ typedef OnSelectMailboxFolderClick = void Function(MailboxNode); class MailBoxFolderTileBuilder { + final _responsiveUtils = Get.find(); + final MailboxNode _mailboxNode; final BuildContext _context; final ImagePaths _imagePaths; final SelectMode allSelectMode; final MailboxDisplayed mailboxDisplayed; final MailboxNode? lastNode; + final PresentationMailbox? mailboxNodeSelected; OnExpandFolderActionClick? _onExpandFolderActionClick; OnOpenMailboxFolderClick? _onOpenMailboxFolderClick; OnSelectMailboxFolderClick? _onSelectMailboxFolderClick; + bool isHoverIcon = false; + MailBoxFolderTileBuilder( this._context, this._imagePaths, @@ -32,6 +39,7 @@ class MailBoxFolderTileBuilder { this.allSelectMode = SelectMode.INACTIVE, this.mailboxDisplayed = MailboxDisplayed.mailbox, this.lastNode, + this.mailboxNodeSelected, } ); @@ -55,20 +63,20 @@ class MailBoxFolderTileBuilder { child: Container( key: Key('mailbox_folder_tile'), decoration: BoxDecoration( - borderRadius: BorderRadius.circular(0), - color: Colors.white + borderRadius: BorderRadius.circular(kIsWeb ? 10 : 0), + color: backgroundColorItem ), + padding: kIsWeb ? EdgeInsets.only(left: 8, right: 4) : EdgeInsets.zero, child: MediaQuery( data: MediaQueryData(padding: EdgeInsets.zero), child: Column(children: [ ListTile( + hoverColor: Colors.transparent, onTap: () => allSelectMode == SelectMode.ACTIVE ? _onSelectMailboxFolderClick?.call(_mailboxNode) : _onOpenMailboxFolderClick?.call(_mailboxNode), contentPadding: EdgeInsets.zero, - leading: allSelectMode == SelectMode.ACTIVE - ? _buildSelectModeIcon() - : _buildMailboxIcon(), + leading: _buildLeadingIcon(), title: _buildTitleFolderItem(), trailing: _mailboxNode.hasChildren() ? Transform( @@ -78,16 +86,16 @@ class MailBoxFolderTileBuilder { _mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icCollapseFolder, color: _mailboxNode.expandMode == ExpandMode.EXPAND ? AppColor.colorExpandMailbox : AppColor.colorCollapseMailbox, fit: BoxFit.fill), - splashRadius: 15, + 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() - ? Padding(padding: EdgeInsets.only(right: 12), child: _buildCounter()) + ? SizedBox(width: 40) : SizedBox.shrink() ), - if (lastNode?.item.id != _mailboxNode.item.id) + if (lastNode?.item.id != _mailboxNode.item.id && !kIsWeb) Padding( padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35), child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)), @@ -97,6 +105,14 @@ class MailBoxFolderTileBuilder { ); } + Widget _buildLeadingIcon() { + if (kIsWeb) { + return _mailboxNode.selectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon(); + } else { + return allSelectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon(); + } + } + Widget _buildTitleFolderItem() { return Row( children: [ @@ -112,8 +128,8 @@ class MailBoxFolderTileBuilder { overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.normal), ))), - if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox && _mailboxNode.hasChildren()) - Transform(transform: Matrix4.translationValues(30.0, 0.0, 0.0), child: _buildCounter()) + if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox) + Transform(transform: Matrix4.translationValues(25.0, 0.0, 0.0), child: _buildCounter()) ], ); } @@ -128,22 +144,42 @@ class MailBoxFolderTileBuilder { } Widget _buildMailboxIcon() { - return SvgPicture.asset( - '${_mailboxNode.item.getMailboxIcon(_imagePaths)}', - width: 28, - height: 28, - fit: BoxFit.fill - ); + 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) + ); + }); + } else { + return SvgPicture.asset('${_mailboxNode.item.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill); + } } Widget _buildSelectModeIcon() { return Transform( - transform: Matrix4.translationValues(-10.0, 0.0, 0.0), + 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), - splashRadius: 15, onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode))); } + + Color get backgroundColorItem { + if (kIsWeb) { + if (mailboxNodeSelected?.id == _mailboxNode.item.id) { + return AppColor.colorBgMailboxSelected; + } + return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white; + } else { + return Colors.white; + } + } } \ No newline at end of file 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 5ee5a6e19..2027a7453 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart @@ -1,4 +1,5 @@ import 'package:core/core.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:model/model.dart'; @@ -14,6 +15,8 @@ class MailboxSearchTileBuilder { final SelectMode allSelectMode; final ImagePaths _imagePaths; + bool isHoverIcon = false; + OnOpenMailboxActionClick? _onOpenMailboxActionClick; OnSelectMailboxActionClick? _onSelectMailboxActionClick; @@ -42,10 +45,6 @@ class MailboxSearchTileBuilder { child: Container( key: Key('mailbox_list_tile'), alignment: Alignment.center, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(0), - color: Colors.white - ), child: MediaQuery( data: MediaQueryData(padding: EdgeInsets.zero), child: Column(children: [ @@ -54,9 +53,7 @@ class MailboxSearchTileBuilder { onTap: () => allSelectMode == SelectMode.ACTIVE ? _onSelectMailboxActionClick?.call(_presentationMailbox) : _onOpenMailboxActionClick?.call(_presentationMailbox), - leading: allSelectMode == SelectMode.ACTIVE - ? _buildSelectModeIcon() - : _buildMailboxIcon(), + leading: _buildLeadingIcon(), title: Row(children: [ if (allSelectMode == SelectMode.ACTIVE) Transform( @@ -83,7 +80,7 @@ class MailboxSearchTileBuilder { ) : null, ), - if (lastMailbox?.id != _presentationMailbox.id) + if (lastMailbox?.id != _presentationMailbox.id && !kIsWeb) Padding( padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35), child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)), @@ -93,23 +90,40 @@ class MailboxSearchTileBuilder { ); } + Widget _buildLeadingIcon() { + if (kIsWeb) { + return _presentationMailbox.selectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon(); + } else { + return allSelectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon(); + } + } + Widget _buildMailboxIcon() { - return SvgPicture.asset( - '${_presentationMailbox.getMailboxIcon(_imagePaths)}', - width: 28, - height: 28, - fit: BoxFit.fill - ); + if (kIsWeb) { + return StatefulBuilder( + builder: (BuildContext context, StateSetter setState) { + return InkWell( + onTap: () {}, + onHover: (value) => setState(() => isHoverIcon = value), + child: isHoverIcon + ? _buildSelectModeIcon() + : SvgPicture.asset('${_presentationMailbox.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill) + ); + }); + } else { + return SvgPicture.asset('${_presentationMailbox.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill); + } } Widget _buildSelectModeIcon() { return Transform( - transform: Matrix4.translationValues(-10.0, 0.0, 0.0), + transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0), child: buildIconWeb( icon: SvgPicture.asset( _presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected, + width: kIsWeb ? 20 : 24, + height: kIsWeb ? 20 : 24, fit: BoxFit.fill), - splashRadius: 15, onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox))); } } \ No newline at end of file diff --git a/lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart b/lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart index d39a104fd..c27e38146 100644 --- a/lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart +++ b/lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart @@ -1,5 +1,6 @@ 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_utils/src/platform/platform.dart'; @@ -72,11 +73,12 @@ class UserInformationWidgetBuilder { ) ) ])), - Transform( - transform: Matrix4.translationValues(14.0, 0.0, 0.0), - child: IconButton( - icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox), - onPressed: () => {})) + if (!kIsWeb) + Transform( + transform: Matrix4.translationValues(14.0, 0.0, 0.0), + child: IconButton( + icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox), + onPressed: () => {})) ]), ); } 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 b14ef95a6..a041bfee3 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -22,18 +22,19 @@ class MailboxDashBoardView extends GetWidget with Ne key: controller.scaffoldKey, drawer: ResponsiveWidget( responsiveUtils: _responsiveUtils, - mobile: Container(child: MailboxView(), - width: _responsiveUtils.isPortrait(context) ? _responsiveUtils.getSizeScreenWidth(context) : _responsiveUtils.getSizeScreenWidth(context) / 2), - tablet: Container(child: MailboxView(), width: _responsiveUtils.getSizeScreenWidth(context) / 2), + mobile: _responsiveUtils.isPortrait(context) + ? SizedBox(child: MailboxView(), width: double.infinity) + : SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), + tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), tabletLarge: SizedBox.shrink(), desktop: SizedBox.shrink() ), - drawerEnableOpenDragGesture: !_responsiveUtils.isDesktop(context), + drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context), body: Stack(children: [ ResponsiveWidget( responsiveUtils: _responsiveUtils, - desktop: _buildDesktopView(context), - tabletLarge: _buildTabletLargeView(context), + desktop: _buildLargeScreenView(context), + tabletLarge: _buildLargeScreenView(context), tablet: ThreadView(), mobile: ThreadView() ), @@ -83,8 +84,8 @@ class MailboxDashBoardView extends GetWidget with Ne } } - Widget _buildDesktopView(BuildContext context) { - if (controller.isDrawerOpen && _responsiveUtils.isDesktop(context)) { + Widget _buildLargeScreenView(BuildContext context) { + if (controller.isDrawerOpen && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context))) { WidgetsBinding.instance?.addPostFrameCallback((_) { controller.closeDrawer(); }); @@ -94,26 +95,8 @@ class MailboxDashBoardView extends GetWidget with Ne child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Expanded(flex: 1, child: MailboxView()), - Expanded(flex: 3, child: _buildThreadAndEmailContainer(context)), - ], - ), - ); - } - - Widget _buildTabletLargeView(BuildContext context) { - if (controller.isDrawerOpen && _responsiveUtils.isTabletLarge(context)) { - WidgetsBinding.instance?.addPostFrameCallback((_) { - controller.closeDrawer(); - }); - } - - return Container( - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded(flex: 2, child: MailboxView()), - Expanded(flex: 4, child: _buildThreadAndEmailContainer(context)), + SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb), + Expanded(child: _buildThreadAndEmailContainer(context)) ], ), ); diff --git a/lib/features/thread/presentation/widgets/search_app_bar_widget.dart b/lib/features/thread/presentation/widgets/search_app_bar_widget.dart index 3fa27b8ac..6b8c781de 100644 --- a/lib/features/thread/presentation/widgets/search_app_bar_widget.dart +++ b/lib/features/thread/presentation/widgets/search_app_bar_widget.dart @@ -130,19 +130,12 @@ class SearchAppBarWidget { } Widget _buildClearTextSearchButton() { - return Material( - shape: CircleBorder(), - color: Colors.transparent, - child: IconButton( - splashRadius: 20, - padding: EdgeInsets.zero, - icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill), - onPressed: () { - _searchInputController?.clear(); - _onClearTextSearchAction?.call(); - } - ) - ); + return buildIconWeb( + icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 12, height: 12, fit: BoxFit.fill), + onTap: () { + _searchInputController?.clear(); + _onClearTextSearchAction?.call(); + }); } Widget _buildSearchInputForm() { @@ -168,14 +161,8 @@ class SearchAppBarWidget { } Widget _buildSearchButton() { - return Material( - shape: CircleBorder(), - color: Colors.transparent, - child: IconButton( - splashRadius: 20, - icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill), - onPressed: () => _onSearchTextAction?.call(_searchInputController?.text ?? '') - ) - ); + return buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill), + onTap: () => _onSearchTextAction?.call(_searchInputController?.text ?? '')); } } \ No newline at end of file