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

TF-3704 Fix menu bounces when collapse/expand folder

Browse Source 
Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
2025-05-07 02:53:37 +07:00
committed by Dat H. Pham
parent f2e854c2f0
commit aca0538b6b
16 changed files with 367 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart
+3
View File
@@ -13,6 +13,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mai
class LabelMailboxItemWidget extends StatelessWidget {
final GlobalKey itemKey;
final ResponsiveUtils responsiveUtils;
final ImagePaths imagePaths;
final MailboxNode mailboxNode;
@@ -25,6 +26,7 @@ class LabelMailboxItemWidget extends StatelessWidget {
const LabelMailboxItemWidget({
super.key,
required this.itemKey,
required this.mailboxNode,
required this.responsiveUtils,
required this.imagePaths,
@@ -60,6 +62,7 @@ class LabelMailboxItemWidget extends StatelessWidget {
),
if (mailboxNode.hasChildren())
MailboxExpandButton(
itemKey: itemKey,
mailboxNode: mailboxNode,
imagePaths: imagePaths,
onExpandFolderActionClick: onClickExpandMailboxNodeAction,
lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart
+84
View File
@@ -0,0 +1,84 @@
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:model/mailbox/expand_mode.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
typedef OnToggleMailboxCategories = Function(MailboxCategories, GlobalKey);
class MailboxCategoryWidget extends StatefulWidget {
final MailboxCategories categories;
final ExpandMode expandMode;
final OnToggleMailboxCategories onToggleMailboxCategories;
final bool isArrangeLTR;
final EdgeInsetsGeometry? padding;
const MailboxCategoryWidget({
super.key,
required this.categories,
required this.expandMode,
required this.onToggleMailboxCategories,
this.isArrangeLTR = true,
this.padding,
});
@override
State<MailboxCategoryWidget> createState() => _MailboxCategoryWidgetState();
}
class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
final _imagePaths = Get.find<ImagePaths>();
final GlobalKey _key = GlobalKey();
@override
Widget build(BuildContext context) {
final item = Row(
key: _key,
children: [
if (!widget.isArrangeLTR)
Flexible(
child: Text(
widget.categories.getTitle(context),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
),
),
TMailButtonWidget.fromIcon(
icon: widget.expandMode.getIcon(
_imagePaths,
DirectionUtils.isDirectionRTLByLanguage(context),
),
iconColor: Colors.black,
iconSize: 20,
backgroundColor: Colors.transparent,
padding: const EdgeInsets.all(5),
tooltipMessage: widget.expandMode.getTooltipMessage(AppLocalizations.of(context)),
onTapActionCallback: () =>
widget.onToggleMailboxCategories(widget.categories, _key)),
if (widget.isArrangeLTR)
Expanded(
child: Text(
widget.categories.getTitle(context),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
),
),
],
);
if (widget.padding != null) {
return Padding(padding: widget.padding!, child: item);
} else {
return item;
}
}
}
lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart
+9 -20
View File
@@ -4,18 +4,20 @@ import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:flutter/material.dart';
import 'package:model/extensions/presentation_mailbox_extension.dart';
import 'package:model/mailbox/expand_mode.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class MailboxExpandButton extends StatelessWidget {
final GlobalKey itemKey;
final MailboxNode mailboxNode;
final ImagePaths imagePaths;
final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
const MailboxExpandButton({
super.key,
required this.itemKey,
required this.mailboxNode,
required this.imagePaths,
required this.onExpandFolderActionClick,
@@ -24,35 +26,22 @@ class MailboxExpandButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return TMailButtonWidget.fromIcon(
icon: _getExpandIcon(context, imagePaths),
icon: mailboxNode.expandMode.getIcon(
imagePaths,
DirectionUtils.isDirectionRTLByLanguage(context),
),
iconColor: _expandIconColor,
iconSize: 20,
padding: const EdgeInsets.all(5),
backgroundColor: Colors.transparent,
tooltipMessage: _getExpandTooltipMessage(context),
onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode),
tooltipMessage: mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode, itemKey),
);
}
String _getExpandIcon(BuildContext context, ImagePaths imagePaths) {
if (mailboxNode.expandMode == ExpandMode.EXPAND) {
return imagePaths.icArrowBottom;
} else {
return DirectionUtils.isDirectionRTLByLanguage(context)
? imagePaths.icArrowLeft
: imagePaths.icArrowRight;
}
}
Color get _expandIconColor {
return mailboxNode.item.allowedToDisplay
? Colors.black
: AppColor.steelGray200;
}
String _getExpandTooltipMessage(BuildContext context) {
return mailboxNode.expandMode == ExpandMode.EXPAND
? AppLocalizations.of(context).collapse
: AppLocalizations.of(context).expand;
}
}
lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart
+9
View File
@@ -62,11 +62,13 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
final _imagePaths = Get.find<ImagePaths>();
bool _isItemHovered = false;
final GlobalKey _key = GlobalKey();
@override
Widget build(BuildContext context) {
if (_responsiveUtils.isWebDesktop(context) && widget.mailboxDisplayed == MailboxDisplayed.mailbox) {
return DragTarget<List<PresentationEmail>>(
key: _key,
builder: (context, candidateEmails, rejectedEmails) {
return InkWell(
onTap: () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode),
@@ -95,6 +97,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
const SizedBox(width: MailboxItemWidgetStyles.space),
Expanded(
child: LabelMailboxItemWidget(
itemKey: _key,
responsiveUtils: _responsiveUtils,
mailboxNode: widget.mailboxNode,
imagePaths: _imagePaths,
@@ -116,6 +119,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
if (widget.mailboxDisplayed == MailboxDisplayed.mailbox) {
if (PlatformInfo.isWeb) {
return InkWell(
key: _key,
onTap: () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode),
onHover: (value) => setState(() => _isItemHovered = value),
child: Container(
@@ -138,6 +142,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
const SizedBox(width: MailboxItemWidgetStyles.space),
Expanded(
child: LabelMailboxItemWidget(
itemKey: _key,
responsiveUtils: _responsiveUtils,
mailboxNode: widget.mailboxNode,
imagePaths: _imagePaths,
@@ -154,6 +159,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
);
} else {
return Material(
key: _key,
color: Colors.transparent,
child: InkWell(
onLongPress: () => widget.onLongPressMailboxNodeAction?.call(widget.mailboxNode),
@@ -181,6 +187,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
const SizedBox(width: MailboxItemWidgetStyles.padding),
Expanded(
child: LabelMailboxItemWidget(
itemKey: _key,
responsiveUtils: _responsiveUtils,
mailboxNode: widget.mailboxNode,
imagePaths: _imagePaths,
@@ -206,6 +213,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
}
} else {
return AbsorbPointer(
key: _key,
absorbing: !widget.mailboxNode.isActivated,
child: Opacity(
opacity: widget.mailboxNode.isActivated ? 1.0 : 0.3,
@@ -236,6 +244,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
const SizedBox(width: MailboxItemWidgetStyles.padding),
Expanded(
child: LabelMailboxItemWidget(
itemKey: _key,
responsiveUtils: _responsiveUtils,
mailboxNode: widget.mailboxNode,
imagePaths: _imagePaths,