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

TF-976 Blur out the option context menu mailbox action when deactivated on web

Browse Source
This commit is contained in:
dab246
2022-09-24 11:44:16 +07:00
committed by Dat H. Pham
parent ac9f00c948
commit 4d372336c0
5 changed files with 149 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/base/widget/context_menu_item_action.dart
+19
View File
@@ -0,0 +1,19 @@
import 'package:equatable/equatable.dart';
abstract class ContextMenuItemAction<T> with EquatableMixin {
final T action;
final ContextMenuItemState state;
ContextMenuItemAction(this.action, this.state);
@override
List<Object?> get props => [action, state];
bool get isActivated => state == ContextMenuItemState.activated;
}
enum ContextMenuItemState {
activated,
deactivated
}
lib/features/mailbox/presentation/mailbox_view_web.dart
+77 -40
View File
@@ -8,6 +8,7 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
import 'package:tmail_ui_user/features/base/mixin/popup_menu_widget_mixin.dart';
import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.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';
@@ -375,66 +376,102 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
);
}
void _openMailboxMenuAction(BuildContext context, RelativeRect position,
PresentationMailbox mailbox) {
final listMailboxActions = [
if (mailbox.getCountUnReadEmails().isNotEmpty) MailboxActions.markAsRead,
if (!mailbox.hasRole()) MailboxActions.move,
if (!mailbox.hasRole()) MailboxActions.rename,
if (!mailbox.hasRole()) MailboxActions.delete,
void _openMailboxMenuAction(
BuildContext context,
RelativeRect position,
PresentationMailbox mailbox
) {
final mailboxActionsSupported = [
MailboxActions.markAsRead,
MailboxActions.move,
MailboxActions.rename,
MailboxActions.delete
];
if (listMailboxActions.isNotEmpty) {
if (_responsiveUtils.isScreenWithShortestSide(context)) {
controller.openContextMenuAction(context,
_bottomSheetIdentityActionTiles(context, mailbox, listMailboxActions));
} else {
controller.openPopupMenuAction(context, position,
_popupMenuMailboxActionTiles(context, mailbox, listMailboxActions));
}
final listContextMenuItemAction = mailboxActionsSupported
.map((action) => ContextMenuItemMailboxAction(
action,
action.getContextMenuItemState(mailbox)))
.toList();
if (_responsiveUtils.isScreenWithShortestSide(context)) {
controller.openContextMenuAction(
context,
_bottomSheetIdentityActionTiles(
context,
mailbox,
listContextMenuItemAction));
} else {
controller.openPopupMenuAction(
context,
position,
_popupMenuMailboxActionTiles(
context,
mailbox,
listContextMenuItemAction));
}
}
List<Widget> _bottomSheetIdentityActionTiles(BuildContext context,
PresentationMailbox mailbox, List<MailboxActions> listMailboxActions) {
return listMailboxActions
List<Widget> _bottomSheetIdentityActionTiles(
BuildContext context,
PresentationMailbox mailbox,
List<ContextMenuItemMailboxAction> contextMenuActions
) {
return contextMenuActions
.map((action) => _mailboxContextMenuActionTile(context, action, mailbox))
.toList();
}
Widget _mailboxContextMenuActionTile(BuildContext context, MailboxActions actions,
PresentationMailbox mailbox) {
Widget _mailboxContextMenuActionTile(
BuildContext context,
ContextMenuItemMailboxAction contextMenuItem,
PresentationMailbox mailbox
) {
return (MailboxBottomSheetActionTileBuilder(
Key('${actions.name}_action'),
Key('${contextMenuItem.action.name}_action'),
SvgPicture.asset(
actions.getContextMenuIcon(_imagePaths),
color: actions.getColorContextMenuIcon()),
actions.getTitleContextMenu(context),
mailbox)
contextMenuItem.action.getContextMenuIcon(_imagePaths),
color: contextMenuItem.action.getColorContextMenuIcon()),
contextMenuItem.action.getTitleContextMenu(context),
mailbox,
absorbing: !contextMenuItem.isActivated,
opacity: !contextMenuItem.isActivated)
..onActionClick((mailbox) =>
controller.handleMailboxAction(context, actions, mailbox)))
controller.handleMailboxAction(context, contextMenuItem.action, mailbox)))
.build();
}
List<PopupMenuEntry> _popupMenuMailboxActionTiles(BuildContext context,
PresentationMailbox mailbox, List<MailboxActions> listMailboxActions) {
return listMailboxActions
List<PopupMenuEntry> _popupMenuMailboxActionTiles(
BuildContext context,
PresentationMailbox mailbox,
List<ContextMenuItemMailboxAction> contextMenuActions
) {
return contextMenuActions
.map((action) => _mailboxPopupMenuActionTile(context, action, mailbox))
.toList();
}
PopupMenuItem _mailboxPopupMenuActionTile(BuildContext context, MailboxActions actions,
PresentationMailbox mailbox) {
PopupMenuItem _mailboxPopupMenuActionTile(
BuildContext context,
ContextMenuItemMailboxAction contextMenuItem,
PresentationMailbox mailbox
) {
return PopupMenuItem(
padding: EdgeInsets.zero,
child: popupItem(actions.getContextMenuIcon(_imagePaths),
actions.getTitleContextMenu(context),
colorIcon: actions.getColorContextMenuIcon(),
styleName: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 17,
color: actions.getColorContextMenuIcon()),
onCallbackAction: () =>
controller.handleMailboxAction(context, actions, mailbox)));
child: AbsorbPointer(
absorbing: !contextMenuItem.isActivated,
child: Opacity(
opacity: contextMenuItem.isActivated ? 1.0 : 0.3,
child: popupItem(contextMenuItem.action.getContextMenuIcon(_imagePaths),
contextMenuItem.action.getTitleContextMenu(context),
colorIcon: contextMenuItem.action.getColorContextMenuIcon(),
styleName: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 17,
color: contextMenuItem.action.getColorContextMenuIcon()),
onCallbackAction: () =>
controller.handleMailboxAction(context, contextMenuItem.action, mailbox)),
),
));
}
}
lib/features/mailbox/presentation/model/context_item_mailbox_action.dart
+7
View File
@@ -0,0 +1,7 @@
import 'package:tmail_ui_user/features/base/widget/context_menu_item_action.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
class ContextMenuItemMailboxAction extends ContextMenuItemAction<MailboxActions> {
ContextMenuItemMailboxAction(super.action, super.state);
}
lib/features/mailbox/presentation/model/mailbox_actions.dart
+19
View File
@@ -1,6 +1,8 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:model/mailbox/presentation_mailbox.dart';
import 'package:tmail_ui_user/features/base/widget/context_menu_item_action.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
enum MailboxActions {
@@ -113,4 +115,21 @@ extension MailboxActionsExtension on MailboxActions {
return true;
}
}
ContextMenuItemState getContextMenuItemState(PresentationMailbox mailbox) {
switch(this) {
case MailboxActions.markAsRead:
return mailbox.getCountUnReadEmails().isNotEmpty
? ContextMenuItemState.activated
: ContextMenuItemState.deactivated;
case MailboxActions.move:
case MailboxActions.rename:
case MailboxActions.delete:
return mailbox.hasRole()
? ContextMenuItemState.deactivated
: ContextMenuItemState.activated;
default:
return ContextMenuItemState.deactivated;
}
}
}
lib/features/mailbox/presentation/widgets/mailbox_bottom_sheet_action_tile_builder.dart
+27 -17
View File
@@ -12,6 +12,8 @@ class MailboxBottomSheetActionTileBuilder extends CupertinoActionSheetActionBuil
final Color? bgColor;
final EdgeInsets? iconLeftPadding;
final EdgeInsets? iconRightPadding;
final bool opacity;
final bool absorbing;
MailboxBottomSheetActionTileBuilder(
Key key,
@@ -23,28 +25,36 @@ class MailboxBottomSheetActionTileBuilder extends CupertinoActionSheetActionBuil
this.bgColor,
this.iconLeftPadding,
this.iconRightPadding,
this.opacity = false,
this.absorbing = false,
}
) : super(key, actionIcon, actionName);
@override
Widget build() {
return Container(
color: bgColor ?? Colors.white,
child: MouseRegion(
cursor: BuildUtils.isWeb ? MaterialStateMouseCursor.clickable : MouseCursor.defer,
child: CupertinoActionSheetAction(
key: key,
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Padding(
padding: iconLeftPadding ?? const EdgeInsets.only(left: 12, right: 16),
child: actionIcon),
Expanded(child: Text(actionName, textAlign: TextAlign.left, style: actionTextStyle())),
]),
onPressed: () {
if (onCupertinoActionSheetActionClick != null) {
onCupertinoActionSheetActionClick!(presentationMailbox);
}
},
return AbsorbPointer(
absorbing: absorbing,
child: Opacity(
opacity: opacity ? 0.3 : 1.0,
child: Container(
color: bgColor ?? Colors.white,
child: MouseRegion(
cursor: BuildUtils.isWeb ? MaterialStateMouseCursor.clickable : MouseCursor.defer,
child: CupertinoActionSheetAction(
key: key,
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Padding(
padding: iconLeftPadding ?? const EdgeInsets.only(left: 12, right: 16),
child: actionIcon),
Expanded(child: Text(actionName, textAlign: TextAlign.left, style: actionTextStyle())),
]),
onPressed: () {
if (onCupertinoActionSheetActionClick != null) {
onCupertinoActionSheetActionClick!(presentationMailbox);
}
},
),
),
),
),
);