Skip to content

TF-4064 Mobile drag drop email addresses in composer #4065

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

TF-4064 Mobile drag drop email addresses in composer #4065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a576d30
TF-4064 Support drag & drop email addresses in composer on mobile
dab246 Sep 26, 2025
fa3d982
TF-4064 Highlighted all recipient fields when drop
dab246 Sep 26, 2025
3642181
TF-4064 Fix recipient composer widget unit test
dab246 Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion lib/features/base/widget/card_with_smart_interaction_overlay_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ class _CardWithSmartInteractionOverlayViewState
child: SmartInteractionWidget(
onRightMouseClickAction: ({RelativeRect? position}) => _togglePopup(),
onDoubleClickAction: ({RelativeRect? position}) => _togglePopup(),
onLongPressAction: _togglePopup,
onTapAction: _togglePopup,
child: widget.child,
),
Expand Down
1 change: 1 addition & 0 deletions lib/features/base/widget/default_field/default_autocomplete_input_field_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ class _DefaultAutocompleteInputFieldWidgetState
final currentEmailAddress = _currentListEmailAddress.elementAt(index);
return DefaultAutocompleteTagItemWidget(
field: widget.field,
imagePaths: _imagePaths,
currentEmailAddress: currentEmailAddress,
currentListEmailAddress: _currentListEmailAddress,
collapsedListEmailAddress: _collapsedListEmailAddress,
Expand Down
5 changes: 5 additions & 0 deletions lib/features/base/widget/default_field/default_autocomplete_tag_item_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:core/utils/platform_info.dart';
Expand All @@ -15,6 +16,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/ad

class DefaultAutocompleteTagItemWidget extends StatelessWidget {

final ImagePaths imagePaths;
final bool isCollapsed;
final bool isTagFocused;
final FilterField field;
Expand All @@ -27,6 +29,7 @@ class DefaultAutocompleteTagItemWidget extends StatelessWidget {

const DefaultAutocompleteTagItemWidget({
Key? key,
required this.imagePaths,
required this.field,
required this.currentEmailAddress,
required this.currentListEmailAddress,
Expand Down Expand Up @@ -73,10 +76,12 @@ class DefaultAutocompleteTagItemWidget extends StatelessWidget {
),
feedback: DraggableRecipientTagWidget(
emailAddress: currentEmailAddress,
imagePaths: imagePaths,
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
),
childWhenDragging: DraggableRecipientTagWidget(
emailAddress: currentEmailAddress,
imagePaths: imagePaths,
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
),
child: TextFieldTapRegion(
Expand Down
6 changes: 0 additions & 6 deletions lib/features/base/widget/smart_interaction_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,20 @@ import 'package:universal_html/html.dart' as html;

typedef OnRightMouseClickAction = void Function({RelativeRect? position});
typedef OnDoubleClickAction = void Function({RelativeRect? position});
typedef OnLongPressAction = void Function();
typedef OnTapAction = void Function();

class SmartInteractionWidget extends StatefulWidget {
final Widget child;
final bool usePosition;
final OnRightMouseClickAction onRightMouseClickAction;
final OnDoubleClickAction onDoubleClickAction;
final OnLongPressAction onLongPressAction;
final OnTapAction onTapAction;

const SmartInteractionWidget({
super.key,
required this.child,
required this.onRightMouseClickAction,
required this.onDoubleClickAction,
required this.onLongPressAction,
required this.onTapAction,
this.usePosition = false,
});
Expand Down Expand Up @@ -133,8 +130,6 @@ class _SmartInteractionWidgetState extends State<SmartInteractionWidget> {
}
}

void _handleLongPress() => widget.onLongPressAction();

void _handleOnTapAction() => widget.onTapAction();

@override
Expand Down Expand Up @@ -166,7 +161,6 @@ class _SmartInteractionWidgetState extends State<SmartInteractionWidget> {
}
} else {
return GestureDetector(
onLongPress: _handleLongPress,
onTap: _handleOnTapAction,
child: widget.child,
);
Expand Down
9 changes: 9 additions & 0 deletions lib/features/composer/presentation/composer_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import 'package:tmail_ui_user/features/composer/presentation/extensions/handle_c
import 'package:tmail_ui_user/features/composer/presentation/extensions/handle_edit_recipient_extension.dart';
import 'package:tmail_ui_user/features/composer/presentation/extensions/handle_open_context_menu_extension.dart';
import 'package:tmail_ui_user/features/composer/presentation/extensions/mark_as_important_extension.dart';
import 'package:tmail_ui_user/features/composer/presentation/extensions/remove_draggable_email_address_between_recipient_fields_extension.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/prefix_recipient_state.dart';
import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart';
import 'package:tmail_ui_user/features/composer/presentation/styles/mobile_app_bar_composer_widget_style.dart';
Expand Down Expand Up @@ -146,6 +147,7 @@ class ComposerView extends GetWidget<ComposerController> {
onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
onFocusNextAddressAction: controller.handleFocusNextAddressAction,
onEnableAllRecipientsInputAction: controller.handleEnableRecipientsInputAction,
onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
onEditRecipientAction: controller.onEditRecipient,
onClearFocusAction: controller.onClearFocusAction,
)),
Expand All @@ -171,6 +173,7 @@ class ComposerView extends GetWidget<ComposerController> {
onUpdateListEmailAddressAction: controller.updateListEmailAddress,
onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
onFocusNextAddressAction: controller.handleFocusNextAddressAction,
onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
onEditRecipientAction: controller.onEditRecipient,
onClearFocusAction: controller.onClearFocusAction,
);
Expand Down Expand Up @@ -200,6 +203,7 @@ class ComposerView extends GetWidget<ComposerController> {
onUpdateListEmailAddressAction: controller.updateListEmailAddress,
onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
onFocusNextAddressAction: controller.handleFocusNextAddressAction,
onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
onEditRecipientAction: controller.onEditRecipient,
onClearFocusAction: controller.onClearFocusAction,
);
Expand Down Expand Up @@ -229,6 +233,7 @@ class ComposerView extends GetWidget<ComposerController> {
onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
onFocusNextAddressAction: controller.handleFocusNextAddressAction,
onEnableAllRecipientsInputAction: controller.handleEnableRecipientsInputAction,
onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
onEditRecipientAction: controller.onEditRecipient,
onClearFocusAction: controller.onClearFocusAction,
);
Expand Down Expand Up @@ -357,6 +362,7 @@ class ComposerView extends GetWidget<ComposerController> {
onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
onFocusNextAddressAction: controller.handleFocusNextAddressAction,
onEnableAllRecipientsInputAction: controller.handleEnableRecipientsInputAction,
onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
onEditRecipientAction: controller.onEditRecipient,
onClearFocusAction: controller.onClearFocusAction,
),
Expand All @@ -381,6 +387,7 @@ class ComposerView extends GetWidget<ComposerController> {
onUpdateListEmailAddressAction: controller.updateListEmailAddress,
onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
onFocusNextAddressAction: controller.handleFocusNextAddressAction,
onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
onEditRecipientAction: controller.onEditRecipient,
onClearFocusAction: controller.onClearFocusAction,
),
Expand All @@ -405,6 +412,7 @@ class ComposerView extends GetWidget<ComposerController> {
onUpdateListEmailAddressAction: controller.updateListEmailAddress,
onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
onFocusNextAddressAction: controller.handleFocusNextAddressAction,
onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
onEditRecipientAction: controller.onEditRecipient,
onClearFocusAction: controller.onClearFocusAction,
),
Expand All @@ -428,6 +436,7 @@ class ComposerView extends GetWidget<ComposerController> {
onUpdateListEmailAddressAction: controller.updateListEmailAddress,
onSuggestionEmailAddress: controller.getAutoCompleteSuggestion,
onFocusNextAddressAction: controller.handleFocusNextAddressAction,
onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
onEditRecipientAction: controller.onEditRecipient,
onClearFocusAction: controller.onClearFocusAction,
),
Expand Down
23 changes: 13 additions & 10 deletions lib/features/composer/presentation/widgets/draggable_recipient_tag_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,20 @@ import 'package:core/presentation/resources/image_paths.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/styles/draggable_recipient_tag_widget_style.dart';

class DraggableRecipientTagWidget extends StatelessWidget {

final ImagePaths imagePaths;
final EmailAddress emailAddress;
final EdgeInsetsGeometry? padding;

final _imagePaths = Get.find<ImagePaths>();

DraggableRecipientTagWidget({
const DraggableRecipientTagWidget({
super.key,
required this.emailAddress,
required this.imagePaths,
this.padding,
});

Expand All @@ -44,15 +43,19 @@ class DraggableRecipientTagWidget extends StatelessWidget {
labelFontSize: DraggableRecipientTagWidgetStyle.avatarLabelFontSize,
iconSize: DraggableRecipientTagWidgetStyle.avatarIconSize,
),
Padding(
padding: DraggableRecipientTagWidgetStyle.labelPadding,
child: DefaultTextStyle(
style: DraggableRecipientTagWidgetStyle.labelTextStyle,
child: Text(emailAddress.asString()),
Flexible(
child: Padding(
padding: DraggableRecipientTagWidgetStyle.labelPadding,
child: DefaultTextStyle(
style: DraggableRecipientTagWidgetStyle.labelTextStyle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
child: Text(emailAddress.asString()),
),
),
),
SvgPicture.asset(
_imagePaths.icClose,
imagePaths.icClose,
colorFilter: DraggableRecipientTagWidgetStyle.deleteIconColor.asFilter(),
fit: BoxFit.fill
)
Expand Down
85 changes: 3 additions & 82 deletions lib/features/composer/presentation/widgets/recipient_composer_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,6 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
onKeyEvent: PlatformInfo.isWeb ? _recipientInputOnKeyListener : null,
child: StatefulBuilder(
builder: (context, stateSetter) {
if (PlatformInfo.isWeb || widget.isTestingForWeb) {
return DragTarget<DraggableEmailAddress>(
builder: (context, candidateData, rejectedData) {
return TagEditor<SuggestionEmailAddress>(
Expand All @@ -187,6 +186,9 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
focusNodeKeyboard: widget.focusNodeKeyboard,
borderRadius: RecipientComposerWidgetStyle.enableBorderRadius,
enableBorderColor: RecipientComposerWidgetStyle.enableBorderColor,
focusedBorderColor: _isDragging
? RecipientComposerWidgetStyle.enableBorderColor
: null,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.done,
debounceDuration: RecipientComposerWidgetStyle.suggestionDebounceDuration,
Expand Down Expand Up @@ -274,87 +276,6 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
}
},
);
} else {
return TagEditor<SuggestionEmailAddress>(
key: widget.keyTagEditor,
length: _collapsedListEmailAddress.length,
controller: widget.controller,
focusNode: widget.focusNode,
focusNodeKeyboard: widget.focusNodeKeyboard,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.done,
debounceDuration: RecipientComposerWidgetStyle.suggestionDebounceDuration,
tagSpacing: RecipientComposerWidgetStyle.tagSpacing,
minTextFieldWidth: RecipientComposerWidgetStyle.minTextFieldWidth,
resetTextOnSubmitted: true,
autoScrollToInput: false,
autoHideTextInputField: true,
cursorColor: RecipientComposerWidgetStyle.cursorColor,
suggestionsBoxElevation: RecipientComposerWidgetStyle.suggestionsBoxElevation,
suggestionsBoxBackgroundColor: RecipientComposerWidgetStyle.suggestionsBoxBackgroundColor,
suggestionsBoxRadius: RecipientComposerWidgetStyle.suggestionsBoxRadius,
suggestionsBoxMaxHeight: RecipientComposerWidgetStyle.suggestionsBoxMaxHeight,
suggestionItemHeight: RecipientComposerWidgetStyle.suggestionBoxItemHeight,
suggestionBoxWidth: _getSuggestionBoxWidth(widget.maxWidth),
textStyle: RecipientComposerWidgetStyle.inputTextStyle,
onFocusTagAction: (index) => _handleFocusTagAction.call(index, stateSetter),
onDeleteTagAction: (index) => _handleDeleteLatestTagAction.call(index, stateSetter),
onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, stateSetter),
onSubmitted: (value) => _handleSubmitTagAction.call(value, stateSetter),
onTapOutside: (_) {},
onFocusTextInput: () {
if (_isCollapse) {
widget.onShowFullListEmailAddressAction?.call(widget.prefix);
}
},
inputDecoration: const InputDecoration(border: InputBorder.none),
tagBuilder: (context, index) {
final currentEmailAddress = _currentListEmailAddress[index];

return RecipientTagItemWidget(
index: index,
imagePaths: widget.imagePaths,
prefix: widget.prefix,
composerId: widget.composerId,
currentEmailAddress: currentEmailAddress,
currentListEmailAddress: _currentListEmailAddress,
collapsedListEmailAddress: _collapsedListEmailAddress,
isCollapsed: _isCollapse,
isTagFocused: _tagIndexFocused == index,
maxWidth: widget.maxWidth,
isMobile: _responsiveUtils.isMobile(context),
onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, stateSetter),
onShowFullAction: widget.onShowFullListEmailAddressAction,
onEditRecipientAction: widget.onEditRecipientAction,
onClearFocusAction: widget.onClearFocusAction,
);
},
onTagChanged: (value) => _handleOnTagChangeAction.call(value, stateSetter),
findSuggestions: (queryString) => _findSuggestions(
queryString,
limit: AppConfig.defaultLimitAutocomplete,
),
isLoadMoreOnlyOnce: true,
isLoadMoreReplaceAllOld: false,
loadMoreSuggestions: _findSuggestions,
useDefaultHighlight: false,
suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight, suggestionValid) {
return RecipientSuggestionItemWidget(
imagePaths: widget.imagePaths,
suggestionState: suggestionEmailAddress.state,
emailAddress: _subAddressingValidatedEmailAddress(suggestionEmailAddress.emailAddress),
suggestionValid: suggestionValid,
highlight: highlight,
onSelectedAction: (emailAddress) {
stateSetter(() => _currentListEmailAddress.add(emailAddress));
_updateListEmailAddressAction();
tagEditorState.resetTextField();
tagEditorState.closeSuggestionBox();
},
);
},
);
}
},
)
)
Expand Down
Loading
Loading