From d0ff07edfbbfd2f7ff2a4f4480f264f28cc88027 Mon Sep 17 00:00:00 2001 From: dab246 Date: Wed, 21 Sep 2022 11:52:42 +0700 Subject: [PATCH] TF-913 Fix button text line break in advanced search view --- core/lib/core.dart | 1 + .../extensions/color_extension.dart | 1 + .../views/button/icon_button_web.dart | 14 +- .../views/checkbox/labeled_checkbox.dart | 60 ++++++++ .../advanced_search_filter_form.dart | 133 +++++++++--------- ...vanced_search_filter_form_bottom_view.dart | 69 ++++----- .../advanced_search_filter_overlay.dart | 43 ++---- 7 files changed, 182 insertions(+), 139 deletions(-) create mode 100644 core/lib/presentation/views/checkbox/labeled_checkbox.dart diff --git a/core/lib/core.dart b/core/lib/core.dart index 1229f66ed..68e3c8030 100644 --- a/core/lib/core.dart +++ b/core/lib/core.dart @@ -75,6 +75,7 @@ export 'presentation/views/quick_search/quick_search_input_form.dart'; export 'presentation/views/toast/toast_position.dart'; export 'presentation/views/toast/tmail_toast.dart'; export 'presentation/views/bottom_popup/full_screen_action_sheet_builder.dart'; +export 'presentation/views/checkbox/labeled_checkbox.dart'; // Resources export 'presentation/resources/assets_paths.dart'; diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index cf320a165..e0bc95ce8 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -146,6 +146,7 @@ extension AppColor on Color { static const colorDivider = Color(0xFFE7E8EC); static const colorDividerVertical = Color(0xFF99A2AD); static const colorCloseButton = Color(0xFF818C99); + static const colorDropShadow = Color(0x0F000000); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/core/lib/presentation/views/button/icon_button_web.dart b/core/lib/presentation/views/button/icon_button_web.dart index 85d99b2b2..a0009b36b 100644 --- a/core/lib/presentation/views/button/icon_button_web.dart +++ b/core/lib/presentation/views/button/icon_button_web.dart @@ -120,9 +120,15 @@ Widget buildTextButton(String text, { backgroundColor: MaterialStateProperty.resolveWith((states) => backgroundColor ?? AppColor.colorTextButton), elevation: MaterialStateProperty.resolveWith((states) => 0), padding: MaterialStateProperty.resolveWith( - (Set states) => padding ?? EdgeInsets.zero), + (Set states) => padding ?? EdgeInsets.symmetric(horizontal: 8)), shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(radius ?? 0)))), - child: Text(text, style: textStyle ?? TextStyle(fontSize: 17, color: Colors.white, fontWeight: FontWeight.w500)), + child: Text( + text, + textAlign: TextAlign.center, + style: textStyle ?? TextStyle( + fontSize: 17, + color: Colors.white, + fontWeight: FontWeight.w500)), onPressed: () => onTap?.call() ), ); @@ -134,13 +140,17 @@ Widget buildButtonWrapText(String name, { Color? borderColor, double? radius, double? height, + double? minWidth, EdgeInsets? padding, + FocusNode? focusNode, IconWebCallback? onTap }) { return Container( height: height ?? 40, padding: padding, + constraints: BoxConstraints(minWidth: minWidth ?? 0), child: ElevatedButton( + focusNode: focusNode, onPressed: () => onTap?.call(), style: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith( diff --git a/core/lib/presentation/views/checkbox/labeled_checkbox.dart b/core/lib/presentation/views/checkbox/labeled_checkbox.dart new file mode 100644 index 000000000..408ecf041 --- /dev/null +++ b/core/lib/presentation/views/checkbox/labeled_checkbox.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; + +class LabeledCheckbox extends StatelessWidget { + const LabeledCheckbox({ + required this.label, + this.contentPadding, + this.value, + this.onChanged, + this.activeColor, + this.fontSize = 16, + this.gap = 4.0, + this.bold = false, + this.focusNode, + }); + + final String label; + final EdgeInsets? contentPadding; + final bool? value; + final Function(bool?)? onChanged; + final Color? activeColor; + final double fontSize; + final double gap; + final bool bold; + final FocusNode? focusNode; + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: () => onChanged?.call(!(value ?? false)), + child: Padding( + padding: contentPadding ?? const EdgeInsets.all(0), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Checkbox( + value: value, + activeColor: activeColor, + visualDensity: VisualDensity.compact, + focusNode: focusNode, + onChanged: onChanged, + ), + SizedBox( + width: gap, + ), + Flexible( + child: Text( + label, + style: TextStyle( + fontSize: fontSize, + fontWeight: bold ? FontWeight.bold : FontWeight.normal, + color: Colors.black + ), + ), + ), + ], + ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart index 0d3f0981c..1c76f3b93 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart @@ -22,71 +22,68 @@ class AdvancedSearchInputForm extends GetWidget @override Widget build(BuildContext context) { - return Material( - color: Colors.white, - child: Column( - children: [ - _buildSuggestionFilterField( - listTagSelected: controller.searchEmailFilter.from, + return Column( + children: [ + _buildSuggestionFilterField( + listTagSelected: controller.searchEmailFilter.from, + context: context, + advancedSearchFilterField: AdvancedSearchFilterField.form, + listTagInitial: controller.searchEmailFilter.from, + currentFocusNode: controller.focusManager.fromFieldFocusNode, + nextFocusNode: controller.focusManager.toFieldFocusNode + ), + _buildSuggestionFilterField( + listTagSelected: controller.searchEmailFilter.to, + context: context, + advancedSearchFilterField: AdvancedSearchFilterField.to, + listTagInitial: controller.searchEmailFilter.to, + currentFocusNode: controller.focusManager.toFieldFocusNode, + nextFocusNode: controller.focusManager.subjectFieldFocusNode + ), + _buildFilterField( + textEditingController: controller.subjectFilterInputController, + context: context, + advancedSearchFilterField: AdvancedSearchFilterField.subject, + currentFocusNode: controller.focusManager.subjectFieldFocusNode, + nextFocusNode: controller.focusManager.hasKeywordFieldFocusNode + ), + _buildFilterField( + textEditingController: controller.hasKeyWordFilterInputController, + context: context, + advancedSearchFilterField: AdvancedSearchFilterField.hasKeyword, + currentFocusNode: controller.focusManager.hasKeywordFieldFocusNode, + nextFocusNode: controller.focusManager.notKeywordFieldFocusNode + ), + _buildFilterField( + textEditingController: controller.notKeyWordFilterInputController, + context: context, + advancedSearchFilterField: AdvancedSearchFilterField.notKeyword, + currentFocusNode: controller.focusManager.notKeywordFieldFocusNode, + nextFocusNode: controller.focusManager.mailboxFieldFocusNode, + ), + _buildFilterField( + textEditingController: controller.mailBoxFilterInputController, context: context, - advancedSearchFilterField: AdvancedSearchFilterField.form, - listTagInitial: controller.searchEmailFilter.from, - currentFocusNode: controller.focusManager.fromFieldFocusNode, - nextFocusNode: controller.focusManager.toFieldFocusNode - ), - _buildSuggestionFilterField( - listTagSelected: controller.searchEmailFilter.to, - context: context, - advancedSearchFilterField: AdvancedSearchFilterField.to, - listTagInitial: controller.searchEmailFilter.to, - currentFocusNode: controller.focusManager.toFieldFocusNode, - nextFocusNode: controller.focusManager.subjectFieldFocusNode - ), - _buildFilterField( - textEditingController: controller.subjectFilterInputController, - context: context, - advancedSearchFilterField: AdvancedSearchFilterField.subject, - currentFocusNode: controller.focusManager.subjectFieldFocusNode, - nextFocusNode: controller.focusManager.hasKeywordFieldFocusNode - ), - _buildFilterField( - textEditingController: controller.hasKeyWordFilterInputController, - context: context, - advancedSearchFilterField: AdvancedSearchFilterField.hasKeyword, - currentFocusNode: controller.focusManager.hasKeywordFieldFocusNode, - nextFocusNode: controller.focusManager.notKeywordFieldFocusNode - ), - _buildFilterField( - textEditingController: controller.notKeyWordFilterInputController, - context: context, - advancedSearchFilterField: AdvancedSearchFilterField.notKeyword, - currentFocusNode: controller.focusManager.notKeywordFieldFocusNode, - nextFocusNode: controller.focusManager.mailboxFieldFocusNode, - ), - _buildFilterField( - textEditingController: controller.mailBoxFilterInputController, - context: context, - advancedSearchFilterField: AdvancedSearchFilterField.mailBox, - isSelectFormList: true, - currentFocusNode: controller.focusManager.mailboxFieldFocusNode, - nextFocusNode: controller.focusManager.attachmentCheckboxFocusNode, - mouseCursor: SystemMouseCursors.click, - onTap: () => controller.selectedMailBox()), - _buildFilterField( - textEditingController: controller.dateFilterInputController, - context: context, - advancedSearchFilterField: AdvancedSearchFilterField.date, + advancedSearchFilterField: AdvancedSearchFilterField.mailBox, isSelectFormList: true, - onTap: () { - openContextMenuAction( - context, - _buildEmailReceiveTimeTypeActionTiles(context), - ); - }, - ), - AdvancedSearchFilterFormBottomView(focusManager: controller.focusManager) - ], - ), + currentFocusNode: controller.focusManager.mailboxFieldFocusNode, + nextFocusNode: controller.focusManager.attachmentCheckboxFocusNode, + mouseCursor: SystemMouseCursors.click, + onTap: () => controller.selectedMailBox()), + _buildFilterField( + textEditingController: controller.dateFilterInputController, + context: context, + advancedSearchFilterField: AdvancedSearchFilterField.date, + isSelectFormList: true, + onTap: () { + openContextMenuAction( + context, + _buildEmailReceiveTimeTypeActionTiles(context), + ); + }, + ), + AdvancedSearchFilterFormBottomView(focusManager: controller.focusManager) + ], ); } @@ -347,10 +344,8 @@ class AdvancedSearchInputForm extends GetWidget return RawKeyboardListener( focusNode: currentFocusNode ?? FocusNode(), onKey: (event) { - log('AdvancedSearchInputForm::_buildTextField(): Event runtimeType is ${event.runtimeType}'); if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.tab) { - log('AdvancedSearchInputForm::_buildTextField(): PRESS TAB'); nextFocusNode?.requestFocus(); } }, @@ -382,9 +377,11 @@ class AdvancedSearchInputForm extends GetWidget ), ), hintText: advancedSearchFilterField.getHintText(context), - hintStyle: const TextStyle( - fontSize: 14, - color: AppColor.colorHintSearchBar, + hintStyle: TextStyle( + fontSize: 16, + color: advancedSearchFilterField == AdvancedSearchFilterField.mailBox + ? Colors.black + : AppColor.colorHintSearchBar, ), suffixIconConstraints: const BoxConstraints(minHeight: 24, minWidth: 24), suffixIcon: isSelectFormList diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart index 4265059e7..4bca3ab1e 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart @@ -65,8 +65,8 @@ class AdvancedSearchFilterFormBottomView extends GetWidget SizedBox( - width: 220, - child: RawKeyboardListener( - focusNode: FocusNode(), - onKey: (event) { - log('AdvancedSearchFilterFormBottomView::_buildCheckboxHasAttachment(): Event runtimeType is ${event.runtimeType}'); - if (event is RawKeyDownEvent && - event.logicalKey == LogicalKeyboardKey.tab) { - log('AdvancedSearchFilterFormBottomView::_buildCheckboxHasAttachment(): PRESS TAB'); - nextFocusNode?.requestFocus(); - } - }, - child: CheckboxListTile( - focusNode: currentFocusNode, - contentPadding: EdgeInsets.zero, - controlAffinity: ListTileControlAffinity.leading, - value: controller.hasAttachment.value, - onChanged: (value) { - controller.hasAttachment.value = value ?? false; - }, - title: Text(AppLocalizations.of(context).hasAttachment), - ), + () => RawKeyboardListener( + focusNode: FocusNode(), + onKey: (event) { + if (event is RawKeyDownEvent && + event.logicalKey == LogicalKeyboardKey.tab) { + nextFocusNode?.requestFocus(); + } + }, + child: LabeledCheckbox( + label: AppLocalizations.of(context).hasAttachment, + focusNode: currentFocusNode, + contentPadding: EdgeInsets.zero, + value: controller.hasAttachment.value, + activeColor: AppColor.primaryColor, + onChanged: (value) => controller.hasAttachment.value = value ?? false, ), ), ); @@ -164,31 +159,27 @@ class AdvancedSearchFilterFormBottomView extends GetWidget FocusManager.instance.primaryFocus?.unfocus(), child: Padding( - padding: const EdgeInsets.only(top: 8, bottom: 16), + padding: const EdgeInsets.only(top: 4, bottom: 16), child: Container( constraints: BoxConstraints( - minWidth: maxWidth ?? 660, maxHeight: _getHeightOverlay(context, responsiveUtils), ), width: maxWidth ?? 660, - height: _getHeightOverlay(context, responsiveUtils), - padding: responsiveUtils.landscapeTabletSupported(context) - ? EdgeInsets.zero - : const EdgeInsets.all(24), + padding: const EdgeInsets.all(32), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: const [ BoxShadow( - color: AppColor.colorShadowBgContentEmail, - spreadRadius: 1, - blurRadius: 1, - offset: Offset(0, 0.5)), + color: AppColor.colorShadowComposer, + blurRadius: 32, + offset: Offset.zero), + BoxShadow( + color: AppColor.colorDropShadow, + blurRadius: 4, + offset: Offset.zero), ]), child: SingleChildScrollView( - child: Padding( - padding: EdgeInsets.symmetric( - horizontal: responsiveUtils.landscapeTabletSupported(context) - ? 16 : 28, - vertical: responsiveUtils.landscapeTabletSupported(context) - ? 16 : 12), - child: AdvancedSearchInputForm(), - ), + child: AdvancedSearchInputForm(), ), ), ), @@ -58,18 +49,10 @@ class AdvancedSearchFilterOverlay extends StatelessWidget { } double _getHeightOverlay(BuildContext context, ResponsiveUtils responsiveUtils) { - const double maxHeightTopBar = 160; - const double maxHeightOverlay = 568; + const double maxHeightTopBar = 80; + const double paddingBottom = 16; final currentHeight = responsiveUtils.getSizeScreenHeight(context); - double maxHeightForm = maxHeightOverlay; - - if (currentHeight < maxHeightOverlay) { - maxHeightForm = currentHeight > maxHeightTopBar - ? currentHeight - maxHeightTopBar - : currentHeight; - } - - log('AdvancedSearchFilterOverlay::_getHeightOverlay(): maxHeightForm: $maxHeightForm'); + double maxHeightForm = currentHeight - maxHeightTopBar - paddingBottom; return maxHeightForm; } }