TF-1118 Apply new design Forwarding on Mobile/Tablet

This commit is contained in:
dab246
2022-11-04 01:33:34 +07:00
committed by Dat H. Pham
parent 715e71d8cb
commit 2402371ca3
7 changed files with 55 additions and 24 deletions
@@ -141,8 +141,6 @@ class ForwardController extends BaseController {
} }
void _handleDeleteRecipientAction(Set<String> listRecipients) { void _handleDeleteRecipientAction(Set<String> listRecipients) {
popBack();
final accountId = accountDashBoardController.accountId.value; final accountId = accountDashBoardController.accountId.value;
if (accountId != null && if (accountId != null &&
currentForward.value != null && currentForward.value != null &&
@@ -236,6 +234,8 @@ class ForwardController extends BaseController {
} }
void addRecipientAction(BuildContext context) { void addRecipientAction(BuildContext context) {
FocusScope.of(context).unfocus();
final accountId = accountDashBoardController.accountId.value; final accountId = accountDashBoardController.accountId.value;
final emailAddressSelected = recipientController.emailAddressSelected; final emailAddressSelected = recipientController.emailAddressSelected;
@@ -35,17 +35,24 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
ForwardHeaderWidget(imagePaths: _imagePaths, responsiveUtils: _responsiveUtils), if (_responsiveUtils.isWebDesktop(context))
Container(height: 1, color: AppColor.colorDividerHeaderSetting), ...[
ForwardHeaderWidget(imagePaths: _imagePaths, responsiveUtils: _responsiveUtils),
Container(height: 1, color: AppColor.colorDividerHeaderSetting)
],
Expanded(child: SingleChildScrollView( Expanded(child: SingleChildScrollView(
child: Column(children: [ physics: const ClampingScrollPhysics(),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
if (!_responsiveUtils.isWebDesktop(context))
_buildTitleHeader(context),
_buildLoadingView(), _buildLoadingView(),
Obx(() { Obx(() {
if (controller.currentForward.value != null) { if (controller.currentForward.value != null) {
return Column(children: [ return Column(children: [
_buildKeepLocalSwitchButton(context), _buildKeepLocalSwitchButton(context),
_buildAddRecipientsFormWidget(context), _buildAddRecipientsFormWidget(context),
ListEmailForwardsWidget() if (controller.listRecipientForward.isNotEmpty)
ListEmailForwardsWidget()
]); ]);
} else { } else {
return const SizedBox.shrink(); return const SizedBox.shrink();
@@ -59,6 +66,23 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
); );
} }
Widget _buildTitleHeader(BuildContext context) {
return Container(
color: Colors.white,
width: double.infinity,
margin: SettingsUtils.getMarginTitleHeaderForwarding(context, _responsiveUtils),
padding: SettingsUtils.getPaddingTitleHeaderForwarding(context, _responsiveUtils),
child: Text(
AppLocalizations.of(context).forwardingSettingExplanation,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
color: AppColor.colorSettingExplanation
)
),
);
}
Widget _buildKeepLocalSwitchButton(BuildContext context) { Widget _buildKeepLocalSwitchButton(BuildContext context) {
return Container( return Container(
color: Colors.transparent, color: Colors.transparent,
@@ -130,7 +154,7 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
)); ));
} }
Widget _buildAddRecipientButton(BuildContext context) { Widget _buildAddRecipientButton(BuildContext context, {double? maxWidth}) {
return (ButtonBuilder(_imagePaths.icAddIdentity) return (ButtonBuilder(_imagePaths.icAddIdentity)
..key(const Key('button_add_recipient')) ..key(const Key('button_add_recipient'))
..decoration(BoxDecoration( ..decoration(BoxDecoration(
@@ -138,7 +162,7 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
color: AppColor.colorTextButton)) color: AppColor.colorTextButton))
..paddingIcon(const EdgeInsets.only(right: 8)) ..paddingIcon(const EdgeInsets.only(right: 8))
..iconColor(Colors.white) ..iconColor(Colors.white)
..maxWidth(170) ..maxWidth(maxWidth ?? 170)
..size(20) ..size(20)
..radiusSplash(10) ..radiusSplash(10)
..padding(const EdgeInsets.symmetric(vertical: 12)) ..padding(const EdgeInsets.symmetric(vertical: 12))
@@ -163,7 +187,7 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
children: [ children: [
_buildAddRecipientInputField(), _buildAddRecipientInputField(),
const SizedBox(height: 16), const SizedBox(height: 16),
_buildAddRecipientButton(context) _buildAddRecipientButton(context, maxWidth: double.infinity)
], ],
), ),
); );
@@ -1,7 +1,6 @@
import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/style_utils.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -23,9 +22,6 @@ class ForwardHeaderWidget extends StatelessWidget {
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text( Text(
AppLocalizations.of(context).forwarding, AppLocalizations.of(context).forwarding,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
maxLines: 1,
style: const TextStyle( style: const TextStyle(
fontSize: 20, fontSize: 20,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
@@ -33,9 +29,6 @@ class ForwardHeaderWidget extends StatelessWidget {
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
AppLocalizations.of(context).forwardingSettingExplanation, AppLocalizations.of(context).forwardingSettingExplanation,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
maxLines: 3,
style: const TextStyle( style: const TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
@@ -37,6 +37,7 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
Obx(() { Obx(() {
return ListView.separated( return ListView.separated(
shrinkWrap: true, shrinkWrap: true,
primary: false,
itemCount: controller.listRecipientForward.length, itemCount: controller.listRecipientForward.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final recipientForward = controller.listRecipientForward[index]; final recipientForward = controller.listRecipientForward[index];
@@ -70,6 +70,7 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
SettingFirstLevelTileBuilder( SettingFirstLevelTileBuilder(
AccountMenuItem.forward.getName(context), AccountMenuItem.forward.getName(context),
AccountMenuItem.forward.getIcon(_imagePaths), AccountMenuItem.forward.getIcon(_imagePaths),
subtitle: AppLocalizations.of(context).forwardingSettingExplanation,
() => controller.selectSettings(AccountMenuItem.forward) () => controller.selectSettings(AccountMenuItem.forward)
), ),
Divider( Divider(
@@ -90,7 +91,7 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
AccountMenuItem.vacation.getName(context), AccountMenuItem.vacation.getName(context),
AccountMenuItem.vacation.getIcon(_imagePaths), AccountMenuItem.vacation.getIcon(_imagePaths),
subtitle: AppLocalizations.of(context).vacationSettingExplanation, subtitle: AppLocalizations.of(context).vacationSettingExplanation,
() => controller.selectSettings(AccountMenuItem.vacation) () => controller.selectSettings(AccountMenuItem.vacation)
), ),
Divider( Divider(
color: AppColor.colorDividerComposer, color: AppColor.colorDividerComposer,
@@ -87,13 +87,25 @@ class SettingsUtils {
} }
static BoxDecoration? getBoxDecorationForListRecipient(BuildContext context, ResponsiveUtils responsiveUtils) { static BoxDecoration? getBoxDecorationForListRecipient(BuildContext context, ResponsiveUtils responsiveUtils) {
if (responsiveUtils.isWebDesktop(context)) { return BoxDecoration(
return BoxDecoration( borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(12), border: Border.all(color: AppColor.colorBorderSettingContentWeb, width: 1),
border: Border.all(color: AppColor.colorBorderSettingContentWeb, width: 1), color: Colors.white);
color: Colors.white); }
static EdgeInsets getMarginTitleHeaderForwarding(BuildContext context, ResponsiveUtils responsiveUtils) {
if (responsiveUtils.isPortraitMobile(context)) {
return EdgeInsets.zero;
} else { } else {
return null; return const EdgeInsets.symmetric(horizontal: 20);
}
}
static EdgeInsets getPaddingTitleHeaderForwarding(BuildContext context, ResponsiveUtils responsiveUtils) {
if (responsiveUtils.isPortraitMobile(context)) {
return const EdgeInsets.only(left: 16, right: 16);
} else {
return const EdgeInsets.all(12);
} }
} }
} }
@@ -442,7 +442,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
return html_editor_browser.HtmlEditor( return html_editor_browser.HtmlEditor(
key: const Key('vacation_message_html_text_editor_web'), key: const Key('vacation_message_html_text_editor_web'),
controller: controller.richTextControllerForWeb.editorController, controller: controller.richTextControllerForWeb.editorController,
htmlEditorOptions: html_editor_browser.HtmlEditorOptions( htmlEditorOptions: const html_editor_browser.HtmlEditorOptions(
hint: '', hint: '',
darkMode: false, darkMode: false,
customBodyCssStyle: bodyCssStyleForEditor), customBodyCssStyle: bodyCssStyleForEditor),