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

add dialog edit rule for mobile

Browse Source
This commit is contained in:
ManhNTX
2022-08-08 14:37:01 +07:00
committed by Dat H. Pham
parent 9ad41d9a6f
commit 2178b8f313
13 changed files with 248 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/ic_delete_rule_mobile.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 1.5C16.3764 1.5 17.9252 2.73358 18.4217 4.99953L24.5 5C25.0523 5 25.5 5.44772 25.5 6C25.5 6.55228 25.0523 7 24.5 7H23.395L21.7827 22.3141C21.622 23.8409 20.3345 25 18.7992 25H9.20079C7.66551 25 6.37799 23.8409 6.21727 22.3141L4.605 7H3.5C2.94772 7 2.5 6.55228 2.5 6C2.5 5.44772 2.94772 5 3.5 5L9.57826 4.99953C10.0748 2.73358 11.6236 1.5 14 1.5ZM21.383 7H6.616L8.20628 22.1047C8.25985 22.6136 8.68903 23 9.20079 23H18.7992C19.311 23 19.7401 22.6136 19.7937 22.1047L21.383 7ZM14 9C14.5523 9 15 9.44772 15 10V20C15 20.5523 14.5523 21 14 21C13.4477 21 13 20.5523 13 20V10C13 9.44772 13.4477 9 14 9ZM18.0499 9.00125C18.6015 9.02883 19.0263 9.49834 18.9988 10.0499L18.4988 20.0499C18.4712 20.6015 18.0017 21.0263 17.4501 20.9988C16.8985 20.9712 16.4737 20.5017 16.5012 19.9501L17.0012 9.95006C17.0288 9.39847 17.4983 8.97367 18.0499 9.00125ZM9.95006 9.00125C10.5017 8.97367 10.9712 9.39847 10.9988 9.95006L11.4988 19.9501C11.5263 20.5017 11.1015 20.9712 10.5499 20.9988C9.99834 21.0263 9.52883 20.6015 9.50125 20.0499L9.00125 10.0499C8.97367 9.49834 9.39847 9.02883 9.95006 9.00125ZM14 3.5C12.7333 3.5 12.0003 3.95411 11.6478 4.99956H16.3522C15.9997 3.95411 15.2667 3.5 14 3.5Z" fill="#E64646"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

assets/images/ic_edit_rule_mobile.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.1213 4.28884L23.7071 5.87462C24.8787 7.0462 24.8787 8.94569 23.7071 10.1173L21 12.8244L10.1464 23.678C9.30249 24.5219 8.15794 24.9959 6.96451 24.9959H5.05C3.91782 24.9959 3 24.0781 3 22.9459V21.0315C3 19.838 3.47414 18.6934 4.31811 17.8494L15.172 6.99616L15.1716 6.99594L17.8787 4.28884C19.0503 3.11726 20.9497 3.11726 22.1213 4.28884ZM16.5 8.4966L5.73228 19.2637C5.26341 19.7325 5 20.3685 5 21.0315V22.9459C5 22.9736 5.02239 22.9959 5.05 22.9959H6.96451C7.62752 22.9959 8.26339 22.7326 8.73222 22.2638L19.5 11.4966L16.5 8.4966ZM19.2929 5.70305L18 6.99594L21 9.99594L22.2929 8.70305C22.6834 8.31253 22.6834 7.67936 22.2929 7.28884L20.7071 5.70305C20.3166 5.31253 19.6834 5.31253 19.2929 5.70305Z" fill="#007AFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 830 B

assets/images/ic_open_edit_rule.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="6" height="20" viewBox="0 0 6 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25 3C5.25 4.24264 4.24264 5.25 3 5.25C1.75736 5.25 0.75 4.24264 0.75 3C0.75 1.75736 1.75736 0.75 3 0.75C4.24264 0.75 5.25 1.75736 5.25 3ZM5.25 10C5.25 11.2426 4.24264 12.25 3 12.25C1.75736 12.25 0.75 11.2426 0.75 10C0.75 8.75736 1.75736 7.75 3 7.75C4.24264 7.75 5.25 8.75736 5.25 10ZM5.25 17C5.25 18.2426 4.24264 19.25 3 19.25C1.75736 19.25 0.75 18.2426 0.75 17C0.75 15.7574 1.75736 14.75 3 14.75C4.24264 14.75 5.25 15.7574 5.25 17Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 564 B

core/lib/presentation/resources/image_paths.dart
+3
View File
@@ -149,6 +149,9 @@ class ImagePaths {
String get icAddNewRules => _getImagePath('ic_add_new_rule.svg');
String get icEditRule => _getImagePath('ic_edit_rule.svg');
String get icDeleteRule => _getImagePath('ic_delete_rule.svg');
String get icOpenEditRule => _getImagePath('ic_open_edit_rule.svg');
String get icEditRuleMobile => _getImagePath('ic_edit_rule_mobile.svg');
String get icDeleteRuleMobile => _getImagePath('ic_delete_rule_mobile.svg');
String _getImagePath(String imageName) {
return AssetsPaths.images + imageName;
core/lib/presentation/views/bottom_popup/cupertino_action_sheet_action_builder.dart
+13 -12
View File
@@ -6,23 +6,24 @@ import 'package:flutter_svg/flutter_svg.dart';
typedef OnCupertinoActionSheetActionClick<T> = void Function(T data);
abstract class CupertinoActionSheetActionBuilder<T> {
@protected final Key key;
@protected final SvgPicture actionIcon;
@protected final String actionName;
@protected OnCupertinoActionSheetActionClick<T>? onCupertinoActionSheetActionClick;
@protected
final Key key;
@protected
final SvgPicture actionIcon;
@protected
final String actionName;
@protected
OnCupertinoActionSheetActionClick<T>? onCupertinoActionSheetActionClick;
CupertinoActionSheetActionBuilder(
this.key,
this.actionIcon,
this.actionName
);
CupertinoActionSheetActionBuilder(this.key, this.actionIcon, this.actionName);
void onActionClick(OnCupertinoActionSheetActionClick<T> onCupertinoActionSheetActionClick) {
void onActionClick(
OnCupertinoActionSheetActionClick<T> onCupertinoActionSheetActionClick) {
this.onCupertinoActionSheetActionClick = onCupertinoActionSheetActionClick;
}
TextStyle actionTextStyle() {
return TextStyle(fontSize: 17, color: AppColor.colorNameEmail);
TextStyle actionTextStyle({TextStyle? textStyle}) {
return textStyle ?? TextStyle(fontSize: 17, color: AppColor.colorNameEmail);
}
Widget build();
env.file
+1 -1
View File
@@ -1,3 +1,3 @@
SERVER_URL=https://gateway.upn.integration-open-paas.org
SERVER_URL=http://localhost
DOMAIN_REDIRECT_URL=http://localhost:3000
WEB_OIDC_CLIENT_ID=teammail-web
lib/features/manage_account/presentation/email_rules/email_rules_controller.dart
+52 -10
View File
@@ -1,15 +1,23 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/account_id.dart';
import 'package:rule_filter/rule_filter/tmail_rule.dart';
import 'package:tmail_ui_user/features/base/base_controller.dart';
import 'package:tmail_ui_user/features/manage_account/domain/state/get_all_rules_state.dart';
import 'package:tmail_ui_user/features/manage_account/domain/usecases/get_all_rules_interactor.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class EmailRulesController extends BaseController {
final listEmailRule = <TMailRule>[].obs;
final _accountDashBoardController = Get.find<ManageAccountDashBoardController>();
final _accountDashBoardController =
Get.find<ManageAccountDashBoardController>();
final GetAllRulesInteractor _getAllRulesInteractor;
final _imagePaths = Get.find<ImagePaths>();
late Worker accountIdWorker;
EmailRulesController(this._getAllRulesInteractor);
@@ -20,16 +28,13 @@ class EmailRulesController extends BaseController {
@override
void onDone() {
viewState.value.fold(
(failure) {},
(success) {
if (success is GetAllRulesSuccess) {
if (success.rules?.isNotEmpty == true) {
listEmailRule.addAll(success.rules!);
}
}
viewState.value.fold((failure) {}, (success) {
if (success is GetAllRulesSuccess) {
if (success.rules?.isNotEmpty == true) {
listEmailRule.addAll(success.rules!);
}
);
}
});
}
@override
@@ -62,4 +67,41 @@ class EmailRulesController extends BaseController {
void _getAllRules(AccountId accountId) {
consumeState(_getAllRulesInteractor.execute(accountId));
}
void openEditRuleMenuAction(BuildContext context, TMailRule rule) {
openContextMenuAction(
context,
[
_editEmailRuleActionTile(context, rule),
_deleteEmailRuleActionTile(context, rule),
],
);
}
Widget _deleteEmailRuleActionTile(BuildContext context, TMailRule rule) {
return (EmailRuleBottomSheetActionTileBuilder(
const Key('delete_emailRule_action'),
SvgPicture.asset(_imagePaths.icDeleteComposer,
color: AppColor.colorActionDeleteConfirmDialog),
AppLocalizations.of(context).deleteRule,
rule,
iconLeftPadding: const EdgeInsets.only(left: 12, right: 16),
iconRightPadding: const EdgeInsets.only(right: 12),
textStyleAction: const TextStyle(
fontSize: 17, color: AppColor.colorActionDeleteConfirmDialog),
)..onActionClick((rule) => deleteEmailRule(rule)))
.build();
}
Widget _editEmailRuleActionTile(BuildContext context, TMailRule rule) {
return (EmailRuleBottomSheetActionTileBuilder(
const Key('edit_emailRule_action'),
SvgPicture.asset(_imagePaths.icEdit),
AppLocalizations.of(context).editRule,
rule,
iconLeftPadding: const EdgeInsets.only(left: 12, right: 16),
iconRightPadding: const EdgeInsets.only(right: 12),
)..onActionClick((rule) => editEmailRule(rule)))
.build();
}
}
lib/features/manage_account/presentation/email_rules/widgets/email_rule_bottom_sheet_action_tile_builder.dart
+57
View File
@@ -0,0 +1,57 @@
import 'package:core/core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:rule_filter/rule_filter/tmail_rule.dart';
class EmailRuleBottomSheetActionTileBuilder
extends CupertinoActionSheetActionBuilder<TMailRule> {
final TMailRule emailRule;
final SvgPicture? actionSelected;
final Color? bgColor;
final EdgeInsets? iconLeftPadding;
final EdgeInsets? iconRightPadding;
final TextStyle? textStyleAction;
EmailRuleBottomSheetActionTileBuilder(
Key key,
SvgPicture actionIcon,
String actionName,
this.emailRule, {
this.actionSelected,
this.bgColor,
this.iconLeftPadding,
this.iconRightPadding,
this.textStyleAction,
}) : 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(textStyle: textStyleAction))),
]),
onPressed: () {
if (onCupertinoActionSheetActionClick != null) {
onCupertinoActionSheetActionClick!(emailRule);
}
},
),
),
);
}
}
lib/features/manage_account/presentation/email_rules/widgets/email_rule_item_widget.dart
+35 -21
View File
@@ -6,23 +6,25 @@ import 'package:rule_filter/rule_filter/tmail_rule.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_controller.dart';
class EmailRulesItemWidget extends GetWidget<EmailRulesController> {
final _responsiveUtils = Get.find<ResponsiveUtils>();
final _imagePaths = Get.find<ImagePaths>();
EmailRulesItemWidget({
Key? key,
required this.editRule,
required this.rule,
required this.deleteRule,
}) : super(key: key);
final void Function(TMailRule) editRule;
final TMailRule rule;
final void Function(TMailRule) deleteRule;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 24),
padding: EdgeInsets.only(
top: 15,
bottom: 15,
left: _responsiveUtils.isMobile(context) ? 16 : 24,
right: _responsiveUtils.isMobile(context) ? 0 : 24
),
color: Colors.white,
child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
Text(rule.name,
@@ -31,22 +33,34 @@ class EmailRulesItemWidget extends GetWidget<EmailRulesController> {
fontWeight: FontWeight.w400,
color: Colors.black)),
const Spacer(),
buildIconWeb(
icon: SvgPicture.asset(
_imagePaths.icEditRule,
fit: BoxFit.fill,
),
onTap: () {
editRule.call(rule);
}),
buildIconWeb(
icon: SvgPicture.asset(
_imagePaths.icDeleteRule,
fit: BoxFit.fill,
),
onTap: () {
deleteRule.call(rule);
}),
if (!_responsiveUtils.isMobile(context))
buildIconWeb(
icon: SvgPicture.asset(
_imagePaths.icEditRule,
fit: BoxFit.fill,
),
onTap: () {
controller.editEmailRule(rule);
}),
if (!_responsiveUtils.isMobile(context))
buildIconWeb(
icon: SvgPicture.asset(
_imagePaths.icDeleteRule,
fit: BoxFit.fill,
),
onTap: () {
controller.deleteEmailRule(rule);
}),
if (_responsiveUtils.isMobile(context))
buildIconWeb(
icon: SvgPicture.asset(
_imagePaths.icOpenEditRule,
fit: BoxFit.fill,
),
iconPadding: const EdgeInsets.all(0),
onTap: () {
controller.openEditRuleMenuAction(context, rule);
}),
]),
);
}
lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart
+50 -26
View File
@@ -21,31 +21,6 @@ class EmailRulesHeaderWidget extends GetWidget<EmailRulesController> {
@override
Widget build(BuildContext context) {
final buttonAddNewRule = Row(children: [
if (!responsiveUtils.isMobile(context))
(ButtonBuilder(imagePaths.icAddNewRules)
..key(const Key('button_new_rule'))
..decoration(BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColor.colorTextButton))
..paddingIcon(const EdgeInsets.only(right: 8))
..iconColor(Colors.white)
..maxWidth(170)
..size(20)
..radiusSplash(10)
..padding(const EdgeInsets.symmetric(vertical: 12))
..textStyle(const TextStyle(
fontSize: 17,
color: Colors.white,
fontWeight: FontWeight.w500,
))
..onPressActionClick(() => controller.goToCreateNewRule())
..text(
AppLocalizations.of(context).addNewRule,
isVertical: false,
))
.build()
]);
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
@@ -65,8 +40,57 @@ class EmailRulesHeaderWidget extends GetWidget<EmailRulesController> {
fontWeight: FontWeight.normal,
color: AppColor.colorTextButtonHeaderThread)),
const SizedBox(height: 24),
buttonAddNewRule,
_buildButtonAddNewRule(context),
]),
);
}
Widget _buildButtonAddNewRule(BuildContext context) {
if (!responsiveUtils.isMobile(context)) {
return (ButtonBuilder(imagePaths.icAddNewRules)
..key(const Key('button_new_rule'))
..decoration(BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColor.colorTextButton))
..paddingIcon(const EdgeInsets.only(right: 8))
..iconColor(Colors.white)
..maxWidth(130)
..size(20)
..radiusSplash(10)
..padding(const EdgeInsets.symmetric(vertical: 12))
..textStyle(const TextStyle(
fontSize: 17,
color: Colors.white,
fontWeight: FontWeight.w500,
))
..onPressActionClick(() => controller.goToCreateNewRule())
..text(
AppLocalizations.of(context).addNewRule,
isVertical: false,
))
.build();
} else {
return (ButtonBuilder(imagePaths.icAddNewRules)
..key(const Key('button_new_rule'))
..decoration(BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColor.colorTextButton))
..paddingIcon(const EdgeInsets.only(right: 8))
..iconColor(Colors.white)
..size(20)
..radiusSplash(10)
..padding(const EdgeInsets.symmetric(vertical: 12))
..textStyle(const TextStyle(
fontSize: 17,
color: Colors.white,
fontWeight: FontWeight.w500,
))
..onPressActionClick(() => controller.goToCreateNewRule())
..text(
AppLocalizations.of(context).addNewRule,
isVertical: false,
))
.build();
}
}
}
lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart
-6
View File
@@ -44,12 +44,6 @@ class ListEmailRulesWidget extends GetWidget<EmailRulesController> {
final rule = controller.listEmailRule[index];
return EmailRulesItemWidget(
rule: rule,
editRule: (rule) {
controller.editEmailRule(rule);
},
deleteRule: (rule) {
controller.editEmailRule(rule);
},
);
},
separatorBuilder: (BuildContext context, int index) =>
lib/l10n/intl_messages.arb
+13 -1
View File
@@ -1,5 +1,5 @@
{
"@@last_modified": "2022-08-08T08:50:15.957543",
"@@last_modified": "2022-08-08T14:35:21.345792",
"initializing_data": "Initializing data...",
"@initializing_data": {
"type": "text",
@@ -1777,5 +1777,17 @@
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"editRule": "Edit rule",
"@editRule": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"deleteRule": "Delete rule",
"@deleteRule": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
}
}
lib/main/localizations/app_localizations.dart
+14
View File
@@ -1826,4 +1826,18 @@ class AppLocalizations {
name: 'headerNameOfRules',
);
}
String get editRule {
return Intl.message(
'Edit rule',
name: 'editRule',
);
}
String get deleteRule {
return Intl.message(
'Delete rule',
name: 'deleteRule',
);
}
}