From aceaebe869191b033c3844d4a8a8ede35e487e0c Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 16 Jan 2025 14:52:11 +0700 Subject: [PATCH] TF-3408 Auto load more when user uses arrow down of keyboard --- .../views/text/rich_text_builder.dart | 3 - .../presentation/styles/composer_style.dart | 1 + .../recipient_composer_widget_style.dart | 2 + ...ecipient_suggestion_item_widget_style.dart | 1 - .../widgets/recipient_composer_widget.dart | 2 + .../recipient_suggestion_item_widget.dart | 116 +++++++++++------- .../widgets/contact_suggestion_box_item.dart | 31 ++--- .../suggestion_item_widget_styles.dart | 2 + ..._input_suggestion_field_widget_styles.dart | 2 + .../suggestion_item_widget.dart | 95 -------------- .../text_input_field_suggestion_widget.dart | 12 +- .../search/suggesstion_email_address.dart | 17 --- ...utocomplete_suggestion_item_web_style.dart | 27 ---- ..._autocomplete_email_address_web_style.dart | 2 + ...tocomplete_suggestion_item_widget_web.dart | 95 -------------- ..._field_autocomplete_email_address_web.dart | 12 +- ...complete_contact_text_field_with_tags.dart | 13 +- pubspec.lock | 2 +- 18 files changed, 134 insertions(+), 301 deletions(-) delete mode 100644 lib/features/email_recovery/presentation/widgets/text_input_field/suggestion_item_widget.dart delete mode 100644 lib/features/mailbox_dashboard/presentation/model/search/suggesstion_email_address.dart delete mode 100644 lib/features/mailbox_dashboard/presentation/styles/autocomplete_suggestion_item_web_style.dart delete mode 100644 lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_suggestion_item_widget_web.dart diff --git a/core/lib/presentation/views/text/rich_text_builder.dart b/core/lib/presentation/views/text/rich_text_builder.dart index efd4518c6..8bab7a763 100644 --- a/core/lib/presentation/views/text/rich_text_builder.dart +++ b/core/lib/presentation/views/text/rich_text_builder.dart @@ -8,7 +8,6 @@ class RichTextBuilder extends StatefulWidget { final TextStyle styleWord; final String? preMarkedText; final bool ensureHighlightVisible; - final bool? softWrap; const RichTextBuilder({ super.key, @@ -18,7 +17,6 @@ class RichTextBuilder extends StatefulWidget { required this.styleWord, this.preMarkedText, this.ensureHighlightVisible = false, - this.softWrap, }); @override @@ -65,7 +63,6 @@ class _RichTextBuilderState extends State with AutomaticKeepAli ), style: widget.styleOrigin, maxLines: 1, - softWrap: widget.softWrap, overflow: TextOverflow.ellipsis ); diff --git a/lib/features/composer/presentation/styles/composer_style.dart b/lib/features/composer/presentation/styles/composer_style.dart index 26bf5e3e1..17f1e8285 100644 --- a/lib/features/composer/presentation/styles/composer_style.dart +++ b/lib/features/composer/presentation/styles/composer_style.dart @@ -8,6 +8,7 @@ class ComposerStyle { static const double radius = 28; static const double keyboardToolBarHeight = 200; static const double popupMenuRadius = 8; + static const double suggestionItemHeight = 60; static const Color borderColor = AppColor.colorLineComposer; static const Color backgroundEditorColor = Colors.white; diff --git a/lib/features/composer/presentation/styles/recipient_composer_widget_style.dart b/lib/features/composer/presentation/styles/recipient_composer_widget_style.dart index 52de37d4a..208d9d5ca 100644 --- a/lib/features/composer/presentation/styles/recipient_composer_widget_style.dart +++ b/lib/features/composer/presentation/styles/recipient_composer_widget_style.dart @@ -1,6 +1,7 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:flutter/material.dart'; +import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; class RecipientComposerWidgetStyle { static const double deleteRecipientFieldIconSize = 20; @@ -10,6 +11,7 @@ class RecipientComposerWidgetStyle { static const double suggestionsBoxRadius = 20; static const double suggestionsBoxMaxHeight = 300; static const double suggestionBoxWidth = 300; + static const double suggestionBoxItemHeight = ComposerStyle.suggestionItemHeight; static const double minTextFieldWidth = 20; static const double tagSpacing = 8; diff --git a/lib/features/composer/presentation/styles/recipient_suggestion_item_widget_style.dart b/lib/features/composer/presentation/styles/recipient_suggestion_item_widget_style.dart index 2e4375864..ddab22a1c 100644 --- a/lib/features/composer/presentation/styles/recipient_suggestion_item_widget_style.dart +++ b/lib/features/composer/presentation/styles/recipient_suggestion_item_widget_style.dart @@ -6,7 +6,6 @@ class RecipientSuggestionItemWidgetStyle { static const double selectedIconSize = 24; static const EdgeInsetsGeometry suggestionDuplicatedMargin = EdgeInsets.all(8.0); - static const EdgeInsetsGeometry labelDuplicatedPadding = EdgeInsets.symmetric(horizontal: 8.0); static const EdgeInsetsGeometry labelPadding = EdgeInsets.symmetric(horizontal: 16.0); static const TextStyle labelTextStyle = TextStyle( diff --git a/lib/features/composer/presentation/widgets/recipient_composer_widget.dart b/lib/features/composer/presentation/widgets/recipient_composer_widget.dart index 104d14b45..b2c3ce6a5 100644 --- a/lib/features/composer/presentation/widgets/recipient_composer_widget.dart +++ b/lib/features/composer/presentation/widgets/recipient_composer_widget.dart @@ -180,6 +180,7 @@ class _RecipientComposerWidgetState extends State { suggestionsBoxBackgroundColor: RecipientComposerWidgetStyle.suggestionsBoxBackgroundColor, suggestionsBoxRadius: RecipientComposerWidgetStyle.suggestionsBoxRadius, suggestionsBoxMaxHeight: RecipientComposerWidgetStyle.suggestionsBoxMaxHeight, + suggestionItemHeight: RecipientComposerWidgetStyle.suggestionBoxItemHeight, suggestionBoxWidth: _getSuggestionBoxWidth(widget.maxWidth), textStyle: RecipientComposerWidgetStyle.inputTextStyle, onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, stateSetter), @@ -270,6 +271,7 @@ class _RecipientComposerWidgetState extends State { suggestionsBoxBackgroundColor: RecipientComposerWidgetStyle.suggestionsBoxBackgroundColor, suggestionsBoxRadius: RecipientComposerWidgetStyle.suggestionsBoxRadius, suggestionsBoxMaxHeight: RecipientComposerWidgetStyle.suggestionsBoxMaxHeight, + suggestionItemHeight: RecipientComposerWidgetStyle.suggestionBoxItemHeight, suggestionBoxWidth: _getSuggestionBoxWidth(widget.maxWidth), textStyle: RecipientComposerWidgetStyle.inputTextStyle, onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, stateSetter), diff --git a/lib/features/composer/presentation/widgets/recipient_suggestion_item_widget.dart b/lib/features/composer/presentation/widgets/recipient_suggestion_item_widget.dart index 29dc018b0..a03a90f46 100644 --- a/lib/features/composer/presentation/widgets/recipient_suggestion_item_widget.dart +++ b/lib/features/composer/presentation/widgets/recipient_suggestion_item_widget.dart @@ -1,12 +1,14 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/presentation/views/text/rich_text_builder.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; import 'package:model/extensions/email_address_extension.dart'; import 'package:super_tag_editor/widgets/rich_text_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/suggestion_email_address.dart'; +import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; import 'package:tmail_ui_user/features/composer/presentation/styles/recipient_suggestion_item_widget_style.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/avatar_suggestion_item_widget.dart'; @@ -38,59 +40,91 @@ class RecipientSuggestionItemWidget extends StatelessWidget { margin: RecipientSuggestionItemWidgetStyle.suggestionDuplicatedMargin, decoration: const BoxDecoration( color: AppColor.colorBgMenuItemDropDownSelected, - borderRadius: BorderRadius.all(Radius.circular(RecipientSuggestionItemWidgetStyle.radius)) + borderRadius: BorderRadius.all(Radius.circular(RecipientSuggestionItemWidgetStyle.radius)), ), + height: ComposerStyle.suggestionItemHeight, child: Material( type: MaterialType.transparency, - child: ListTile( - contentPadding: RecipientSuggestionItemWidgetStyle.labelDuplicatedPadding, - leading: AvatarSuggestionItemWidget(emailAddress: emailAddress), - title: RichTextWidget( - textOrigin: emailAddress.asString(), - wordSearched: suggestionValid ?? '', - overflow: TextOverflow.ellipsis, - ), - subtitle: emailAddress.displayName.isNotEmpty - ? RichTextWidget( - textOrigin: emailAddress.emailAddress, - wordSearched: suggestionValid ?? '', - overflow: TextOverflow.ellipsis, - styleTextOrigin: RecipientSuggestionItemWidgetStyle.labelTextStyle, - styleWordSearched: RecipientSuggestionItemWidgetStyle.labelHighlightTextStyle - ) - : null, - trailing: SvgPicture.asset( - imagePaths.icFilterSelected, - width: RecipientSuggestionItemWidgetStyle.selectedIconSize, - height: RecipientSuggestionItemWidgetStyle.selectedIconSize, - fit: BoxFit.fill + child: InkWell( + onTap: () {}, + child: Padding( + padding: RecipientSuggestionItemWidgetStyle.labelPadding, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + AvatarSuggestionItemWidget(emailAddress: emailAddress), + const SizedBox(width: 8), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + RichTextWidget( + textOrigin: emailAddress.asString(), + wordSearched: suggestionValid ?? '', + overflow: TextOverflow.ellipsis, + ), + if (emailAddress.displayName.isNotEmpty) + RichTextBuilder( + textOrigin: emailAddress.emailAddress, + wordToStyle: suggestionValid ?? '', + styleOrigin: RecipientSuggestionItemWidgetStyle.labelTextStyle, + styleWord: RecipientSuggestionItemWidgetStyle.labelHighlightTextStyle, + ), + ], + ), + ), + const SizedBox(width: 8), + SvgPicture.asset( + imagePaths.icFilterSelected, + width: RecipientSuggestionItemWidgetStyle.selectedIconSize, + height: RecipientSuggestionItemWidgetStyle.selectedIconSize, + fit: BoxFit.fill, + ), + ], + ), ), ), - ) + ), ); } else { return Container( color: highlight ? AppColor.colorItemSelected : Colors.white, + height: ComposerStyle.suggestionItemHeight, child: Material( type: MaterialType.transparency, - child: ListTile( - contentPadding: RecipientSuggestionItemWidgetStyle.labelPadding, - leading: AvatarSuggestionItemWidget(emailAddress: emailAddress), - title: RichTextWidget( - textOrigin: emailAddress.asString(), - wordSearched: suggestionValid ?? '', - overflow: TextOverflow.ellipsis, - ), - subtitle: emailAddress.displayName.isNotEmpty - ? RichTextWidget( - textOrigin: emailAddress.emailAddress, - wordSearched: suggestionValid ?? '', - overflow: TextOverflow.ellipsis, - styleTextOrigin: RecipientSuggestionItemWidgetStyle.labelTextStyle, - styleWordSearched: RecipientSuggestionItemWidgetStyle.labelHighlightTextStyle - ) - : null, + child: InkWell( onTap: () => onSelectedAction?.call(emailAddress), + child: Padding( + padding: RecipientSuggestionItemWidgetStyle.labelPadding, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + AvatarSuggestionItemWidget(emailAddress: emailAddress), + const SizedBox(width: 8), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + RichTextWidget( + textOrigin: emailAddress.asString(), + wordSearched: suggestionValid ?? '', + overflow: TextOverflow.ellipsis, + ), + if (emailAddress.displayName.isNotEmpty) + RichTextBuilder( + textOrigin: emailAddress.emailAddress, + wordToStyle: suggestionValid ?? '', + styleOrigin: RecipientSuggestionItemWidgetStyle.labelTextStyle, + styleWord: RecipientSuggestionItemWidgetStyle.labelHighlightTextStyle, + ), + ], + ), + ), + ], + ), + ), ), ), ); diff --git a/lib/features/contact/presentation/widgets/contact_suggestion_box_item.dart b/lib/features/contact/presentation/widgets/contact_suggestion_box_item.dart index 4d94c1ad6..01dd6b32c 100644 --- a/lib/features/contact/presentation/widgets/contact_suggestion_box_item.dart +++ b/lib/features/contact/presentation/widgets/contact_suggestion_box_item.dart @@ -5,31 +5,32 @@ import 'package:core/presentation/utils/style_utils.dart'; import 'package:core/presentation/views/avatar/gradient_circle_avatar_icon.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; -import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; import 'package:model/extensions/email_address_extension.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/suggestion_email_address.dart'; +import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; typedef SelectedContactCallbackAction = Function(EmailAddress contactSelected); class ContactSuggestionBoxItem extends StatelessWidget { + final ImagePaths imagePaths; final SuggestionEmailAddress suggestionEmailAddress; final SelectedContactCallbackAction? selectedContactCallbackAction; - final EdgeInsets? padding; final ShapeBorder? shapeBorder; - const ContactSuggestionBoxItem(this.suggestionEmailAddress, { - Key? key, - this.padding, - this.shapeBorder, - this.selectedContactCallbackAction - }) : super(key: key); + const ContactSuggestionBoxItem( + this.suggestionEmailAddress, + this.imagePaths, + { + Key? key, + this.shapeBorder, + this.selectedContactCallbackAction, + } + ) : super(key: key); @override Widget build(BuildContext context) { - final imagePaths = Get.find(); - final itemChild = Row(children: [ GradientCircleAvatarIcon( colors: suggestionEmailAddress.emailAddress.avatarColors, @@ -82,8 +83,9 @@ class ContactSuggestionBoxItem extends StatelessWidget { child: InkWell( onTap: () => selectedContactCallbackAction?.call(suggestionEmailAddress.emailAddress), customBorder: shapeBorder, - child: Padding( - padding: padding ?? const EdgeInsets.all(12), + child: Container( + padding: const EdgeInsets.symmetric(horizontal: 12), + height: ComposerStyle.suggestionItemHeight, child: itemChild, ), ), @@ -91,8 +93,9 @@ class ContactSuggestionBoxItem extends StatelessWidget { } else { return Material( color: Colors.transparent, - child: Padding( - padding: padding ?? const EdgeInsets.all(12), + child: Container( + padding: const EdgeInsets.symmetric(horizontal: 12), + height: ComposerStyle.suggestionItemHeight, child: itemChild, ), ); diff --git a/lib/features/email_recovery/presentation/styles/text_input_field/suggestion_item_widget_styles.dart b/lib/features/email_recovery/presentation/styles/text_input_field/suggestion_item_widget_styles.dart index 399764375..c5e2b6d33 100644 --- a/lib/features/email_recovery/presentation/styles/text_input_field/suggestion_item_widget_styles.dart +++ b/lib/features/email_recovery/presentation/styles/text_input_field/suggestion_item_widget_styles.dart @@ -1,8 +1,10 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:flutter/material.dart'; +import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; class SuggestionItemWidgetStyles { static const double iconSelectedSize = 24.0; + static const double suggestionItemHeight = ComposerStyle.suggestionItemHeight; static const EdgeInsetsGeometry margin = EdgeInsets.all(8.0); static const EdgeInsetsGeometry contentPaddingDuplicated = EdgeInsets.symmetric( diff --git a/lib/features/email_recovery/presentation/styles/text_input_field/text_input_suggestion_field_widget_styles.dart b/lib/features/email_recovery/presentation/styles/text_input_field/text_input_suggestion_field_widget_styles.dart index 09ae82c7b..ef86e8ed7 100644 --- a/lib/features/email_recovery/presentation/styles/text_input_field/text_input_suggestion_field_widget_styles.dart +++ b/lib/features/email_recovery/presentation/styles/text_input_field/text_input_suggestion_field_widget_styles.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; class TextInputSuggestionFieldWidgetStyles { static const double titleWidth = 112.0; @@ -8,6 +9,7 @@ class TextInputSuggestionFieldWidgetStyles { static const double suggestionsBoxElevation = 20.0; static const double suggestionsBoxRadius = 20.0; static const double suggestionsBoxMaxHeight = 350.0; + static const double suggestionBoxItemHeight = ComposerStyle.suggestionItemHeight; static const double space = 12.0; static const double spaceMobile = 8.0; diff --git a/lib/features/email_recovery/presentation/widgets/text_input_field/suggestion_item_widget.dart b/lib/features/email_recovery/presentation/widgets/text_input_field/suggestion_item_widget.dart deleted file mode 100644 index a46c20dd5..000000000 --- a/lib/features/email_recovery/presentation/widgets/text_input_field/suggestion_item_widget.dart +++ /dev/null @@ -1,95 +0,0 @@ -import 'package:core/presentation/extensions/color_extension.dart'; -import 'package:core/presentation/resources/image_paths.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; -import 'package:get/get.dart'; -import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; -import 'package:model/model.dart'; -import 'package:super_tag_editor/widgets/rich_text_widget.dart'; -import 'package:tmail_ui_user/features/email_recovery/presentation/styles/text_input_field/suggestion_item_widget_styles.dart'; -import 'package:tmail_ui_user/features/email_recovery/presentation/widgets/text_input_field/avatar_suggestion_item_widget.dart'; -import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/suggesstion_email_address.dart'; - -typedef OnSelectedRecipientSuggestionAction = void Function(EmailAddress emailAddress); - -class SuggestionItemWidget extends StatelessWidget { - final SuggestionEmailState suggestionState; - final EmailAddress emailAddress; - final String? suggestionValid; - final bool highlight; - final OnSelectedRecipientSuggestionAction? onSelectedAction; - - final _imagePaths = Get.find(); - - SuggestionItemWidget({ - super.key, - required this.suggestionState, - required this.emailAddress, - this.highlight = false, - this.suggestionValid, - this.onSelectedAction, - }); - - @override - Widget build(BuildContext context) { - if (suggestionState == SuggestionEmailState.duplicated) { - return Container( - margin: SuggestionItemWidgetStyles.margin, - decoration: SuggestionItemWidgetStyles.decoration, - child: Material( - type: MaterialType.transparency, - child: ListTile( - contentPadding: SuggestionItemWidgetStyles.contentPaddingDuplicated, - leading: AvatarSuggestionItemWidget(emailAddress: emailAddress), - title: RichTextWidget( - textOrigin: emailAddress.asString(), - wordSearched: suggestionValid ?? '', - overflow: TextOverflow.ellipsis, - ), - subtitle: emailAddress.displayName.isNotEmpty - ? RichTextWidget( - textOrigin: emailAddress.emailAddress, - wordSearched: suggestionValid ?? '', - styleTextOrigin: SuggestionItemWidgetStyles.subTitleTextOriginStyle, - styleWordSearched: SuggestionItemWidgetStyles.subTitleWordSearchedStyle, - overflow: TextOverflow.ellipsis, - ) - : null, - trailing: SvgPicture.asset( - _imagePaths.icFilterSelected, - width: SuggestionItemWidgetStyles.iconSelectedSize, - height: SuggestionItemWidgetStyles.iconSelectedSize, - fit: BoxFit.fill, - ), - ), - ), - ); - } else { - return Container( - color: highlight ? AppColor.colorItemSelected : Colors.white, - child: Material( - type: MaterialType.transparency, - child: ListTile( - contentPadding: SuggestionItemWidgetStyles.contentPaddingValid, - leading: AvatarSuggestionItemWidget(emailAddress: emailAddress), - title: RichTextWidget( - textOrigin: emailAddress.asString(), - wordSearched: suggestionValid ?? '', - overflow: TextOverflow.ellipsis, - ), - subtitle: emailAddress.displayName.isNotEmpty - ? RichTextWidget( - textOrigin: emailAddress.emailAddress, - wordSearched: suggestionValid ?? '', - styleTextOrigin: SuggestionItemWidgetStyles.subTitleTextOriginStyle, - styleWordSearched: SuggestionItemWidgetStyles.subTitleWordSearchedStyle, - overflow: TextOverflow.ellipsis, - ) - : null, - onTap: () => onSelectedAction?.call(emailAddress), - ), - ), - ); - } - } -} \ No newline at end of file diff --git a/lib/features/email_recovery/presentation/widgets/text_input_field/text_input_field_suggestion_widget.dart b/lib/features/email_recovery/presentation/widgets/text_input_field/text_input_field_suggestion_widget.dart index f8829604d..315b2b016 100644 --- a/lib/features/email_recovery/presentation/widgets/text_input_field/text_input_field_suggestion_widget.dart +++ b/lib/features/email_recovery/presentation/widgets/text_input_field/text_input_field_suggestion_widget.dart @@ -1,20 +1,22 @@ import 'dart:async'; import 'dart:math'; +import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/utils/app_logger.dart'; import 'package:collection/collection.dart'; import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; import 'package:model/mailbox/expand_mode.dart'; import 'package:model/extensions/email_address_extension.dart'; import 'package:super_tag_editor/tag_editor.dart'; +import 'package:tmail_ui_user/features/composer/presentation/model/suggestion_email_address.dart'; +import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_suggestion_item_widget.dart'; import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_field.dart'; import 'package:tmail_ui_user/features/email_recovery/presentation/styles/text_input_field/text_input_suggestion_field_widget_styles.dart'; -import 'package:tmail_ui_user/features/email_recovery/presentation/widgets/text_input_field/suggestion_item_widget.dart'; import 'package:tmail_ui_user/features/email_recovery/presentation/widgets/text_input_field/suggestion_tag_item_widget.dart'; -import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/suggesstion_email_address.dart'; import 'package:tmail_ui_user/main/utils/app_config.dart'; typedef OnSuggestionEmailAddress = Future> Function(String word, {int? limit}); @@ -68,6 +70,8 @@ class TextInputFieldSuggestionWidget extends StatefulWidget { } class _TextInputFieldSuggestionWidgetState extends State { + final _imagePaths = Get.find(); + bool _lastTagFocused = false; late List _currentListEmailAddress; Timer? _gapBetweenTagChangedAndFindSuggestion; @@ -138,6 +142,7 @@ class _TextInputFieldSuggestionWidgetState extends State _handleFocusTagAction.call(focused, setState), @@ -168,7 +173,8 @@ class _TextInputFieldSuggestionWidgetState extends State get props => [emailAddress, state]; -} - -enum SuggestionEmailState { - valid, - duplicated, -} \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/styles/autocomplete_suggestion_item_web_style.dart b/lib/features/mailbox_dashboard/presentation/styles/autocomplete_suggestion_item_web_style.dart deleted file mode 100644 index 788706660..000000000 --- a/lib/features/mailbox_dashboard/presentation/styles/autocomplete_suggestion_item_web_style.dart +++ /dev/null @@ -1,27 +0,0 @@ -import 'package:core/presentation/extensions/color_extension.dart'; -import 'package:flutter/material.dart'; - -class AutoCompleteSuggestionItemWebStyle { - static const double iconSize = 24.0; - - static const EdgeInsetsGeometry margin = EdgeInsets.all(8.0); - - static const EdgeInsetsGeometry contentPaddingDuplicated = EdgeInsets.symmetric(horizontal: 8.0); - static const EdgeInsetsGeometry contentPaddingValid = EdgeInsets.symmetric(horizontal: 16.0); - - static const Decoration decoration = BoxDecoration( - color: AppColor.colorBgMenuItemDropDownSelected, - borderRadius: BorderRadius.all(Radius.circular(20)) - ); - - static const TextStyle subTitleTextOriginStyle = TextStyle( - color: AppColor.colorHintSearchBar, - fontSize: 13, - fontWeight: FontWeight.normal - ); - static const TextStyle subTitleWordSearchStyle = TextStyle( - color: Colors.black, - fontSize: 13, - fontWeight: FontWeight.bold - ); -} \ 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 7a3ac7df9..8e82a0d59 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 @@ -1,5 +1,6 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:flutter/material.dart'; +import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; class TextFieldAutoCompleteEmailAddressWebStyles { static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 8); @@ -15,6 +16,7 @@ class TextFieldAutoCompleteEmailAddressWebStyles { static const double suggestionBoxElevation = 20.0; static const double suggestionBoxMaxHeight = 350.0; + static const double suggestionBoxItemHeight = ComposerStyle.suggestionItemHeight; static const double fieldTitleWidth = 112.0; static const double space = 8.0; diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_suggestion_item_widget_web.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_suggestion_item_widget_web.dart deleted file mode 100644 index 788119fbf..000000000 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_suggestion_item_widget_web.dart +++ /dev/null @@ -1,95 +0,0 @@ -import 'package:core/core.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; -import 'package:get/get.dart'; -import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; -import 'package:model/extensions/email_address_extension.dart'; -import 'package:super_tag_editor/widgets/rich_text_widget.dart'; -import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/suggesstion_email_address.dart'; -import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/autocomplete_suggestion_item_web_style.dart'; -import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/avatar_suggestion_item_widget.dart'; - -typedef OnSelectedRecipientSuggestionAction = Function(EmailAddress emailAddress); - -class AutoCompleteSuggestionItemWidgetWeb extends StatelessWidget { - - final SuggestionEmailState suggestionState; - final EmailAddress emailAddress; - final String? suggestionValid; - final bool highlight; - final OnSelectedRecipientSuggestionAction? onSelectedAction; - - final _imagePaths = Get.find(); - - AutoCompleteSuggestionItemWidgetWeb({ - Key? key, - required this.suggestionState, - required this.emailAddress, - this.highlight = false, - this.suggestionValid, - this.onSelectedAction, - }) : super(key: key); - - @override - Widget build(BuildContext context) { - if (suggestionState == SuggestionEmailState.duplicated) { - return Container( - margin: AutoCompleteSuggestionItemWebStyle.margin, - decoration: AutoCompleteSuggestionItemWebStyle.decoration, - child: Material( - type: MaterialType.transparency, - child: ListTile( - contentPadding: AutoCompleteSuggestionItemWebStyle.contentPaddingDuplicated, - leading: AvatarSuggestionItemWidget(emailAddress: emailAddress), - title: RichTextWidget( - textOrigin: emailAddress.asString(), - wordSearched: suggestionValid ?? '', - overflow: TextOverflow.ellipsis, - ), - subtitle: emailAddress.displayName.isNotEmpty - ? RichTextWidget( - textOrigin: emailAddress.emailAddress, - wordSearched: suggestionValid ?? '', - styleTextOrigin: AutoCompleteSuggestionItemWebStyle.subTitleTextOriginStyle, - styleWordSearched: AutoCompleteSuggestionItemWebStyle.subTitleWordSearchStyle, - overflow: TextOverflow.ellipsis, - ) - : null, - trailing: SvgPicture.asset( - _imagePaths.icFilterSelected, - width: AutoCompleteSuggestionItemWebStyle.iconSize, - height: AutoCompleteSuggestionItemWebStyle.iconSize, - fit: BoxFit.fill, - ), - ), - ), - ); - } else { - return Container( - color: highlight ? AppColor.colorItemSelected : Colors.white, - child: Material( - type: MaterialType.transparency, - child: ListTile( - contentPadding: AutoCompleteSuggestionItemWebStyle.contentPaddingValid, - leading: AvatarSuggestionItemWidget(emailAddress: emailAddress), - title: RichTextWidget( - textOrigin: emailAddress.asString(), - wordSearched: suggestionValid ?? '', - overflow: TextOverflow.ellipsis, - ), - subtitle: emailAddress.displayName.isNotEmpty - ? RichTextWidget( - textOrigin: emailAddress.emailAddress, - wordSearched: suggestionValid ?? '', - styleTextOrigin: AutoCompleteSuggestionItemWebStyle.subTitleTextOriginStyle, - styleWordSearched: AutoCompleteSuggestionItemWebStyle.subTitleWordSearchStyle, - overflow: TextOverflow.ellipsis, - ) - : null, - onTap: () => onSelectedAction?.call(emailAddress), - ), - ), - ); - } - } -} 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 3d0c5228f..04fcfafec 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 @@ -3,21 +3,23 @@ import 'dart:math'; import 'package:collection/collection.dart'; 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/utils/app_logger.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; import 'package:model/extensions/email_address_extension.dart'; import 'package:model/mailbox/expand_mode.dart'; import 'package:super_tag_editor/tag_editor.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/draggable_email_address.dart'; +import 'package:tmail_ui_user/features/composer/presentation/model/suggestion_email_address.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_composer_widget.dart'; +import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_suggestion_item_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/advanced_search_filter.dart'; -import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/suggesstion_email_address.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/text_field_autocomplete_email_address_web_style.dart'; -import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_suggestion_item_widget_web.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_tag_item_widget_web.dart'; import 'package:tmail_ui_user/main/utils/app_config.dart'; @@ -73,6 +75,8 @@ class TextFieldAutocompleteEmailAddressWeb extends StatefulWidget { } class _TextFieldAutocompleteEmailAddressWebState extends State { + final _imagePaths = Get.find(); + bool _lastTagFocused = false; bool _isDragging = false; late List _currentListEmailAddress; @@ -166,6 +170,7 @@ class _TextFieldAutocompleteEmailAddressWebState extends State _handleFocusTagAction.call(focused, setState), @@ -196,7 +201,8 @@ class _TextFieldAutocompleteEmailAddressWebState extends State(); final _imagePaths = Get.find(); final GlobalKey keyToEmailTagEditor = GlobalKey(); + final FocusNode _focusNodeKeyboard = FocusNode(); late List listEmailAddress; @@ -73,12 +75,19 @@ class _AutocompleteContactTextFieldWithTagsState extends State( key: keyToEmailTagEditor, length: listEmailAddress.length, controller: widget.controller, + focusNodeKeyboard: _focusNodeKeyboard, borderRadius: 12, backgroundColor: AppColor.colorInputBackgroundCreateMailbox, focusedBorderColor: AppColor.colorTextButton, @@ -144,14 +153,16 @@ class _AutocompleteContactTextFieldWithTagsState extends State