From 0aabcc81b9d606785a0e111433d78b951dae3f4a Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 11 Aug 2022 16:03:56 +0700 Subject: [PATCH] TF-612 App new design for list email rule filter --- .../extensions/color_extension.dart | 2 + .../email_rules/email_rules_view.dart | 58 +++++++----- .../widgets/email_rules_header_widget.dart | 1 + .../widgets/list_email_rules_widget.dart | 93 +++++++++++-------- 4 files changed, 90 insertions(+), 64 deletions(-) diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index a6f85e759..94cbb1c11 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -131,6 +131,8 @@ extension AppColor on Color { static const colorSelectedRichTextButton = Color(0x99EBEDF0); static const colorShadowDestinationPicker = Color(0x33000000); static const colorBackgroundSnackBar = Color(0xFF343438); + static const colorBackgroundHeaderListRuleFilter = Color(0xFFFAF7F7); + static const colorBorderListRuleFilter = Color(0xFFE7E8EC); static const colorBackgroundFieldConditionRulesFilter = Color(0xFFF2F3F5); static const colorDividerRuleFilter = Color(0xFFE7E8EC); diff --git a/lib/features/manage_account/presentation/email_rules/email_rules_view.dart b/lib/features/manage_account/presentation/email_rules/email_rules_view.dart index 15feb4b9f..ba80af22d 100644 --- a/lib/features/manage_account/presentation/email_rules/email_rules_view.dart +++ b/lib/features/manage_account/presentation/email_rules/email_rules_view.dart @@ -20,36 +20,46 @@ class EmailRulesView extends GetWidget with AppLoaderMixin : Colors.white, body: Container( width: double.infinity, - margin: _responsiveUtils.isWebDesktop(context) - ? const EdgeInsets.only(left: 48, right: 24, top: 24, bottom: 24) - : EdgeInsets.zero, - child: ClipRRect( - borderRadius: BorderRadius.circular( - _responsiveUtils.isWebDesktop(context) ? 20 : 0), - child: Padding( - padding: EdgeInsets.only( - left: _responsiveUtils.isWebDesktop(context) ? 24 : 10, - top: 24, - right: 24), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - EmailRulesHeaderWidget( - imagePaths: _imagePaths, - responsiveUtils: _responsiveUtils, - createRule: () => controller.goToCreateNewRule(), - ), - const SizedBox(height: 22), - _buildLoadingView(), - const Expanded(child: ListEmailRulesWidget()) - ], + margin: _getMarginView(context), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + EmailRulesHeaderWidget( + imagePaths: _imagePaths, + responsiveUtils: _responsiveUtils, + createRule: () => controller.goToCreateNewRule(), ), - ), + SizedBox(height: _responsiveUtils.isWebDesktop(context) ? 24 : 16), + _buildLoadingView(), + const Expanded(child: ListEmailRulesWidget()) + ], ), ), ); } + EdgeInsets _getMarginView(BuildContext context) { + if (BuildUtils.isWeb) { + if (_responsiveUtils.isDesktop(context)) { + return const EdgeInsets.only(left: 16, top: 16, right: 24, bottom: 24); + } else if (_responsiveUtils.isTabletLarge(context) || + _responsiveUtils.isTablet(context)) { + return const EdgeInsets.only(right: 32, top: 16, bottom: 16); + } else { + return const EdgeInsets.only(right: 32, top: 16, bottom: 16); + } + } else { + if (_responsiveUtils.isDesktop(context) || + _responsiveUtils.isLandscapeTablet(context) || + _responsiveUtils.isTabletLarge(context) || + _responsiveUtils.isTablet(context)) { + return const EdgeInsets.only(right: 32, top: 16, bottom: 16); + } else { + return const EdgeInsets.only(right: 32, top: 16, bottom: 16); + } + } + } + Widget _buildLoadingView() { return Obx(() => controller.viewState.value.fold( (failure) => const SizedBox.shrink(), diff --git a/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart index 7a7dfdee3..2a57db42c 100644 --- a/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart +++ b/lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart @@ -20,6 +20,7 @@ class EmailRulesHeaderWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( + width: double.infinity, padding: const EdgeInsets.all(24), decoration: BoxDecoration( color: AppColor.colorBackgroundWrapIconStyleCode, diff --git a/lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart b/lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart index f0761695d..02929f8ae 100644 --- a/lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart +++ b/lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart @@ -17,48 +17,61 @@ class ListEmailRulesWidget extends GetWidget { decoration: BoxDecoration( color: AppColor.colorBackgroundWrapIconStyleCode, borderRadius: BorderRadius.circular(16), + border: Border.all( + width: 1, + color: AppColor.colorBorderListRuleFilter) ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Padding( - padding: const EdgeInsets.symmetric( - vertical: 28, - horizontal: 24, + child: ClipRRect( + borderRadius: BorderRadius.circular(16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: double.infinity, + decoration: const BoxDecoration( + color: AppColor.colorBackgroundHeaderListRuleFilter, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(16), + topRight: Radius.circular(16)), + ), + padding: const EdgeInsets.symmetric( + vertical: 28, + horizontal: 24, + ), + child: Text(AppLocalizations.of(context).headerNameOfRules, + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: AppColor.colorTextButtonHeaderThread)), ), - child: Text(AppLocalizations.of(context).headerNameOfRules, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - color: AppColor.colorTextButtonHeaderThread)), - ), - const Divider( - color: AppColor.lineItemListColor, - height: 1, - thickness: 0.2, - ), - Expanded( - child: Obx(() { - log('ListEmailRulesWidget::build(): ${controller.listEmailRule}'); - return ListView.separated( - shrinkWrap: true, - itemCount: controller.listEmailRule.length, - itemBuilder: (context, index) { - final ruleWithId = controller.listEmailRule[index] - .copyWith(id: RuleId(id: Id(index.toString()))); - log('ListEmailRulesWidget::build(): $ruleWithId'); - return EmailRulesItemWidget(rule: ruleWithId); - }, - separatorBuilder: (context, index) => const Divider( - color: AppColor.lineItemListColor, - height: 1, - thickness: 0.2, - ), - ); - }), - ), - ]), + const Divider( + color: AppColor.lineItemListColor, + height: 1, + thickness: 0.2, + ), + Expanded( + child: Obx(() { + log('ListEmailRulesWidget::build(): ${controller.listEmailRule}'); + return ListView.separated( + shrinkWrap: true, + itemCount: controller.listEmailRule.length, + itemBuilder: (context, index) { + final ruleWithId = controller.listEmailRule[index] + .copyWith(id: RuleId(id: Id(index.toString()))); + log('ListEmailRulesWidget::build(): $ruleWithId'); + return EmailRulesItemWidget(rule: ruleWithId); + }, + separatorBuilder: (context, index) => const Divider( + color: AppColor.lineItemListColor, + height: 1, + thickness: 0.2, + ), + ); + }), + ), + ]), + ), ); } }