From 4741092faa9857cdbf1bc070a65b81c7172af553 Mon Sep 17 00:00:00 2001 From: dab246 Date: Fri, 23 May 2025 18:16:30 +0700 Subject: [PATCH] Add align `Folder` with icon of folder Signed-off-by: dab246 --- .../mailbox/presentation/mailbox_view.dart | 39 ++-------- .../presentation/mailbox_view_web.dart | 46 ++--------- .../widgets/folders_bar_widget.dart | 77 +++++++++++++++++++ 3 files changed, 89 insertions(+), 73 deletions(-) create mode 100644 lib/features/mailbox/presentation/widgets/folders_bar_widget.dart diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index c1fde24a0..e1272da97 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -11,6 +11,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.d import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.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/folder_widget.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart'; @@ -237,39 +238,11 @@ class MailboxView extends BaseMailboxView { }), const SizedBox(height: 8), const Divider(color: AppColor.colorDividerMailbox, height: 1), - Container( - padding: const EdgeInsetsDirectional.symmetric( - horizontal: 16, - vertical: 6 - ), - child: Row( - children: [ - Expanded( - child: Text( - AppLocalizations.of(context).folders, - style: ThemeUtils.textStyleInter700(color: Colors.black), - ), - ), - Row(children: [ - TMailButtonWidget.fromIcon( - icon: controller.imagePaths.icSearchBar, - iconColor: AppColor.steelGrayA540, - iconSize: 20, - backgroundColor: Colors.transparent, - tooltipMessage: AppLocalizations.of(context).searchForFolders, - onTapActionCallback: () => controller.openSearchViewAction(context) - ), - TMailButtonWidget.fromIcon( - icon: controller.imagePaths.icAddNewFolder, - iconColor: AppColor.steelGrayA540, - iconSize: 20, - backgroundColor: Colors.transparent, - tooltipMessage: AppLocalizations.of(context).newFolder, - onTapActionCallback: () => controller.goToCreateNewMailboxView(context) - ), - ]), - ], - ), + FoldersBarWidget( + onOpenSearchFolder: () => controller.openSearchViewAction(context), + onAddNewFolder: () => controller.goToCreateNewMailboxView(context), + imagePaths: controller.imagePaths, + responsiveUtils: controller.responsiveUtils, ), Obx(() { if (controller.personalMailboxIsNotEmpty) { diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index 374843b3a..e8ec4e337 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -12,6 +12,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_catego import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart'; @@ -135,46 +136,11 @@ class MailboxView extends BaseMailboxView { }), const SizedBox(height: 8), const Divider(color: AppColor.colorDividerMailbox, height: 1), - Padding( - padding: const EdgeInsetsDirectional.symmetric(vertical: 4), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: Padding( - padding: EdgeInsetsDirectional.only( - start: controller.responsiveUtils.isWebDesktop(context) ? 0 : 16, - ), - child: Text( - AppLocalizations.of(context).folders, - style: ThemeUtils.textStyleInter700(color: Colors.black), - ), - ), - ), - Padding( - padding: EdgeInsetsDirectional.only(end: controller.responsiveUtils.isDesktop(context) ? 0 : 12), - child: Row( - children: [ - TMailButtonWidget.fromIcon( - icon: controller.imagePaths.icSearchBar, - backgroundColor: Colors.transparent, - iconColor: AppColor.steelGrayA540, - iconSize: 20, - tooltipMessage: AppLocalizations.of(context).searchForFolders, - onTapActionCallback: () => controller.openSearchViewAction(context) - ), - TMailButtonWidget.fromIcon( - icon: controller.imagePaths.icAddNewFolder, - backgroundColor: Colors.transparent, - iconColor: AppColor.steelGrayA540, - iconSize: 20, - tooltipMessage: AppLocalizations.of(context).newFolder, - onTapActionCallback: () => controller.goToCreateNewMailboxView(context) - ), - ], - ) - ), - ]), + FoldersBarWidget( + onOpenSearchFolder: () => controller.openSearchViewAction(context), + onAddNewFolder: () => controller.goToCreateNewMailboxView(context), + imagePaths: controller.imagePaths, + responsiveUtils: controller.responsiveUtils, ), Obx(() { if (controller.personalMailboxIsNotEmpty) { diff --git a/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart b/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart new file mode 100644 index 000000000..ba9bf292e --- /dev/null +++ b/lib/features/mailbox/presentation/widgets/folders_bar_widget.dart @@ -0,0 +1,77 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/presentation/utils/responsive_utils.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; +import 'package:core/presentation/views/button/tmail_button_widget.dart'; +import 'package:flutter/material.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class FoldersBarWidget extends StatelessWidget { + final VoidCallback onOpenSearchFolder; + final VoidCallback onAddNewFolder; + final ImagePaths imagePaths; + final ResponsiveUtils responsiveUtils; + + const FoldersBarWidget({ + super.key, + required this.onOpenSearchFolder, + required this.onAddNewFolder, + required this.imagePaths, + required this.responsiveUtils, + }); + + @override + Widget build(BuildContext context) { + Widget searchBarIcon = TMailButtonWidget.fromIcon( + icon: imagePaths.icSearchBar, + backgroundColor: Colors.transparent, + iconColor: AppColor.steelGrayA540, + iconSize: 20, + tooltipMessage: AppLocalizations.of(context).searchForFolders, + onTapActionCallback: onOpenSearchFolder, + ); + + if (responsiveUtils.isWebDesktop(context)) { + searchBarIcon = Transform( + transform: Matrix4.translationValues(8, 0, 0), + child: searchBarIcon, + ); + } + + Widget newFolderIcon = TMailButtonWidget.fromIcon( + icon: imagePaths.icAddNewFolder, + backgroundColor: Colors.transparent, + iconColor: AppColor.steelGrayA540, + iconSize: 24, + padding: const EdgeInsets.all(5), + tooltipMessage: AppLocalizations.of(context).newFolder, + onTapActionCallback: onAddNewFolder, + ); + + if (responsiveUtils.isWebDesktop(context)) { + newFolderIcon = Transform( + transform: Matrix4.translationValues(8, 0, 0), + child: newFolderIcon, + ); + } + + return Container( + padding: EdgeInsetsDirectional.only( + start: responsiveUtils.isWebDesktop(context) ? 10 : 26, + end: responsiveUtils.isWebDesktop(context) ? 0 : 8, + ), + height: 48, + child: Row( + children: [ + Expanded( + child: Text( + AppLocalizations.of(context).folders, + style: ThemeUtils.textStyleInter700(color: Colors.black), + ), + ), + Row(children: [searchBarIcon, newFolderIcon]), + ], + ), + ); + } +}