eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-4002 Apply new design for folder creation modal on web

Browse Source
This commit is contained in:
dab246
2025-09-04 15:06:28 +07:00
committed by Dat H. Pham
parent c09a2c92b2
commit 36e58fc990
23 changed files with 689 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox/presentation/base_mailbox_view.dart
+3 -2
View File
@@ -199,7 +199,9 @@ abstract class BaseMailboxView extends GetWidget<MailboxController>
.selectedMailbox
.value,
onOpenMailboxFolderClick: (mailboxNode) =>
controller.openMailbox(context, mailboxNode.item),
mailboxNode != null
? controller.openMailbox(context, mailboxNode.item)
: null,
onExpandFolderActionClick: mailboxNode.hasChildren()
? (mailboxNode, itemKey) => controller.toggleMailboxFolder(
mailboxNode,
@@ -228,7 +230,6 @@ abstract class BaseMailboxView extends GetWidget<MailboxController>
if (mailboxNode.hasChildren()) {
return TreeViewChild(
context,
key: const Key('children_tree_mailbox_child'),
isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
paddingChild: const EdgeInsetsDirectional.only(start: 12),
lib/features/mailbox/presentation/mailbox_controller.dart
+5 -8
View File
@@ -843,15 +843,12 @@ class MailboxController extends BaseMailboxController
}
void goToCreateNewMailboxView(BuildContext context, {PresentationMailbox? parentMailbox}) async {
if (session !=null && accountId != null) {
if (session != null && accountId != null) {
final arguments = MailboxCreatorArguments(
accountId!,
defaultMailboxTree.value,
personalMailboxTree.value,
teamMailboxesTree.value,
mailboxDashBoardController.sessionCurrent!,
parentMailbox
);
defaultMailboxTree.value,
personalMailboxTree.value,
parentMailbox,
);
final result = PlatformInfo.isWeb
? await DialogRouter.pushGeneralDialog(routeName: AppRoutes.mailboxCreator, arguments: arguments)
lib/features/mailbox/presentation/model/mailbox_displayed.dart
+2 -1
View File
@@ -1,5 +1,6 @@
enum MailboxDisplayed {
mailbox,
destinationPicker
destinationPicker,
modalFolder;
}
lib/features/mailbox/presentation/utils/mailbox_method_action_define.dart
+1 -1
View File
@@ -11,7 +11,7 @@ typedef OnDragEmailToMailboxAccepted = void Function(List<PresentationEmail>, Pr
typedef OnLongPressMailboxAction = void Function(PresentationMailbox);
typedef OnClickExpandMailboxNodeAction = void Function(MailboxNode, GlobalKey itemKey);
typedef OnClickOpenMailboxNodeAction = void Function(MailboxNode);
typedef OnClickOpenMailboxNodeAction = void Function(MailboxNode?);
typedef OnSelectMailboxNodeAction = void Function(MailboxNode);
typedef OnClickOpenMenuMailboxNodeAction = Future<void> Function(RelativeRect, MailboxNode);
typedef OnLongPressMailboxNodeAction = void Function(MailboxNode);
lib/features/mailbox/presentation/widgets/folder_item_widget.dart
+84
View File
@@ -0,0 +1,84 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
class FolderItemWidget extends StatelessWidget {
final ImagePaths imagePaths;
final String folderName;
final bool isSelected;
final VoidCallback? onTapAction;
const FolderItemWidget({
super.key,
required this.imagePaths,
required this.folderName,
this.isSelected = false,
this.onTapAction,
});
@override
Widget build(BuildContext context) {
Widget itemWidget = Container(
padding: const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.itemPadding,
),
height: MailboxItemWidgetStyles.height,
child: Row(
children: [
SvgPicture.asset(
imagePaths.icFolderMailbox,
width: MailboxIconWidgetStyles.iconSize,
height: MailboxIconWidgetStyles.iconSize,
colorFilter: AppColor.primaryLinShare.asFilter(),
fit: BoxFit.fill,
),
const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
Expanded(
child: Text(
folderName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: isSelected
? ThemeUtils.textStyleInter700(
color: Colors.black,
fontSize: 14,
)
: ThemeUtils.textStyleBodyBody3(
color: Colors.black,
),
),
),
const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
if (isSelected)
SvgPicture.asset(
imagePaths.icCheck,
width: MailboxIconWidgetStyles.iconSize,
height: MailboxIconWidgetStyles.iconSize,
colorFilter: AppColor.primaryLinShare.asFilter(),
fit: BoxFit.fill,
),
],
),
);
if (onTapAction != null) {
return Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: const BorderRadius.all(
Radius.circular(MailboxItemWidgetStyles.borderRadius),
),
hoverColor: AppColor.blue100,
onTap: onTapAction,
child: itemWidget,
),
);
} else {
return itemWidget;
}
}
}
lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart
+7
View File
@@ -24,6 +24,7 @@ class LabelMailboxItemWidget extends StatefulWidget {
final bool showTrailing;
final bool isItemHovered;
final bool isSelected;
final bool isSelectedFolderInModal;
final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
@@ -35,6 +36,7 @@ class LabelMailboxItemWidget extends StatefulWidget {
this.showTrailing = true,
this.isItemHovered = false,
this.isSelected = false,
this.isSelectedFolderInModal = false,
this.onMenuActionClick,
this.onEmptyMailboxActionCallback,
this.onClickExpandMailboxNodeAction,
@@ -219,6 +221,11 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
color: _responsiveUtils.isDesktop(context) ? null : AppColor.iconFolder,
fontSize: 14,
);
} else if (widget.isSelectedFolderInModal) {
return ThemeUtils.textStyleInter700(
color: Colors.black,
fontSize: 14,
);
} else {
return _responsiveUtils.isWebDesktop(context)
? ThemeUtils.textStyleBodyBody3(color: Colors.black)
lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart
+26 -20
View File
@@ -25,6 +25,7 @@ class MailboxItemWidget extends StatefulWidget {
final PresentationMailbox? mailboxNodeSelected;
final MailboxActions? mailboxActions;
final MailboxId? mailboxIdAlreadySelected;
final Color? hoverColor;
final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
final OnClickOpenMailboxNodeAction? onOpenMailboxFolderClick;
@@ -41,6 +42,7 @@ class MailboxItemWidget extends StatefulWidget {
this.mailboxNodeSelected,
this.mailboxActions,
this.mailboxIdAlreadySelected,
this.hoverColor,
this.onExpandFolderActionClick,
this.onOpenMailboxFolderClick,
this.onSelectMailboxFolderClick,
@@ -229,11 +231,11 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => !_isSelectActionNoValid
? widget.onOpenMailboxFolderClick?.call(widget.mailboxNode)
onTap: !isSelectedFolderInModal
? () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode)
: null,
customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
hoverColor: AppColor.colorMailboxHovered,
hoverColor: widget.hoverColor ?? AppColor.colorMailboxHovered,
child: Container(
padding: const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.itemPadding,
@@ -255,14 +257,17 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
showTrailing: false,
isSelected: _isSelected,
isItemHovered: _isItemHovered,
isSelectedFolderInModal: isSelectedFolderInModal,
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
)
),
if (_isSelectActionNoValid)
if (isSelectedFolderInModal)
SvgPicture.asset(
_imagePaths.icSelectedSB,
isFolderModalActive
? _imagePaths.icCheck
: _imagePaths.icSelectedSB,
width: MailboxItemWidgetStyles.selectionIconSize,
height: MailboxItemWidgetStyles.selectionIconSize,
fit: BoxFit.fill
@@ -282,24 +287,25 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
widget.mailboxNodeSelected?.id == widget.mailboxNode.item.id;
Color get backgroundColorItem {
if (widget.mailboxDisplayed == MailboxDisplayed.destinationPicker) {
return Colors.white;
} else {
if (_isSelected) {
return AppColor.blue100;
} else {
return Colors.transparent;
}
if (widget.mailboxDisplayed == MailboxDisplayed.mailbox) {
return _isSelected ? AppColor.blue100 : Colors.transparent;
}
return Colors.white;
}
bool get _isSelectActionNoValid => widget.mailboxNode.item.id == widget.mailboxIdAlreadySelected &&
widget.mailboxDisplayed == MailboxDisplayed.destinationPicker &&
(
widget.mailboxActions == MailboxActions.select ||
widget.mailboxActions == MailboxActions.create ||
widget.mailboxActions == MailboxActions.moveEmail
);
bool get isFolderModalActive =>
widget.mailboxDisplayed == MailboxDisplayed.modalFolder;
bool get isSelectedFolderInModal {
final isDestinationPickerActive =
widget.mailboxDisplayed == MailboxDisplayed.destinationPicker &&
(widget.mailboxActions == MailboxActions.select ||
widget.mailboxActions == MailboxActions.create ||
widget.mailboxActions == MailboxActions.moveEmail);
return widget.mailboxNode.item.id == widget.mailboxIdAlreadySelected &&
(isDestinationPickerActive || isFolderModalActive);
}
bool get _isIconDisplayed =>
widget.mailboxNode.item.isPersonal ||