TF-2259 Fix padding and overflow text in recipients composer

Signed-off-by: dab246 <tdvu@linagora.com>

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit b1301f72e2a4377d5f3500b6f1ea2c6a8bc7c304)

lib/features/composer/presentation/styles/recipient_tag_item_widget_style.dart

@@ -9,7 +9,7 @@ class RecipientTagItemWidgetStyle {
   static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 4);
   static const EdgeInsetsGeometry counterPadding = EdgeInsetsDirectional.symmetric(vertical: 5, horizontal: 8);
   static const EdgeInsetsGeometry mobileCounterPadding = EdgeInsetsDirectional.symmetric(vertical: 8, horizontal: 8);
-  static const EdgeInsetsGeometry counterMargin = EdgeInsetsDirectional.only(top: PlatformInfo.isWeb ? 8 : 0);
+  static const EdgeInsetsGeometry counterMargin = EdgeInsetsDirectional.only(top: PlatformInfo.isWeb ? 8 : 0, start: 8);
 
   static const TextStyle labelTextStyle = TextStyle(
     color: Colors.black,

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

@@ -196,6 +196,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                                   isLatestEmail: isLatestEmail,
                                   isCollapsed: _isCollapse,
                                   isLatestTagFocused: _lastTagFocused,
+                                  maxWidth: constraints.maxWidth,
                                   onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, stateSetter),
                                   onShowFullAction: widget.onShowFullListEmailAddressAction,
                                 );
@@ -270,6 +271,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                               isLatestEmail: isLatestEmail,
                               isCollapsed: _isCollapse,
                               isLatestTagFocused: _lastTagFocused,
+                              maxWidth: constraints.maxWidth,
                               onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, stateSetter),
                               onShowFullAction: widget.onShowFullListEmailAddressAction,
                             );

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

@@ -22,6 +22,7 @@ class RecipientTagItemWidget extends StatelessWidget {
   final bool isCollapsed;
   final bool isLatestTagFocused;
   final bool isLatestEmail;
+  final double? maxWidth;
   final PrefixEmailAddress prefix;
   final EmailAddress currentEmailAddress;
   final List<EmailAddress> currentListEmailAddress;
@@ -42,113 +43,118 @@ class RecipientTagItemWidget extends StatelessWidget {
     this.isLatestEmail = false,
     this.onShowFullAction,
     this.onDeleteTagAction,
+    this.maxWidth,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
+    return Container(
-      alignment: AlignmentDirectional.centerEnd,
+      constraints: BoxConstraints(maxWidth: maxWidth ?? double.infinity),
-      children: [
+      child: Row(
-        if (PlatformInfo.isWeb)
+        mainAxisSize: MainAxisSize.min,
-          Padding(
+        children: [
-            padding: EdgeInsetsDirectional.only(
+          if (PlatformInfo.isWeb)
-              top: 8,
+            Flexible(
-              end: isCollapsed ? 40 : 0),
+              child: Padding(
-            child: InkWell(
+                padding: const EdgeInsetsDirectional.only(top: 8),
-              onTap: () => isCollapsed
+                child: InkWell(
-                ? onShowFullAction?.call(prefix)
+                  onTap: () => isCollapsed
-                : null,
+                    ? onShowFullAction?.call(prefix)
-              child: Draggable<DraggableEmailAddress>(
+                    : null,
-                data: DraggableEmailAddress(emailAddress: currentEmailAddress, prefix: prefix),
+                  child: Draggable<DraggableEmailAddress>(
-                feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
+                    data: DraggableEmailAddress(emailAddress: currentEmailAddress, prefix: prefix),
-                childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
+                    feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
-                child: MouseRegion(
+                    childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress),
-                  cursor: SystemMouseCursors.grab,
+                    child: MouseRegion(
-                  child: Chip(
+                      cursor: SystemMouseCursors.grab,
-                    labelPadding: EdgeInsetsDirectional.symmetric(
+                      child: Chip(
-                      horizontal: 4,
+                        labelPadding: EdgeInsetsDirectional.symmetric(
-                      vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
+                          horizontal: 4,
+                          vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
+                        ),
+                        label: Text(
+                          currentEmailAddress.asString(),
+                          maxLines: 1,
+                          overflow: CommonTextStyle.defaultTextOverFlow,
+                          softWrap: CommonTextStyle.defaultSoftWrap,
+                        ),
+                        deleteIcon: SvgPicture.asset(_imagePaths.icClose, fit: BoxFit.fill),
+                        labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
+                        backgroundColor: _getTagBackgroundColor(),
+                        shape: RoundedRectangleBorder(
+                          borderRadius: const BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
+                          side: _getTagBorderSide(),
+                        ),
+                        avatar: currentEmailAddress.displayName.isNotEmpty
+                          ? GradientCircleAvatarIcon(
+                              colors: currentEmailAddress.avatarColors,
+                              label: currentEmailAddress.displayName.firstLetterToUpperCase,
+                              labelFontSize: RecipientTagItemWidgetStyle.avatarLabelFontSize,
+                              iconSize: RecipientTagItemWidgetStyle.avatarIconSize,
+                            )
+                          : null,
+                        onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
+                      ),
                     ),
-                    label: Text(
+                  )
-                      currentEmailAddress.asString(),
-                      maxLines: 1,
-                      overflow: CommonTextStyle.defaultTextOverFlow,
-                      softWrap: CommonTextStyle.defaultSoftWrap,
-                    ),
-                    deleteIcon: SvgPicture.asset(_imagePaths.icClose, fit: BoxFit.fill),
-                    labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
-                    backgroundColor: _getTagBackgroundColor(),
-                    shape: RoundedRectangleBorder(
-                      borderRadius: const BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
-                      side: _getTagBorderSide(),
-                    ),
-                    avatar: currentEmailAddress.displayName.isNotEmpty
-                      ? GradientCircleAvatarIcon(
-                          colors: currentEmailAddress.avatarColors,
-                          label: currentEmailAddress.displayName.firstLetterToUpperCase,
-                          labelFontSize: RecipientTagItemWidgetStyle.avatarLabelFontSize,
-                          iconSize: RecipientTagItemWidgetStyle.avatarIconSize,
-                        )
-                      : null,
-                    onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
-                  ),
                 ),
-              )
+              ),
-            ),
+            )
-          )
+          else
-        else
+            Flexible(
-          Padding(
+              child: InkWell(
-            padding: EdgeInsetsDirectional.only(end: isCollapsed ? 40 : 0),
+                onTap: () => isCollapsed
-            child: InkWell(
+                  ? onShowFullAction?.call(prefix)
-              onTap: () => isCollapsed
-                ? onShowFullAction?.call(prefix)
-                : null,
-              child: Chip(
-                labelPadding: EdgeInsetsDirectional.symmetric(
-                  horizontal: 4,
-                  vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
-                ),
-                label: Text(
-                  currentEmailAddress.asString(),
-                  maxLines: 1,
-                  overflow: CommonTextStyle.defaultTextOverFlow,
-                  softWrap: CommonTextStyle.defaultSoftWrap,
-                ),
-                deleteIcon: SvgPicture.asset(_imagePaths.icClose, fit: BoxFit.fill),
-                labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
-                backgroundColor: _getTagBackgroundColor(),
-                shape: RoundedRectangleBorder(
-                  borderRadius: const BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
-                  side: _getTagBorderSide(),
-                ),
-                avatar: currentEmailAddress.displayName.isNotEmpty
-                  ? GradientCircleAvatarIcon(
-                      colors: currentEmailAddress.avatarColors,
-                      label: currentEmailAddress.displayName.firstLetterToUpperCase,
-                      labelFontSize: RecipientTagItemWidgetStyle.avatarLabelFontSize,
-                      iconSize: RecipientTagItemWidgetStyle.avatarIconSize,
-                    )
                   : null,
-                onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
+                child: Chip(
-              )
+                  labelPadding: EdgeInsetsDirectional.symmetric(
+                    horizontal: 4,
+                    vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
+                  ),
+                  label: Text(
+                    currentEmailAddress.asString(),
+                    maxLines: 1,
+                    overflow: CommonTextStyle.defaultTextOverFlow,
+                    softWrap: CommonTextStyle.defaultSoftWrap,
+                  ),
+                  deleteIcon: SvgPicture.asset(_imagePaths.icClose, fit: BoxFit.fill),
+                  labelStyle: RecipientTagItemWidgetStyle.labelTextStyle,
+                  backgroundColor: _getTagBackgroundColor(),
+                  shape: RoundedRectangleBorder(
+                    borderRadius: const BorderRadius.all(Radius.circular(RecipientTagItemWidgetStyle.radius)),
+                    side: _getTagBorderSide(),
+                  ),
+                  avatar: currentEmailAddress.displayName.isNotEmpty
+                    ? GradientCircleAvatarIcon(
+                        colors: currentEmailAddress.avatarColors,
+                        label: currentEmailAddress.displayName.firstLetterToUpperCase,
+                        labelFontSize: RecipientTagItemWidgetStyle.avatarLabelFontSize,
+                        iconSize: RecipientTagItemWidgetStyle.avatarIconSize,
+                      )
+                    : null,
+                  onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
+                )
+              ),
             ),
-          ),
+          if (isCollapsed)
-        if (isCollapsed)
+            TMailButtonWidget.fromText(
-          TMailButtonWidget.fromText(
+              margin: RecipientTagItemWidgetStyle.counterMargin,
-            margin: RecipientTagItemWidgetStyle.counterMargin,
+              text: '+$countRecipients',
-            text: '+${currentListEmailAddress.length - collapsedListEmailAddress.length}',
+              onTapActionCallback: () => onShowFullAction?.call(prefix),
-            onTapActionCallback: () => onShowFullAction?.call(prefix),
+              borderRadius: RecipientTagItemWidgetStyle.radius,
-            borderRadius: RecipientTagItemWidgetStyle.radius,
+              textStyle: RecipientTagItemWidgetStyle.labelTextStyle,
-            textStyle: RecipientTagItemWidgetStyle.labelTextStyle,
+              padding: PlatformInfo.isWeb
-            padding: PlatformInfo.isWeb
+                ? RecipientTagItemWidgetStyle.counterPadding
-              ? RecipientTagItemWidgetStyle.counterPadding
+                : RecipientTagItemWidgetStyle.mobileCounterPadding,
-              : RecipientTagItemWidgetStyle.mobileCounterPadding,
+              backgroundColor: AppColor.colorEmailAddressTag,
-            backgroundColor: AppColor.colorEmailAddressTag,
+            )
-          )
+        ]
-      ]
+      ),
     );
   }
 
+  int get countRecipients => currentListEmailAddress.length - collapsedListEmailAddress.length;
+
   Color _getTagBackgroundColor() {
     if (isLatestTagFocused && isLatestEmail) {
       return AppColor.colorItemRecipientSelected;

pubspec.lock

@@ -1552,8 +1552,8 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "bugfix/fix-suggestion-displayed-on-top-when-having-many-tags"
+      ref: master
-      resolved-ref: d8711a759932297fc411e9e2993d05d3533b14de
+      resolved-ref: "796d679e3aaf34d0107819d1f12bb3cf45a59d64"
       url: "https://github.com/dab246/super_tag_editor.git"
     source: git
     version: "0.2.0"

pubspec.yaml

@@ -84,7 +84,7 @@ dependencies:
   super_tag_editor:
     git:
       url: https://github.com/dab246/super_tag_editor.git
-      ref: bugfix/fix-suggestion-displayed-on-top-when-having-many-tags
+      ref: master
 
   ### Dependencies from pub.dev ###
   cupertino_icons: 1.0.5