TF-1354 Fix overflow text on web

lib/features/composer/presentation/composer_view_web.dart

@@ -418,15 +418,23 @@ class ComposerView extends GetWidget<ComposerController>
                       children: [
                         Text(
                           item.name ?? '',
-                          style: const TextStyle(fontSize: 16, fontWeight: FontWeight.normal, color: Colors.black),
+                          style: const TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.normal,
+                            color: Colors.black),
                           maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
+                          overflow: CommonTextStyle.defaultTextOverFlow,
+                          softWrap: CommonTextStyle.defaultSoftWrap
                         ),
                         Text(
                           item.email ?? '',
-                          style: const TextStyle(fontSize: 13, fontWeight: FontWeight.normal, color: AppColor.colorHintSearchBar),
+                          style: const TextStyle(
+                            fontSize: 13,
+                            fontWeight: FontWeight.normal,
+                            color: AppColor.colorHintSearchBar),
                           maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
+                          overflow: CommonTextStyle.defaultTextOverFlow,
+                          softWrap: CommonTextStyle.defaultSoftWrap
                         )
                       ]
                   ),
@@ -447,13 +455,18 @@ class ComposerView extends GetWidget<ComposerController>
           ),
         ),
         Expanded(child: Padding(
-            padding: const EdgeInsets.only(right: 8, left: 12),
+          padding: const EdgeInsets.only(right: 8, left: 12),
-            child: Text(
+          child: Text(
-              controller.identitySelected.value?.email ?? '',
+            controller.identitySelected.value?.email ?? '',
-              maxLines: 1,
+            maxLines: 1,
-              overflow: TextOverflow.ellipsis,
+            overflow: CommonTextStyle.defaultTextOverFlow,
-              style: const TextStyle(fontSize: 17, fontWeight: FontWeight.normal, color: AppColor.colorEmailAddressPrefix),
+            softWrap: CommonTextStyle.defaultSoftWrap,
-            ))),
+            style: const TextStyle(
+              fontSize: 17,
+              fontWeight: FontWeight.normal,
+              color: AppColor.colorEmailAddressPrefix),
+          )
+        )),
       ]),
     );
   }

lib/features/composer/presentation/widgets/email_address_input_builder.dart

@@ -45,6 +45,7 @@ class EmailAddressInputBuilder {
   OnFocusEmailAddressChangeAction? _onFocusEmailAddressChangeAction;
 
   Timer? _gapBetweenTagChangedAndFindSuggestion;
+  bool lastTagFocused = false;
 
   void addOnUpdateListEmailAddressAction(OnUpdateListEmailAddressAction onUpdateListEmailAddressAction) {
     _onUpdateListEmailAddressAction = onUpdateListEmailAddressAction;
@@ -148,7 +149,12 @@ class EmailAddressInputBuilder {
             suggestionsBoxRadius: 20,
             suggestionsBoxMaxHeight: 300,
             textStyle: const TextStyle(color: AppColor.colorEmailAddress, fontSize: 14, fontWeight: FontWeight.w500),
-            onDeleteTagAction: () => _handleDeleteTagAction(setState),
+            onFocusTagAction: (focused) {
+              setState(() {
+                lastTagFocused = focused;
+              });
+            },
+            onDeleteTagAction: () => _handleDeleteTagAction(setState, context),
             onSelectOptionAction: (item) {
               if (!_isDuplicatedRecipient(item.emailAddress.emailAddress)) {
                 setState(() => listEmailAddress.add(item.emailAddress));
@@ -163,39 +169,56 @@ class EmailAddressInputBuilder {
               }
             },
             inputDecoration: const InputDecoration(border: InputBorder.none),
-            tagBuilder: (context, index) => Stack(alignment: Alignment.centerRight, children: [
+            tagBuilder: (context, index) {
-              Padding(
+              final isLastEmail = index == listEmailAddress.length - 1;
-                  padding: EdgeInsets.only(top: kIsWeb ? 8 : 0, right: _isCollapse ? 50 : 0),
+              return Stack(
-                  child: InkWell(
+                alignment: Alignment.centerRight,
-                      onTap: () => _isCollapse ? _onShowFullListEmailAddressAction?.call(_prefixEmailAddress) : null,
+                children: [
+                  Padding(
+                    padding: EdgeInsets.only(
+                      top: kIsWeb ? 8 : 0,
+                      right: _isCollapse ? 50 : 0),
+                    child: InkWell(
+                      onTap: () => _isCollapse
+                        ? _onShowFullListEmailAddressAction?.call(_prefixEmailAddress)
+                        : null,
                       child: Chip(
                         labelPadding: const EdgeInsets.only(left: 12, right: 12, bottom: 2),
                         label: Text(newListEmailAddress[index].asString(), maxLines: 1, overflow: kIsWeb ? null : TextOverflow.ellipsis),
                         deleteIcon: SvgPicture.asset(_imagePaths.icClose, fit: BoxFit.fill),
                         labelStyle: const TextStyle(color: Colors.black, fontSize: 17, fontWeight: FontWeight.normal),
-                        backgroundColor: _isEmailAddressValid(listEmailAddress[index].emailAddress) ? AppColor.colorEmailAddressTag : Colors.white,
+                        backgroundColor: _getTagBackgroundColor(listEmailAddress[index], isLastEmail),
                         shape: RoundedRectangleBorder(
                           borderRadius: BorderRadius.circular(10),
-                          side: BorderSide(
+                          side: _getTagBorderSide(listEmailAddress[index], isLastEmail),
-                              width: _isEmailAddressValid(listEmailAddress[index].emailAddress) ? 0 : 1,
-                              color: _isEmailAddressValid(listEmailAddress[index].emailAddress) ? AppColor.colorEmailAddressTag : AppColor.colorBorderEmailAddressInvalid),
                         ),
                         avatar: newListEmailAddress[index].displayName.isNotEmpty
-                            ? CircleAvatar(
+                          ? CircleAvatar(
-                                backgroundColor: AppColor.colorTextButton,
+                              backgroundColor: AppColor.colorTextButton,
-                                child: Text(
+                              child: Text(
-                                    listEmailAddress[index].displayName[0].toUpperCase(),
+                                listEmailAddress[index].displayName[0].toUpperCase(),
-                                    style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w500)))
+                                style: const TextStyle(
-                            : null,
+                                  color: Colors.white,
+                                  fontSize: 12,
+                                  fontWeight: FontWeight.w500
+                                )
+                              ))
+                          : null,
                         onDeleted: () {
                           setState(() => listEmailAddress.removeAt(index));
                           _onUpdateListEmailAddressAction?.call(_prefixEmailAddress, listEmailAddress);
                         },
                       )
-                  )
+                    )
-              ),
+                  ),
-              if (_isCollapse) _buildCounter(context, listEmailAddress.length - newListEmailAddress.length),
+                  if (_isCollapse)
-            ]),
+                    _buildCounter(
+                      context,
+                      listEmailAddress.length - newListEmailAddress.length
+                    ),
+                ]
+              );
+            },
             onTagChanged: (String value) {
               log('EmailAddressInputBuilder::_buildTagEditor(): onTagChanged: $value');
               if (!_isDuplicatedRecipient(value)) {
@@ -207,12 +230,25 @@ class EmailAddressInputBuilder {
                 _handleGapBetweenTagChangedAndFindSuggestion);
             },
             findSuggestions: _findSuggestions,
-            suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, highlight) {
+            useDefaultHighlight: false,
+            suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight) {
               switch (suggestionEmailAddress.state) {
                 case SuggestionEmailState.duplicated:
-                  return _buildExistedSuggestionItem(setState, context, suggestionEmailAddress);
+                  return _buildExistedSuggestionItem(
+                    setState,
+                    context,
+                    suggestionEmailAddress,
+                  );
                 default:
-                  return _buildSuggestionItem(setState, context, tagEditorState, suggestionEmailAddress);
+                  return _buildSuggestionItem(
+                    setState,
+                    context,
+                    tagEditorState,
+                    suggestionEmailAddress,
+                    index,
+                    length,
+                    highlight
+                  );
               }
             },
           )
@@ -291,42 +327,71 @@ class EmailAddressInputBuilder {
     );
   }
 
-  Widget _buildSuggestionItem(StateSetter setState, BuildContext context, TagsEditorState<SuggestionEmailAddress> tagEditorState, SuggestionEmailAddress suggestionEmailAddress) {
+  Widget _buildSuggestionItem(
-    return ListTile(
+    StateSetter setState,
-      contentPadding: const EdgeInsets.symmetric(horizontal: 16),
+    BuildContext context,
-      leading: Container(
+    TagsEditorState<SuggestionEmailAddress> tagEditorState,
-        width: 40,
+    SuggestionEmailAddress suggestionEmailAddress,
-        height: 40,
+    int index,
-        alignment: Alignment.center,
+    int length,
-        decoration: BoxDecoration(
+    bool highlight
-          shape: BoxShape.circle,
+  ) {
-          color: AppColor.avatarColor,
+    return Container(
-          border: Border.all(color: AppColor.colorShadowBgContentEmail, width: 1.0)),
+      decoration: BoxDecoration(
-        child: Text(
+        color: highlight ? AppColor.colorItemSelected : Colors.white,
-            suggestionEmailAddress.emailAddress.asString().isNotEmpty ? suggestionEmailAddress.emailAddress.asString()[0].toUpperCase() : '',
+        borderRadius: _getBorderRadiusSuggestionItem(index, length)),
-            style: const TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600))),
+      child: ListTile(
-      title: Text(
+        contentPadding: const EdgeInsets.symmetric(horizontal: 16),
-          suggestionEmailAddress.emailAddress.asString(),
+        leading: Container(
-          maxLines: 1,
+          width: 40,
-          overflow: kIsWeb ? null : TextOverflow.ellipsis,
+          height: 40,
-          style: const TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.normal)),
+          alignment: Alignment.center,
-      subtitle: suggestionEmailAddress.emailAddress.displayName.isNotEmpty && suggestionEmailAddress.emailAddress.emailAddress.isNotEmpty
+          decoration: BoxDecoration(
-          ? Text(
+            shape: BoxShape.circle,
-              suggestionEmailAddress.emailAddress.emailAddress,
+            color: AppColor.avatarColor,
-              maxLines: 1,
+            border: Border.all(color: AppColor.colorShadowBgContentEmail, width: 1.0)),
-              overflow: kIsWeb ? null : TextOverflow.ellipsis,
+          child: Text(
-              style: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 13, fontWeight: FontWeight.normal))
+              suggestionEmailAddress.emailAddress.asString().isNotEmpty ? suggestionEmailAddress.emailAddress.asString()[0].toUpperCase() : '',
-          : null,
+              style: const TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600))),
-      onTap: () {
+        title: Text(
-        log('EmailAddressInputBuilder::_buildSuggestionItem(): onTap: $suggestionEmailAddress');
+            suggestionEmailAddress.emailAddress.asString(),
-        setState(() => listEmailAddress.add(suggestionEmailAddress.emailAddress));
+            maxLines: 1,
-        _onUpdateListEmailAddressAction?.call(_prefixEmailAddress, listEmailAddress);
+            overflow: kIsWeb ? null : TextOverflow.ellipsis,
-        tagEditorState.closeSuggestionBox();
+            style: const TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.normal)),
-        tagEditorState.resetTextField();
+        subtitle: suggestionEmailAddress.emailAddress.displayName.isNotEmpty && suggestionEmailAddress.emailAddress.emailAddress.isNotEmpty
-      },
+            ? Text(
+                suggestionEmailAddress.emailAddress.emailAddress,
+                maxLines: 1,
+                overflow: kIsWeb ? null : TextOverflow.ellipsis,
+                style: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 13, fontWeight: FontWeight.normal))
+            : null,
+        onTap: () {
+          log('EmailAddressInputBuilder::_buildSuggestionItem(): onTap: $suggestionEmailAddress');
+          setState(() => listEmailAddress.add(suggestionEmailAddress.emailAddress));
+          _onUpdateListEmailAddressAction?.call(_prefixEmailAddress, listEmailAddress);
+          tagEditorState.closeSuggestionBox();
+          tagEditorState.resetTextField();
+        },
+      ),
     );
   }
 
+  BorderRadius _getBorderRadiusSuggestionItem(int index, int length) {
+    var borderRadius = const BorderRadius.all(Radius.circular(0));
+    if (index == 0) {
+      borderRadius = const BorderRadius.only(
+        topLeft: Radius.circular(20),
+        topRight: Radius.circular(20),
+      );
+    } else if (index == length - 1) {
+      borderRadius = const BorderRadius.only(
+        bottomRight: Radius.circular(20),
+        bottomLeft: Radius.circular(20),
+      );
+    }
+    return borderRadius;
+  }
+
   FutureOr<List<SuggestionEmailAddress>> _findSuggestions(String query) async {
     log('EmailAddressInputBuilder::_findSuggestions():query: $query');
     if (_gapBetweenTagChangedAndFindSuggestion?.isActive ?? false) {
@@ -385,24 +450,35 @@ class EmailAddressInputBuilder {
     log('EmailAddressInputBuilder::_handleGapBetweenTagChangedAndFindSuggestion(): Timeout');
   }
 
-  void _handleDeleteTagAction(StateSetter setState) {
+  Color _getTagBackgroundColor(EmailAddress emailCurrent, bool isLastEmail) {
+    if (lastTagFocused && isLastEmail) {
+      return AppColor.colorItemRecipientSelected;
+    } else {
+      return _isEmailAddressValid(emailCurrent.emailAddress)
+        ? AppColor.colorEmailAddressTag
+        : Colors.white;
+    }
+  }
+
+  BorderSide _getTagBorderSide(EmailAddress emailCurrent, bool isLastEmail) {
+    if (lastTagFocused && isLastEmail) {
+      return const BorderSide(
+        width: 1,
+        color: AppColor.primaryColor);
+    } else {
+      return BorderSide(
+        width: _isEmailAddressValid(emailCurrent.emailAddress) ? 0 : 1,
+        color: _isEmailAddressValid(emailCurrent.emailAddress)
+          ? AppColor.colorEmailAddressTag
+          : AppColor.colorBorderEmailAddressInvalid);
+    }
+  }
+
+  void _handleDeleteTagAction(StateSetter setState, BuildContext context) {
     log('EmailAddressInputBuilder::_handleDeleteTagAction()');
     if (listEmailAddress.isNotEmpty) {
       setState(() {
-        final emailAddressDeleted = listEmailAddress.removeLast();
+        listEmailAddress.removeLast();
-
-        Future.delayed(const Duration(milliseconds: 10), () {
-          if (controller != null) {
-            controller!.text = emailAddressDeleted.emailAddress;
-            controller!.value = controller!.value.copyWith(
-              text: emailAddressDeleted.asString(),
-              selection: TextSelection(
-                baseOffset: emailAddressDeleted.asString().length,
-                extentOffset: emailAddressDeleted.asString().length
-              )
-            );
-          }
-        });
       });
       _onUpdateListEmailAddressAction?.call(_prefixEmailAddress, listEmailAddress);
     }

lib/features/contact/presentation/widgets/autocomplete_contact_text_field_with_tags.dart

@@ -53,6 +53,7 @@ class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteConta
   late List<EmailAddress> listEmailAddress;
 
   Timer? _gapBetweenTagChangedAndFindSuggestion;
+  bool lastTagFocused = false;
 
   @override
   void initState() {
@@ -89,6 +90,23 @@ class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteConta
       suggestionsBoxBackgroundColor: Colors.white,
       suggestionsBoxRadius: 16,
       suggestionsBoxMaxHeight: 350,
+      onFocusTagAction: (focused) {
+        setState(() {
+          lastTagFocused = focused;
+        });
+      },
+      onDeleteTagAction: () {
+        if (listEmailAddress.isNotEmpty) {
+          setState(() {
+            listEmailAddress.removeLast();
+          });
+        }
+      },
+      onSelectOptionAction: (item) {
+        if (!_isDuplicatedRecipient(item.emailAddress.emailAddress)) {
+          setState(() => listEmailAddress.add(item.emailAddress));
+        }
+      },
       onSubmitted: (value) {
         if (!_isDuplicatedRecipient(value)) {
           setState(() => listEmailAddress.add(EmailAddress(null, value)));
@@ -109,6 +127,8 @@ class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteConta
       ),
       tagBuilder: (context, index) => ContactInputTagItem(
         listEmailAddress[index],
+        isLastContact: index == listEmailAddress.length - 1,
+        lastTagFocused: lastTagFocused,
         deleteContactCallbackAction: (contact) {
           setState(() => listEmailAddress.remove(contact));
         }
@@ -123,7 +143,7 @@ class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteConta
         );
       },
       findSuggestions: _findSuggestions,
-      suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, highlight) {
+      suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight) {
         return Container(
           padding: const EdgeInsets.symmetric(horizontal: 12),
           child: ContactSuggestionBoxItem(

lib/features/contact/presentation/widgets/contact_input_tag_item.dart

@@ -15,12 +15,16 @@ typedef DeleteContactCallbackAction = Function(EmailAddress contactDeleted);
 class ContactInputTagItem extends StatelessWidget {
 
   final EmailAddress contact;
+  final bool isLastContact;
+  final bool lastTagFocused;
   final DeleteContactCallbackAction? deleteContactCallbackAction;
 
   const ContactInputTagItem(
     this.contact,
     {
       Key? key,
+      this.isLastContact = false,
+      this.lastTagFocused = false,
       this.deleteContactCallbackAction
     }
   ) : super(key: key);
@@ -59,17 +63,10 @@ class ContactInputTagItem extends StatelessWidget {
             fit: BoxFit.fill)
         : null,
       labelStyle: const TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.normal),
-      backgroundColor: _isValidEmailAddress(contact.emailAddress)
+      backgroundColor: _getTagBackgroundColor(),
-        ? AppColor.colorBackgroundContactTagItem
-        : Colors.white,
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(20),
-        side: BorderSide(
+        side: _getTagBorderSide()
-          width: _isValidEmailAddress(contact.emailAddress) ? 0 : 1,
-          color: _isValidEmailAddress(contact.emailAddress)
-            ? AppColor.colorBackgroundContactTagItem
-            : AppColor.colorBorderEmailAddressInvalid
-        )
       ),
       onDeleted: () => deleteContactCallbackAction?.call(contact),
     );
@@ -88,4 +85,29 @@ class ContactInputTagItem extends StatelessWidget {
   }
 
   bool _isValidEmailAddress(String value) => value.isEmail;
+
+  Color _getTagBackgroundColor() {
+    if (lastTagFocused && isLastContact) {
+      return AppColor.colorItemRecipientSelected;
+    } else {
+      return _isValidEmailAddress(contact.emailAddress)
+        ? AppColor.colorBackgroundContactTagItem
+        : Colors.white;
+    }
+  }
+
+  BorderSide _getTagBorderSide() {
+    if (lastTagFocused && isLastContact) {
+      return const BorderSide(
+      width: 1,
+      color: AppColor.primaryColor);
+    } else {
+      return BorderSide(
+        width: _isValidEmailAddress(contact.emailAddress) ? 0 : 1,
+        color: _isValidEmailAddress(contact.emailAddress)
+          ? AppColor.colorBackgroundContactTagItem
+          : AppColor.colorBorderEmailAddressInvalid
+      );
+    }
+  }
 }

pubspec.lock

@@ -871,7 +871,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: b848fdda3c48c78594a804bb609e1077bb42125d
+      resolved-ref: "92982e13c9414c71e14451da83668b05c282fc2b"
       url: "https://github.com/linagora/jmap-dart-client.git"
     source: git
     version: "0.0.1"
@@ -1377,9 +1377,11 @@ packages:
   super_tag_editor:
     dependency: "direct main"
     description:
-      name: super_tag_editor
+      path: "."
-      url: "https://pub.dartlang.org"
+      ref: master
-    source: hosted
+      resolved-ref: "34ffe7c8c5e8a967ae1cfde2a525c4f5738a0835"
+      url: "https://github.com/dab246/super_tag_editor.git"
+    source: git
     version: "0.0.3+4"
   syncfusion_flutter_core:
     dependency: transitive

pubspec.yaml

@@ -99,8 +99,10 @@ dependencies:
   filesize: 2.0.1
 
   # super_tag_editor
-  super_tag_editor: 0.0.3+4
+  super_tag_editor:
-
+    git:
+      url: https://github.com/dab246/super_tag_editor.git
+      ref: master
   # uuid
   uuid: 3.0.4