diff --git a/lib/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart b/lib/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart index c1f1da73c..c875a04cc 100644 --- a/lib/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart +++ b/lib/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart @@ -6,4 +6,10 @@ class AdvancedSearchInputFormStyle { static TextStyle inputTextStyle = ThemeUtils.textStyleBodyBody3( color: AppColor.m3SurfaceBackground, ); -} \ No newline at end of file + + static const double inputFieldBorderRadius = 10; + static const double inputFieldBorderWidth = 1; + + static const Color inputFieldBorderColor = AppColor.m3Neutral90; + static const Color inputFieldBackgroundColor = Colors.white; +} diff --git a/lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart b/lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart index 30115b1bf..6e6b79143 100644 --- a/lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart +++ b/lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart @@ -5,7 +5,6 @@ class SortByDropdownStyle { static const int dropdownElevation = 4; static const double height = 44; - static const double buttonBorderWidth = 0.5; static const double dropdownMaxHeight = 332; static const double scrollbarThickness = 6; static const double checkedIconSize = 20; @@ -17,13 +16,11 @@ class SortByDropdownStyle { color: Colors.white ); - static const EdgeInsetsDirectional buttonPadding = EdgeInsetsDirectional.only(start: 12, end: 10); + static const EdgeInsetsDirectional buttonPadding = EdgeInsetsDirectional.only(start: 12, end: 8); static const MenuItemStyleData menuItemStyleData = MenuItemStyleData( height: height, padding: EdgeInsets.symmetric(horizontal: 12), ); - static const BorderRadius buttonBorderRadius = BorderRadius.all(Radius.circular(10)); - static const Radius dropdownScrollbarRadius = Radius.circular(40); } \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/styles/text_field_autocomplete_email_address_web_style.dart b/lib/features/mailbox_dashboard/presentation/styles/text_field_autocomplete_email_address_web_style.dart index 411c3a351..6c1ef2d4d 100644 --- a/lib/features/mailbox_dashboard/presentation/styles/text_field_autocomplete_email_address_web_style.dart +++ b/lib/features/mailbox_dashboard/presentation/styles/text_field_autocomplete_email_address_web_style.dart @@ -2,17 +2,15 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/utils/theme_utils.dart'; import 'package:flutter/material.dart'; import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart'; class TextFieldAutoCompleteEmailAddressWebStyles { - static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 8); - static const EdgeInsetsGeometry textInputContentPadding = EdgeInsetsDirectional.only(top: 16, bottom: 16, start: 12); + static const EdgeInsetsGeometry textInputContentPadding = EdgeInsetsDirectional.only(top: 16, bottom: 16, start: 12, end: 8); static const EdgeInsetsGeometry textInputContentPaddingWithSomeTag = EdgeInsetsDirectional.symmetric(vertical: 16); static const EdgeInsets tagEditorPadding = EdgeInsets.symmetric(horizontal: 12); - static const double borderRadius = 10.0; static const double suggestionBoxRadius = 20.0; - static const double borderWidth = 1.0; static const double minTextFieldWidth = 40.0; static const double suggestionBoxElevation = 20.0; @@ -20,27 +18,21 @@ class TextFieldAutoCompleteEmailAddressWebStyles { static const double suggestionBoxItemHeight = ComposerStyle.suggestionItemHeight; static const double fieldTitleWidth = 112.0; - static const double space = 8.0; + static const double space = 12.0; static const InputBorder textInputBorder = OutlineInputBorder( - borderRadius: BorderRadius.all(Radius.circular(10)), + borderRadius: BorderRadius.all(Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius)), borderSide: BorderSide.none, ); static const Color textInputFillColor = Colors.white; static const Color focusedBorderColor = AppColor.primaryColor; - static const Color enableBorderColor = AppColor.colorInputBorderCreateMailbox; static const Color suggestionBoxBackgroundColor = Colors.white; static const Color cursorColor = AppColor.primaryColor; static TextStyle textInputHintStyle = ThemeUtils.textStyleBodyBody3( color: AppColor.m3Tertiary, ); - static const TextStyle textInputTextStyle = TextStyle( - fontSize: 16, - color: Colors.black, - fontWeight: FontWeight.w500, - ); static const Duration debounceDuration = Duration(milliseconds: 150); } \ No newline at end of file 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 3ed62d63c..28a2373bc 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 @@ -21,21 +21,18 @@ class AdvancedSearchFilterFormBottomView extends GetWidget onSearchAction: controller.onSearchAction, onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress, )), + const SizedBox(height: 12), Obx(() => TextFieldAutocompleteEmailAddressWeb( field: AdvancedSearchFilterField.to, listEmailAddress: controller.listToEmailAddress, @@ -62,6 +63,7 @@ class AdvancedSearchInputForm extends GetWidget onSearchAction: controller.onSearchAction, onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress, )), + const SizedBox(height: 12), _buildFilterField( textEditingController: controller.subjectFilterInputController, context: context, @@ -73,6 +75,7 @@ class AdvancedSearchInputForm extends GetWidget value ), ), + const SizedBox(height: 12), _buildFilterField( textEditingController: controller.hasKeyWordFilterInputController, context: context, @@ -84,6 +87,7 @@ class AdvancedSearchInputForm extends GetWidget value ), ), + const SizedBox(height: 12), _buildFilterField( textEditingController: controller.notKeyWordFilterInputController, context: context, @@ -95,6 +99,7 @@ class AdvancedSearchInputForm extends GetWidget value ), ), + const SizedBox(height: 12), _buildFilterField( textEditingController: controller.mailBoxFilterInputController, context: context, @@ -105,6 +110,7 @@ class AdvancedSearchInputForm extends GetWidget mouseCursor: SystemMouseCursors.click, onTap: () => controller.selectedMailBox(context) ), + const SizedBox(height: 12), Row(children: [ Expanded(child: _buildFilterField( context: context, @@ -117,21 +123,37 @@ class AdvancedSearchInputForm extends GetWidget ); }, )), - const SizedBox(width: 10), - buildIconWeb( - icon: SvgPicture.asset( - controller.imagePaths.icCalendarSB, - width: 24, - height: 24, - fit: BoxFit.fill), - tooltip: AppLocalizations.of(context).selectDate, - iconPadding: EdgeInsets.zero, - onTap: () => controller.selectDateRange(context)), + const SizedBox(width: 8), + Container( + decoration: BoxDecoration( + border: Border.all( + color: AdvancedSearchInputFormStyle.inputFieldBorderColor, + width: AdvancedSearchInputFormStyle.inputFieldBorderWidth, + ), + borderRadius: const BorderRadius.all( + Radius.circular( + AdvancedSearchInputFormStyle.inputFieldBorderRadius, + ), + ), + ), + height: 44, + width: 44, + child: TMailButtonWidget.fromIcon( + icon: controller.imagePaths.icCalendarSB, + iconSize: 22, + iconColor: AppColor.steelGray400, + backgroundColor: Colors.transparent, + tooltipMessage: AppLocalizations.of(context).selectDate, + onTapActionCallback: () => controller.selectDateRange(context), + ), + ), ]), + const SizedBox(height: 12), _buildFilterField( context: context, advancedSearchFilterField: AdvancedSearchFilterField.sortBy ), + const SizedBox(height: 24), AdvancedSearchFilterFormBottomView(focusManager: controller.focusManager) ], ), @@ -165,13 +187,15 @@ class AdvancedSearchInputForm extends GetWidget }) { final child = [ SizedBox( - width: controller.responsiveUtils.isMobile(context) || controller.responsiveUtils.landscapeTabletSupported(context) - ? null : 112, + width: _isVerticalArrange(context) ? null : 112, child: LabelAdvancedSearchFieldWidget( name: advancedSearchFilterField.getTitle(context), ), ), - const Padding(padding: EdgeInsets.all(4)), + if (_isVerticalArrange(context)) + const SizedBox(height: 12) + else + const SizedBox(width: 12), if (controller.responsiveUtils.isMobile(context)) _buildTextField( isSelectFormList: isSelectFormList, @@ -226,19 +250,20 @@ class AdvancedSearchInputForm extends GetWidget ), ) ]; - return Padding( - padding: const EdgeInsets.symmetric(vertical: 8), - child: controller.responsiveUtils.isMobile(context) || controller.responsiveUtils.landscapeTabletSupported(context) - ? Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: child, - ) - : SizedBox(height: 44, child: Row(children: child)), - ); + return _isVerticalArrange(context) + ? Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: child, + ) + : SizedBox(height: 44, child: Row(children: child)); } + bool _isVerticalArrange(BuildContext context) => + controller.responsiveUtils.isMobile(context) || + controller.responsiveUtils.landscapeTabletSupported(context); + Widget _buildTextFieldFilterForWeb({ required BuildContext context, required AdvancedSearchFilterField advancedSearchFilterField, @@ -318,32 +343,32 @@ class AdvancedSearchInputForm extends GetWidget onTextChange: onTextChange, decoration: InputDecoration( filled: true, - fillColor: isSelectFormList ? AppColor.colorItemSelected : Colors.white, - contentPadding: const EdgeInsetsDirectional.symmetric(horizontal: 12), - enabledBorder: OutlineInputBorder( - borderRadius: const BorderRadius.all( - Radius.circular(10), + fillColor: AdvancedSearchInputFormStyle.inputFieldBackgroundColor, + contentPadding: const EdgeInsetsDirectional.only(start: 12, end: 8), + enabledBorder: const OutlineInputBorder( + borderRadius: BorderRadius.all( + Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius), ), borderSide: BorderSide( - width: isSelectFormList ? 0.5 : 1, - color: AppColor.colorInputBorderCreateMailbox, + width: AdvancedSearchInputFormStyle.inputFieldBorderWidth, + color: AdvancedSearchInputFormStyle.inputFieldBorderColor, ), ), - border: OutlineInputBorder( - borderRadius: const BorderRadius.all( - Radius.circular(10), + border: const OutlineInputBorder( + borderRadius: BorderRadius.all( + Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius), ), borderSide: BorderSide( - width: isSelectFormList ? 0.5 : 1, - color: AppColor.colorInputBorderCreateMailbox, + width: AdvancedSearchInputFormStyle.inputFieldBorderWidth, + color: AdvancedSearchInputFormStyle.inputFieldBorderColor, ), ), - focusedBorder: OutlineInputBorder( - borderRadius: const BorderRadius.all( - Radius.circular(10), + focusedBorder: const OutlineInputBorder( + borderRadius: BorderRadius.all( + Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius), ), borderSide: BorderSide( - width: isSelectFormList ? 0.5 : 1, + width: AdvancedSearchInputFormStyle.inputFieldBorderWidth, color: AppColor.primaryColor, ), ), diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/date_drop_down_button.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/date_drop_down_button.dart index 68a4e2926..a0495a91f 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/date_drop_down_button.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/date_drop_down_button.dart @@ -1,4 +1,3 @@ -import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/style_utils.dart'; import 'package:dropdown_button2/dropdown_button2.dart'; @@ -38,14 +37,16 @@ class DateDropDownButton extends StatelessWidget { customButton: Container( height: 44, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - border: Border.all( - color: AppColor.colorInputBorderCreateMailbox, - width: 0.5, + borderRadius: const BorderRadius.all( + Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius), ), - color: AppColor.colorInputBackgroundCreateMailbox + border: Border.all( + color: AdvancedSearchInputFormStyle.inputFieldBorderColor, + width: AdvancedSearchInputFormStyle.inputFieldBorderWidth, + ), + color: AdvancedSearchInputFormStyle.inputFieldBackgroundColor, ), - padding: const EdgeInsets.only(left: 12, right: 10), + padding: const EdgeInsetsDirectional.only(start: 12, end: 8), child: Row(children: [ Expanded(child: Text( receiveTimeSelected?.getTitle(context, startDate: startDate, endDate: endDate) ?? '', @@ -64,13 +65,17 @@ class DateDropDownButton extends StatelessWidget { }, buttonStyleData: ButtonStyleData( height: 44, - padding: const EdgeInsets.symmetric(horizontal: 12), + padding: const EdgeInsetsDirectional.only(start: 12, end: 8), decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), + borderRadius: const BorderRadius.all( + Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius), + ), border: Border.all( - color: AppColor.colorInputBorderCreateMailbox, - width: 1), - color: AppColor.colorInputBackgroundCreateMailbox) + color: AdvancedSearchInputFormStyle.inputFieldBorderColor, + width: AdvancedSearchInputFormStyle.inputFieldBorderWidth, + ), + color: AdvancedSearchInputFormStyle.inputFieldBackgroundColor, + ) ), dropdownStyleData: DropdownStyleData( maxHeight: 200, diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart index 1dbf7c876..e12e45765 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart @@ -1,4 +1,3 @@ -import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/style_utils.dart'; import 'package:dropdown_button2/dropdown_button2.dart'; @@ -64,12 +63,14 @@ class SortByDropDownButton extends StatelessWidget { customButton: Container( height: SortByDropdownStyle.height, decoration: BoxDecoration( - borderRadius: SortByDropdownStyle.buttonBorderRadius, - border: Border.all( - color: AppColor.colorInputBorderCreateMailbox, - width: SortByDropdownStyle.buttonBorderWidth, + borderRadius: const BorderRadius.all( + Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius), ), - color: AppColor.colorInputBackgroundCreateMailbox + border: Border.all( + color: AdvancedSearchInputFormStyle.inputFieldBorderColor, + width: AdvancedSearchInputFormStyle.inputFieldBorderWidth, + ), + color: AdvancedSearchInputFormStyle.inputFieldBackgroundColor, ), padding: SortByDropdownStyle.buttonPadding, child: Row( @@ -92,12 +93,14 @@ class SortByDropDownButton extends StatelessWidget { height: SortByDropdownStyle.height, padding: SortByDropdownStyle.buttonPadding, decoration: BoxDecoration( - borderRadius: SortByDropdownStyle.buttonBorderRadius, - border: Border.all( - color: AppColor.colorInputBorderCreateMailbox, - width: SortByDropdownStyle.buttonBorderWidth, + borderRadius: const BorderRadius.all( + Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius), ), - color: AppColor.colorInputBackgroundCreateMailbox + border: Border.all( + color: AdvancedSearchInputFormStyle.inputFieldBorderColor, + width: AdvancedSearchInputFormStyle.inputFieldBorderWidth, + ), + color: AdvancedSearchInputFormStyle.inputFieldBackgroundColor, ) ), dropdownStyleData: DropdownStyleData( diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_autocomplete_email_address_web.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_autocomplete_email_address_web.dart index 381d76379..ee7f88e8b 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_autocomplete_email_address_web.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_autocomplete_email_address_web.dart @@ -99,143 +99,139 @@ class _TextFieldAutocompleteEmailAddressWebState extends State( - onAcceptWithDetails: (draggableEmailAddress) => - _handleAcceptDraggableEmailAddressAction( - draggableEmailAddress.data, - setState - ), - onLeave: (draggableEmailAddress) { - if (_isDragging) { - setState(() => _isDragging = false); - } - }, - onMove: (details) { - if (!_isDragging) { - setState(() => _isDragging = true); - } - }, - builder: (_, __, ___) { - return TagEditor( - key: widget.keyTagEditor, - length: _collapsedListEmailAddress.length, - controller: widget.controller, - focusNodeKeyboard: widget.focusNode, - keyboardType: TextInputType.emailAddress, - textInputAction: TextInputAction.done, - cursorColor: TextFieldAutoCompleteEmailAddressWebStyles.cursorColor, - debounceDuration: TextFieldAutoCompleteEmailAddressWebStyles.debounceDuration, - inputDecoration: InputDecoration( - filled: true, - fillColor: TextFieldAutoCompleteEmailAddressWebStyles.textInputFillColor, - border: TextFieldAutoCompleteEmailAddressWebStyles.textInputBorder, - hintText: widget.field.getHintText(context), - hintStyle: TextFieldAutoCompleteEmailAddressWebStyles.textInputHintStyle, - isDense: true, - contentPadding: _currentListEmailAddress.isNotEmpty - ? TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPaddingWithSomeTag - : TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPadding - ), - padding: _currentListEmailAddress.isNotEmpty - ? TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding - : EdgeInsets.zero, - borderRadius: TextFieldAutoCompleteEmailAddressWebStyles.borderRadius, - borderSize: TextFieldAutoCompleteEmailAddressWebStyles.borderWidth, - focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor, - enableBorder: true, - enableBorderColor: _isDragging - ? AppColor.primaryColor - : AppColor.colorInputBorderCreateMailbox, - minTextFieldWidth: TextFieldAutoCompleteEmailAddressWebStyles.minTextFieldWidth, - resetTextOnSubmitted: true, - autoScrollToInput: false, - suggestionsBoxElevation: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxElevation, - suggestionsBoxBackgroundColor: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxBackgroundColor, - suggestionsBoxRadius: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxRadius, - suggestionsBoxMaxHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxMaxHeight, - suggestionItemHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxItemHeight, - suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth), - textStyle: AdvancedSearchInputFormStyle.inputTextStyle, - onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, setState), - onDeleteTagAction: () => _handleDeleteLatestTagAction.call(setState), - onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, setState), - onSubmitted: (value) => _handleSubmitTagAction.call(value, setState), - tagBuilder: (context, index) { - final currentEmailAddress = _currentListEmailAddress.elementAt(index); - final isLatestEmail = currentEmailAddress == _currentListEmailAddress.last; - return AutoCompleteTagItemWidgetWeb( - field: widget.field, - currentEmailAddress: currentEmailAddress, - currentListEmailAddress: _currentListEmailAddress, - collapsedListEmailAddress: _collapsedListEmailAddress, - isLatestEmail: isLatestEmail, - isCollapsed: _isCollapse, - isLatestTagFocused: _lastTagFocused, - onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, setState), - onShowFullAction: widget.onShowFullListEmailAddressAction, - ); - }, - onTagChanged: (tag) => _handleOnTagChangeAction.call(tag, setState), - findSuggestions: (queryString) => _findSuggestions( - queryString, - limit: AppConfig.defaultLimitAutocomplete, - ), - isLoadMoreOnlyOnce: true, - isLoadMoreReplaceAllOld: false, - loadMoreSuggestions: _findSuggestions, - suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight, suggestionValid) { - return RecipientSuggestionItemWidget( - imagePaths: _imagePaths, - suggestionState: suggestionEmailAddress.state, - emailAddress: suggestionEmailAddress.emailAddress, - suggestionValid: suggestionValid, - highlight: highlight, - onSelectedAction: (emailAddress) { - setState(() => _currentListEmailAddress.add(emailAddress)); - _updateListEmailAddressAction(); - tagEditorState.resetTextField(); - tagEditorState.closeSuggestionBox(); - }, - ); - }, - onHandleKeyEventAction: (event) { - if (event is KeyDownEvent) { - switch (event.logicalKey) { - case LogicalKeyboardKey.tab: - widget.nextFocusNode?.requestFocus(); - break; - default: - break; - } - } - }, - ); + ), + const SizedBox(width: TextFieldAutoCompleteEmailAddressWebStyles.space), + Expanded( + child: StatefulBuilder( + builder: ((context, setState) { + return DragTarget( + onAcceptWithDetails: (draggableEmailAddress) => + _handleAcceptDraggableEmailAddressAction( + draggableEmailAddress.data, + setState + ), + onLeave: (draggableEmailAddress) { + if (_isDragging) { + setState(() => _isDragging = false); } - ); - }) - ), + }, + onMove: (details) { + if (!_isDragging) { + setState(() => _isDragging = true); + } + }, + builder: (_, __, ___) { + return TagEditor( + key: widget.keyTagEditor, + length: _collapsedListEmailAddress.length, + controller: widget.controller, + focusNodeKeyboard: widget.focusNode, + keyboardType: TextInputType.emailAddress, + textInputAction: TextInputAction.done, + cursorColor: TextFieldAutoCompleteEmailAddressWebStyles.cursorColor, + debounceDuration: TextFieldAutoCompleteEmailAddressWebStyles.debounceDuration, + inputDecoration: InputDecoration( + filled: true, + fillColor: TextFieldAutoCompleteEmailAddressWebStyles.textInputFillColor, + border: TextFieldAutoCompleteEmailAddressWebStyles.textInputBorder, + hintText: widget.field.getHintText(context), + hintStyle: TextFieldAutoCompleteEmailAddressWebStyles.textInputHintStyle, + isDense: true, + contentPadding: _currentListEmailAddress.isNotEmpty + ? TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPaddingWithSomeTag + : TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPadding + ), + padding: _currentListEmailAddress.isNotEmpty + ? TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding + : EdgeInsets.zero, + borderRadius: AdvancedSearchInputFormStyle.inputFieldBorderRadius, + borderSize: AdvancedSearchInputFormStyle.inputFieldBorderWidth, + focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor, + enableBorder: true, + enableBorderColor: _isDragging + ? AppColor.primaryColor + : AdvancedSearchInputFormStyle.inputFieldBorderColor, + minTextFieldWidth: TextFieldAutoCompleteEmailAddressWebStyles.minTextFieldWidth, + resetTextOnSubmitted: true, + autoScrollToInput: false, + suggestionsBoxElevation: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxElevation, + suggestionsBoxBackgroundColor: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxBackgroundColor, + suggestionsBoxRadius: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxRadius, + suggestionsBoxMaxHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxMaxHeight, + suggestionItemHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxItemHeight, + suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth), + textStyle: AdvancedSearchInputFormStyle.inputTextStyle, + onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, setState), + onDeleteTagAction: () => _handleDeleteLatestTagAction.call(setState), + onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, setState), + onSubmitted: (value) => _handleSubmitTagAction.call(value, setState), + tagBuilder: (context, index) { + final currentEmailAddress = _currentListEmailAddress.elementAt(index); + final isLatestEmail = currentEmailAddress == _currentListEmailAddress.last; + return AutoCompleteTagItemWidgetWeb( + field: widget.field, + currentEmailAddress: currentEmailAddress, + currentListEmailAddress: _currentListEmailAddress, + collapsedListEmailAddress: _collapsedListEmailAddress, + isLatestEmail: isLatestEmail, + isCollapsed: _isCollapse, + isLatestTagFocused: _lastTagFocused, + onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, setState), + onShowFullAction: widget.onShowFullListEmailAddressAction, + ); + }, + onTagChanged: (tag) => _handleOnTagChangeAction.call(tag, setState), + findSuggestions: (queryString) => _findSuggestions( + queryString, + limit: AppConfig.defaultLimitAutocomplete, + ), + isLoadMoreOnlyOnce: true, + isLoadMoreReplaceAllOld: false, + loadMoreSuggestions: _findSuggestions, + suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight, suggestionValid) { + return RecipientSuggestionItemWidget( + imagePaths: _imagePaths, + suggestionState: suggestionEmailAddress.state, + emailAddress: suggestionEmailAddress.emailAddress, + suggestionValid: suggestionValid, + highlight: highlight, + onSelectedAction: (emailAddress) { + setState(() => _currentListEmailAddress.add(emailAddress)); + _updateListEmailAddressAction(); + tagEditorState.resetTextField(); + tagEditorState.closeSuggestionBox(); + }, + ); + }, + onHandleKeyEventAction: (event) { + if (event is KeyDownEvent) { + switch (event.logicalKey) { + case LogicalKeyboardKey.tab: + widget.nextFocusNode?.requestFocus(); + break; + default: + break; + } + } + }, + ); + } + ); + }) ), - ], - ); - }) - ), + ), + ], + ); + }) ); } diff --git a/lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart b/lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart index 112ac71b2..4f2b5cca1 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart @@ -1,3 +1,5 @@ +import 'dart:math'; + import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; @@ -61,7 +63,10 @@ class NavigationBarWidget extends StatelessWidget { return Row( children: [ SizedBox( - width: constraint.maxWidth / 2, + width: min( + max(constraint.maxWidth / 2, 576), + constraint.maxWidth, + ), height: 52, child: searchForm ), diff --git a/lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart b/lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart index 2325a53c1..991222e3a 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart @@ -2,6 +2,7 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; import 'package:core/presentation/views/button/icon_button_web.dart'; import 'package:core/presentation/views/button/tmail_button_widget.dart'; import 'package:core/presentation/views/quick_search/quick_search_input_form.dart'; @@ -248,7 +249,9 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin { enabledBorder: InputBorder.none, contentPadding: EdgeInsets.zero, hintText: AppLocalizations.of(context).search_emails, - hintStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 16.0), + hintStyle: ThemeUtils.textStyleBodyBody2( + color: AppColor.steelGray400, + ), labelStyle: const TextStyle(color: Colors.black, fontSize: 16.0) ), leftButton: Padding(