TF-1984 Show popup dialog when clicking on Empty button

(cherry picked from commit 7504d6ec3cceff0d6697fddb93bd5212f9d9028f)
This commit is contained in:
dab246
2023-08-30 16:16:35 +07:00
committed by Dat Vu
parent 41a1efb5de
commit 3c173caa4e
15 changed files with 358 additions and 33 deletions
+1
View File
@@ -82,6 +82,7 @@ export 'presentation/views/toast/tmail_toast.dart';
export 'presentation/views/bottom_popup/full_screen_action_sheet_builder.dart';
export 'presentation/views/checkbox/labeled_checkbox.dart';
export 'presentation/views/container/tmail_container_widget.dart';
export 'presentation/views/clipper/side_arrow_clipper.dart';
// Resources
export 'presentation/resources/assets_paths.dart';
@@ -203,6 +203,9 @@ extension AppColor on Color {
static const colorLabelCancelButton = Color(0xFFAEB7C2);
static const colorCreateFiltersButton = Color(0xFFF3F3F7);
static const colorTextBody = Color(0xFF818C99);
static const colorClosePopupDialogButton = Color(0xFFAEB7C2);
static const colorEmptyPopupDialogButton = Color(0xFFFFC107);
static const colorCancelPopupDialogButton = Color(0xFFEBEDF0);
static const mapGradientColor = [
[Color(0xFF21D4FD), Color(0xFFB721FF)],
@@ -0,0 +1,54 @@
import 'package:flutter/material.dart';
/// Create a custom clipper with a side arrow.
/// To help achieve various custom shapes of widget
class SideArrowClipper extends CustomClipper<Path> {
/// Alignment
final bool isRight;
///The radius, which creates the curved appearance of the widget has a default value of 16.
final double radius;
/// The arrow creates the curved shape of the widget and has a default arrowSize of 8.
final double arrowSize;
/// Offset show distance from bottom and has default value 30.
final double offset;
SideArrowClipper({
this.isRight = false,
this.radius = 16,
this.offset = 30,
this.arrowSize = 8
});
@override
Path getClip(Size size) {
var path = Path();
if (isRight) {
path.addRRect(RRect.fromLTRBR(0, 0, size.width - arrowSize, size.height, Radius.circular(radius)));
var path2 = Path();
path2.lineTo(arrowSize, arrowSize);
path2.lineTo(0, 2 * arrowSize);
path2.lineTo(0, 0);
path.addPath(path2, Offset(size.width - arrowSize, size.height - offset - 2 * arrowSize));
} else {
path.addRRect(RRect.fromLTRBR(arrowSize, 0, size.width, size.height, Radius.circular(radius)));
var path2 = Path();
path2.lineTo(0, 2 * arrowSize);
path2.lineTo(-arrowSize, arrowSize);
path2.lineTo(0, 0);
path.addPath(path2, Offset(arrowSize, size.height - offset - 2 * arrowSize));
}
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
@@ -0,0 +1,46 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:flutter/material.dart';
class EmptyMailboxDialogOverlayStyles {
static const double width = 300;
static const double radius = 16;
static const double closeButtonIconSize = 28;
static const double space = 12;
static const double buttonSpace = 9;
static const double buttonRadius = 8;
static const double elevation = 8;
static const EdgeInsetsGeometry margin = EdgeInsetsDirectional.only(start: 12);
static const EdgeInsetsGeometry padding = EdgeInsets.all(12);
static const EdgeInsetsGeometry iconPadding = EdgeInsets.zero;
static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 12);
static const EdgeInsetsGeometry emptyButtonPadding = EdgeInsetsDirectional.symmetric(vertical: 2, horizontal: 5);
static const Color backgroundColor = Colors.white;
static const Color closeButtonColor = AppColor.colorClosePopupDialogButton;
static const Color cancelButtonColor = AppColor.colorCancelPopupDialogButton;
static const Color emptyButtonColor = AppColor.colorEmptyPopupDialogButton;
static const Color emptyButtonBackground = Colors.transparent;
static Color get shadowColor => Colors.grey.shade500;
static const TextStyle titleTextStyle = TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black
);
static const TextStyle messageTextStyle = TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.black
);
static const TextStyle buttonTextStyle = TextStyle(
fontSize: 13,
fontWeight: FontWeight.w400,
color: Colors.black
);
static const TextStyle emptyButtonTextStyle = TextStyle(
fontWeight: FontWeight.w400,
fontSize: 15,
color: AppColor.colorTextBody
);
}
@@ -0,0 +1,16 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:flutter/material.dart';
class EmptyMailboxPopupDialogWidgetStyles {
static const EdgeInsetsGeometry emptyButtonPadding = EdgeInsetsDirectional.symmetric(vertical: 4, horizontal: 10);
static const Color emptyButtonBackground = Colors.transparent;
static const TextStyle emptyButtonTextStyle = TextStyle(
fontWeight: FontWeight.w400,
fontSize: 15,
color: AppColor.colorTextBody
);
static const Offset dialogOverlayOffset = Offset(0.0, 50.0);
}
@@ -10,17 +10,8 @@ class LabelMailboxItemWidgetStyles {
static const Color labelTeamMailboxTextColor = Colors.black;
static const Color labelFolderTextColor = AppColor.colorNameEmail;
static const Color teamMailboxTextColor = AppColor.colorEmailAddressFull;
static const Color emptyButtonBackground = Colors.transparent;
static const FontWeight labelTeamMailboxTextFontWeight = FontWeight.bold;
static const FontWeight labelFolderTextFontWeight = FontWeight.normal;
static const FontWeight teamMailboxTextFontWeight = FontWeight.w400;
static const EdgeInsetsGeometry emptyButtonPadding = EdgeInsetsDirectional.symmetric(vertical: 2, horizontal: 5);
static const TextStyle emptyButtonTextStyle = TextStyle(
fontWeight: FontWeight.w400,
fontSize: 15,
color: AppColor.colorTextBody
);
}
@@ -15,4 +15,5 @@ typedef OnClickOpenMailboxNodeAction = void Function(MailboxNode);
typedef OnSelectMailboxNodeAction = void Function(MailboxNode);
typedef OnClickOpenMenuMailboxNodeAction = void Function(RelativeRect, MailboxNode);
typedef OnLongPressMailboxNodeAction = void Function(MailboxNode);
typedef OnClickSubscribeMailboxAction = void Function(MailboxNode);
typedef OnClickSubscribeMailboxAction = void Function(MailboxNode);
typedef OnEmptyMailboxActionCallback = void Function(MailboxNode);
@@ -0,0 +1,104 @@
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/bottom_popup/confirmation_dialog_action_sheet_builder.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/presentation/views/clipper/side_arrow_clipper.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/empty_mailbox_dialog_overlay_styles.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 EmptyMailboxDialogOverlay extends StatelessWidget {
final MailboxNode mailboxNode;
final OnEmptyMailboxActionCallback onEmptyMailboxActionCallback;
final OnCancelActionClick onCancelActionClick;
final _responsiveUtils = Get.find<ResponsiveUtils>();
final _imagePaths = Get.find<ImagePaths>();
EmptyMailboxDialogOverlay({
Key? key,
required this.mailboxNode,
required this.onEmptyMailboxActionCallback,
required this.onCancelActionClick,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return PointerInterceptor(
child: PhysicalShape(
clipBehavior: Clip.antiAlias,
clipper: SideArrowClipper(),
color: EmptyMailboxDialogOverlayStyles.backgroundColor,
shadowColor: EmptyMailboxDialogOverlayStyles.shadowColor,
elevation: EmptyMailboxDialogOverlayStyles.elevation,
child: Container(
constraints: BoxConstraints(
maxHeight: _responsiveUtils.getSizeScreenHeight(context)
),
width: EmptyMailboxDialogOverlayStyles.width,
padding: EmptyMailboxDialogOverlayStyles.padding,
margin: EmptyMailboxDialogOverlayStyles.margin,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Expanded(
child: Text(
AppLocalizations.of(context).clearFolder,
style: EmptyMailboxDialogOverlayStyles.titleTextStyle
),
),
TMailButtonWidget.fromIcon(
icon: _imagePaths.icClose,
iconSize: EmptyMailboxDialogOverlayStyles.closeButtonIconSize,
iconColor: EmptyMailboxDialogOverlayStyles.closeButtonColor,
backgroundColor: Colors.transparent,
padding: EmptyMailboxDialogOverlayStyles.iconPadding,
onTapActionCallback: onCancelActionClick,
)
]
),
const SizedBox(height: EmptyMailboxDialogOverlayStyles.space),
Flexible(
child: Text(
AppLocalizations.of(context).messageEmptyFolderDialog(mailboxNode.item.getDisplayName(context)),
style: EmptyMailboxDialogOverlayStyles.messageTextStyle
),
),
const SizedBox(height: EmptyMailboxDialogOverlayStyles.space),
Row(
children: [
const Spacer(),
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).cancel,
backgroundColor: EmptyMailboxDialogOverlayStyles.cancelButtonColor,
padding: EmptyMailboxDialogOverlayStyles.buttonPadding,
textStyle: EmptyMailboxDialogOverlayStyles.buttonTextStyle,
borderRadius: EmptyMailboxDialogOverlayStyles.buttonRadius,
onTapActionCallback: onCancelActionClick,
),
const SizedBox(width: EmptyMailboxDialogOverlayStyles.buttonSpace),
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).empty,
backgroundColor: EmptyMailboxDialogOverlayStyles.emptyButtonColor,
padding: EmptyMailboxDialogOverlayStyles.buttonPadding,
textStyle: EmptyMailboxDialogOverlayStyles.buttonTextStyle,
borderRadius: EmptyMailboxDialogOverlayStyles.buttonRadius,
onTapActionCallback: () => onEmptyMailboxActionCallback.call(mailboxNode),
)
],
)
],
),
),
),
);
}
}
@@ -0,0 +1,59 @@
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/empty_mailbox_popup_dialog_widget_styles.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/empty_mailbox_dialog_overlay.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class EmptyMailboxPopupDialogWidget extends StatefulWidget {
final MailboxNode mailboxNode;
final OnEmptyMailboxActionCallback onEmptyMailboxActionCallback;
const EmptyMailboxPopupDialogWidget({
super.key,
required this.mailboxNode,
required this.onEmptyMailboxActionCallback,
});
@override
State<EmptyMailboxPopupDialogWidget> createState() => _EmptyMailboxPopupDialogWidgetState();
}
class _EmptyMailboxPopupDialogWidgetState extends State<EmptyMailboxPopupDialogWidget> {
bool _visible = false;
@override
Widget build(BuildContext context) {
return PortalTarget(
visible: _visible,
portalFollower: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => setState(() => _visible = false)
),
child: PortalTarget(
anchor: const Aligned(
follower: Alignment.bottomLeft,
target: Alignment.topRight,
offset: EmptyMailboxPopupDialogWidgetStyles.dialogOverlayOffset
),
portalFollower: EmptyMailboxDialogOverlay(
mailboxNode: widget.mailboxNode,
onCancelActionClick: () => setState(() => _visible = false),
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
),
visible: _visible,
child: TMailButtonWidget.fromText(
text: AppLocalizations.of(context).empty,
textStyle: EmptyMailboxPopupDialogWidgetStyles.emptyButtonTextStyle,
backgroundColor: EmptyMailboxPopupDialogWidgetStyles.emptyButtonBackground,
padding: EmptyMailboxPopupDialogWidgetStyles.emptyButtonPadding,
onTapActionCallback: () => setState(() => _visible = true)
)
)
);
}
}
@@ -1,14 +1,14 @@
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/text/text_overflow_builder.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:model/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/label_mailbox_item_widget_styles.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/empty_mailbox_popup_dialog_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mailbox_item_widget.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class LabelMailboxItemWidget extends StatelessWidget {
@@ -16,13 +16,17 @@ class LabelMailboxItemWidget extends StatelessWidget {
final bool showTrailing;
final bool isItemHovered;
final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
const LabelMailboxItemWidget({
final _responsiveUtils = Get.find<ResponsiveUtils>();
LabelMailboxItemWidget({
super.key,
required this.mailboxNode,
this.showTrailing = true,
this.isItemHovered = false,
this.onMenuActionClick,
this.onEmptyMailboxActionCallback,
});
@override
@@ -43,13 +47,10 @@ class LabelMailboxItemWidget extends StatelessWidget {
),
),
),
if (mailboxNode.item.allowedHasEmptyAction)
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).empty,
textStyle: LabelMailboxItemWidgetStyles.emptyButtonTextStyle,
backgroundColor: LabelMailboxItemWidgetStyles.emptyButtonBackground,
padding: LabelMailboxItemWidgetStyles.emptyButtonPadding,
onTapActionCallback: () => {},
if (_responsiveUtils.isWebDesktop(context) && mailboxNode.item.allowedHasEmptyAction)
EmptyMailboxPopupDialogWidget(
mailboxNode: mailboxNode,
onEmptyMailboxActionCallback: (mailboxNode) => onEmptyMailboxActionCallback?.call(mailboxNode),
),
TrailingMailboxItemWidget(
mailboxNode: mailboxNode,
@@ -32,6 +32,7 @@ class MailboxItemWidget extends StatefulWidget {
final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
final OnDragEmailToMailboxAccepted? onDragItemAccepted;
final OnLongPressMailboxNodeAction? onLongPressMailboxNodeAction;
final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
const MailboxItemWidget({
super.key,
@@ -47,6 +48,7 @@ class MailboxItemWidget extends StatefulWidget {
this.onMenuActionClick,
this.onDragItemAccepted,
this.onLongPressMailboxNodeAction,
this.onEmptyMailboxActionCallback,
});
@override
@@ -87,7 +89,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
child: LabelMailboxItemWidget(
mailboxNode: widget.mailboxNode,
isItemHovered: _isItemHovered,
onMenuActionClick: widget.onMenuActionClick
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
)
),
]
@@ -122,7 +125,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
child: LabelMailboxItemWidget(
mailboxNode: widget.mailboxNode,
isItemHovered: _isItemHovered,
onMenuActionClick: widget.onMenuActionClick
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
)
),
]
@@ -161,7 +165,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
child: LabelMailboxItemWidget(
mailboxNode: widget.mailboxNode,
isItemHovered: _isItemHovered,
onMenuActionClick: widget.onMenuActionClick
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
)
),
if (_isSelectActionNoValid)
@@ -211,7 +216,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
mailboxNode: widget.mailboxNode,
showTrailing: false,
isItemHovered: _isItemHovered,
onMenuActionClick: widget.onMenuActionClick
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
)
),
if (_isSelectActionNoValid)
@@ -1,5 +1,6 @@
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
@@ -17,6 +18,7 @@ class TrailingMailboxItemWidget extends StatelessWidget {
final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
TrailingMailboxItemWidget({
super.key,
@@ -30,19 +32,23 @@ class TrailingMailboxItemWidget extends StatelessWidget {
if (PlatformInfo.isWeb) {
if (isItemHovered) {
return TMailButtonWidget.fromIcon(
margin: TrailingMailboxItemWidgetStyles.menuIconMargin,
margin: _responsiveUtils.isDesktop(context) && mailboxNode.item.allowedHasEmptyAction
? EdgeInsets.zero
: TrailingMailboxItemWidgetStyles.menuIconMargin,
icon: _imagePaths.icComposerMenu,
iconSize: TrailingMailboxItemWidgetStyles.menuIconSize,
padding: TrailingMailboxItemWidgetStyles.menuIconPadding,
backgroundColor: TrailingMailboxItemWidgetStyles.menuIconBackgroundColor,
onTapActionAtPositionCallback: (position) => onMenuActionClick?.call(position, mailboxNode),
);
} else if (mailboxNode.item.countUnreadEmails > 0 && mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
} else if (_responsiveUtils.isDesktop(context) && mailboxNode.item.allowedHasEmptyAction) {
return const SizedBox();
} else if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
return Padding(
padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
child: CountOfEmailsWidget(value: mailboxNode.item.countUnReadEmailsAsString),
);
} else if (mailboxNode.item.countTotalEmails > 0 && mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
} else if (mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
return Padding(
padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
child: CountOfEmailsWidget(value: mailboxNode.item.countTotalEmailsAsString),
@@ -51,12 +57,12 @@ class TrailingMailboxItemWidget extends StatelessWidget {
return const SizedBox();
}
} else {
if (mailboxNode.item.countUnreadEmails > 0 && mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
return Padding(
padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
child: CountOfEmailsWidget(value: mailboxNode.item.countUnReadEmailsAsString),
);
} else if (mailboxNode.item.countTotalEmails > 0 && mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
} else if (mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
return Padding(
padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
child: CountOfEmailsWidget(value: mailboxNode.item.countTotalEmailsAsString),
+23 -1
View File
@@ -1,5 +1,5 @@
{
"@@last_modified": "2023-08-28T17:04:30.893394",
"@@last_modified": "2023-08-30T16:14:12.029258",
"initializing_data": "Initializing data...",
"@initializing_data": {
"type": "text",
@@ -3189,5 +3189,27 @@
"placeholders": {
"action": {}
}
},
"empty": "Empty",
"@empty": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"clearFolder": "Clear folder",
"@clearFolder": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"messageEmptyFolderDialog": "The messages in {folder} folder will be permanently deleted and you will not be able to restore them",
"@messageEmptyFolderDialog": {
"type": "text",
"placeholders_order": [
"folder"
],
"placeholders": {
"folder": {}
}
}
}
@@ -3295,4 +3295,19 @@ class AppLocalizations {
name: 'empty',
);
}
String get clearFolder {
return Intl.message(
'Clear folder',
name: 'clearFolder',
);
}
String messageEmptyFolderDialog(String folder) {
return Intl.message(
'The messages in $folder folder will be permanently deleted and you will not be able to restore them',
name: 'messageEmptyFolderDialog',
args: [folder]
);
}
}
@@ -43,9 +43,9 @@ extension PresentationMailboxExtension on PresentationMailbox {
bool get isSubscribedMailbox => isSubscribed != null && isSubscribed?.value == true;
bool get allowedToDisplayCountOfUnreadEmails => !(isTrash || isSpam || isDrafts || isTemplates || isSent);
bool get allowedToDisplayCountOfUnreadEmails => !(isTrash || isSpam || isDrafts || isTemplates || isSent) && countUnreadEmails > 0;
bool get allowedToDisplayCountOfTotalEmails => isTrash || isSpam;
bool get allowedToDisplayCountOfTotalEmails => (isTrash || isSpam) && countTotalEmails > 0;
bool get allowedHasEmptyAction => (isTrash || isSpam) && countTotalEmails > 0;