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

TF-612 App new design for list email rule filter

Browse Source
This commit is contained in:
dab246
2022-08-11 16:03:56 +07:00
committed by Dat H. Pham
parent 8c2216297c
commit 0aabcc81b9
4 changed files with 90 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/extensions/color_extension.dart
+2
View File
@@ -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);
lib/features/manage_account/presentation/email_rules/email_rules_view.dart
+34 -24
View File
@@ -20,36 +20,46 @@ class EmailRulesView extends GetWidget<EmailRulesController> 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(),
lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart
+1
View File
@@ -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,
lib/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart
+53 -40
View File
@@ -17,48 +17,61 @@ class ListEmailRulesWidget extends GetWidget<EmailRulesController> {
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,
),
);
}),
),
]),
),
);
}
}