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 colorSelectedRichTextButton = Color(0x99EBEDF0);
static const colorShadowDestinationPicker = Color(0x33000000); static const colorShadowDestinationPicker = Color(0x33000000);
static const colorBackgroundSnackBar = Color(0xFF343438); static const colorBackgroundSnackBar = Color(0xFF343438);
static const colorBackgroundHeaderListRuleFilter = Color(0xFFFAF7F7);
static const colorBorderListRuleFilter = Color(0xFFE7E8EC);
static const colorBackgroundFieldConditionRulesFilter = Color(0xFFF2F3F5); static const colorBackgroundFieldConditionRulesFilter = Color(0xFFF2F3F5);
static const colorDividerRuleFilter = Color(0xFFE7E8EC); 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, : Colors.white,
body: Container( body: Container(
width: double.infinity, width: double.infinity,
margin: _responsiveUtils.isWebDesktop(context) margin: _getMarginView(context),
? const EdgeInsets.only(left: 48, right: 24, top: 24, bottom: 24) child: Column(
: EdgeInsets.zero, crossAxisAlignment: CrossAxisAlignment.start,
child: ClipRRect( children: [
borderRadius: BorderRadius.circular( EmailRulesHeaderWidget(
_responsiveUtils.isWebDesktop(context) ? 20 : 0), imagePaths: _imagePaths,
child: Padding( responsiveUtils: _responsiveUtils,
padding: EdgeInsets.only( createRule: () => controller.goToCreateNewRule(),
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())
],
), ),
), 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() { Widget _buildLoadingView() {
return Obx(() => controller.viewState.value.fold( return Obx(() => controller.viewState.value.fold(
(failure) => const SizedBox.shrink(), (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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
width: double.infinity,
padding: const EdgeInsets.all(24), padding: const EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.colorBackgroundWrapIconStyleCode, 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( decoration: BoxDecoration(
color: AppColor.colorBackgroundWrapIconStyleCode, color: AppColor.colorBackgroundWrapIconStyleCode,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
border: Border.all(
width: 1,
color: AppColor.colorBorderListRuleFilter)
), ),
child: Column( child: ClipRRect(
crossAxisAlignment: CrossAxisAlignment.start, borderRadius: BorderRadius.circular(16),
mainAxisSize: MainAxisSize.min, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Padding( mainAxisSize: MainAxisSize.min,
padding: const EdgeInsets.symmetric( children: [
vertical: 28, Container(
horizontal: 24, 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, const Divider(
style: const TextStyle( color: AppColor.lineItemListColor,
fontSize: 16, height: 1,
fontWeight: FontWeight.w500, thickness: 0.2,
color: AppColor.colorTextButtonHeaderThread)), ),
), Expanded(
const Divider( child: Obx(() {
color: AppColor.lineItemListColor, log('ListEmailRulesWidget::build(): ${controller.listEmailRule}');
height: 1, return ListView.separated(
thickness: 0.2, shrinkWrap: true,
), itemCount: controller.listEmailRule.length,
Expanded( itemBuilder: (context, index) {
child: Obx(() { final ruleWithId = controller.listEmailRule[index]
log('ListEmailRulesWidget::build(): ${controller.listEmailRule}'); .copyWith(id: RuleId(id: Id(index.toString())));
return ListView.separated( log('ListEmailRulesWidget::build(): $ruleWithId');
shrinkWrap: true, return EmailRulesItemWidget(rule: ruleWithId);
itemCount: controller.listEmailRule.length, },
itemBuilder: (context, index) { separatorBuilder: (context, index) => const Divider(
final ruleWithId = controller.listEmailRule[index] color: AppColor.lineItemListColor,
.copyWith(id: RuleId(id: Id(index.toString()))); height: 1,
log('ListEmailRulesWidget::build(): $ruleWithId'); thickness: 0.2,
return EmailRulesItemWidget(rule: ruleWithId); ),
}, );
separatorBuilder: (context, index) => const Divider( }),
color: AppColor.lineItemListColor, ),
height: 1, ]),
thickness: 0.2, ),
),
);
}),
),
]),
); );
} }
} }