Set padding for email address tag in input field

Signed-off-by: dab246 <tdvu@linagora.com>
2025-07-11 10:43:32 +07:00
parent 58a8d93ed3
commit 3457601d14
8 changed files with 166 additions and 105 deletions
@@ -130,18 +130,10 @@ class _DefaultAutocompleteInputFieldWidgetState
            color: AppColor.m3Tertiary,
          ),
          isDense: true,
-          contentPadding: _currentListEmailAddress.isNotEmpty
-              ? const EdgeInsetsDirectional.symmetric(vertical: 14)
-              : const EdgeInsetsDirectional.only(
-                  top: 14,
-                  bottom: 14,
-                  start: 12,
-                  end: 8,
-                ),
+          contentPadding: _getTextFieldContentPadding(),
        ),
-        padding: _currentListEmailAddress.isNotEmpty
-            ? const EdgeInsets.symmetric(horizontal: 12)
-            : EdgeInsets.zero,
+        padding: _getTagEditorPadding(),
+        tagSpacing: PlatformInfo.isWeb ? 4.0 : 8.0,
        borderRadius: 10,
        borderSize: 1,
        focusedBorderColor: AppColor.primaryColor,
@@ -434,4 +426,40 @@ class _DefaultAutocompleteInputFieldWidgetState
      setState(onAction);
    }
  }
+
+  EdgeInsetsGeometry? _getTextFieldContentPadding() {
+    if (_currentListEmailAddress.isNotEmpty) {
+      if (PlatformInfo.isWeb) {
+        return const EdgeInsetsDirectional.symmetric(
+          vertical: 14,
+          horizontal: 4,
+        );
+      } else {
+        return const EdgeInsetsDirectional.symmetric(vertical: 12);
+      }
+    } else {
+      if (PlatformInfo.isWeb) {
+        return const EdgeInsetsDirectional.only(
+          top: 14,
+          bottom: 14,
+          start: 12,
+          end: 8,
+        );
+      } else {
+        return const EdgeInsetsDirectional.all(12);
+      }
+    }
+  }
+
+  EdgeInsets? _getTagEditorPadding() {
+    if (_currentListEmailAddress.isNotEmpty) {
+      if (PlatformInfo.isWeb) {
+        return const EdgeInsets.symmetric(horizontal: 12);
+      } else {
+        return const EdgeInsets.only(left: 12, right: 12, bottom: 9);
+      }
+    } else {
+      return null;
+    }
+  }
 }
@@ -1,7 +1,7 @@
 import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/utils/style_utils.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';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
@@ -42,78 +42,102 @@ class DefaultAutocompleteTagItemWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return Stack(
-      alignment: AlignmentDirectional.centerEnd,
-      children: [
-        Padding(
-          padding: EdgeInsetsDirectional.only(
-            top: AutoCompleteTagItemWebStyle.paddingTop,
-            end: isCollapsed ? AutoCompleteTagItemWebStyle.paddingEnd : 0,
-          ),
-          child: Draggable<DraggableEmailAddress>(
-            data: DraggableEmailAddress(
-              emailAddress: currentEmailAddress,
-              filterField: field,
-            ),
-            feedback: DraggableRecipientTagWidget(
-              emailAddress: currentEmailAddress,
-              padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
-            ),
-            childWhenDragging: DraggableRecipientTagWidget(
-              emailAddress: currentEmailAddress,
-              padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
-            ),
-            child: TextFieldTapRegion(
-              child: InkWell(
-                onTap: () => isCollapsed
-                  ? onShowFullAction?.call(field)
-                  : null,
-                child: MouseRegion(
-                  cursor: SystemMouseCursors.grab,
-                  child: Chip(
-                    labelPadding: EdgeInsetsDirectional.symmetric(
-                      horizontal: AutoCompleteTagItemWebStyle.labelPaddingHorizontal,
-                      vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2
-                    ),
-                    label: Text(
-                      currentEmailAddress.asString(),
-                      maxLines: 1,
-                      overflow: CommonTextStyle.defaultTextOverFlow,
-                      softWrap: CommonTextStyle.defaultSoftWrap,
-                    ),
-                    deleteIcon: SvgPicture.asset(
-                      iconClose,
-                      fit: BoxFit.fill,
-                    ),
-                    padding: EdgeInsets.zero,
-                    labelStyle: AutoCompleteTagItemWebStyle.labelTextStyle,
-                    backgroundColor: _getTagBackgroundColor(),
-                    shape: RoundedRectangleBorder(
-                      borderRadius: AutoCompleteTagItemWebStyle.shapeBorderRadius,
-                      side: _getTagBorderSide(),
-                    ),
-                    avatar: currentEmailAddress.emailAddress.isNotEmpty
-                      ? AvatarTagItemWidget(tagName: currentEmailAddress.emailAddress)
-                      : null,
-                    onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
-                  ),
-                ),
-              ),
+    Widget bodyWidget = Chip(
+      labelPadding: EdgeInsetsDirectional.symmetric(
+        horizontal: AutoCompleteTagItemWebStyle.labelPaddingHorizontal,
+        vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2,
+      ),
+      label: Text(
+        currentEmailAddress.asString(),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+        style: AutoCompleteTagItemWebStyle.labelTextStyle,
+      ),
+      deleteIcon: SvgPicture.asset(iconClose, fit: BoxFit.fill),
+      padding: EdgeInsets.zero,
+      labelStyle: AutoCompleteTagItemWebStyle.labelTextStyle,
+      backgroundColor: _getTagBackgroundColor(),
+      shape: RoundedRectangleBorder(
+        borderRadius: AutoCompleteTagItemWebStyle.shapeBorderRadius,
+        side: _getTagBorderSide(),
+      ),
+      avatar: currentEmailAddress.emailAddress.isNotEmpty
+          ? AvatarTagItemWidget(tagName: currentEmailAddress.emailAddress)
+          : null,
+      onDeleted: () => onDeleteTagAction?.call(currentEmailAddress),
+    );
+
+    if (PlatformInfo.isWeb) {
+      bodyWidget = Draggable<DraggableEmailAddress>(
+        data: DraggableEmailAddress(
+          emailAddress: currentEmailAddress,
+          filterField: field,
+        ),
+        feedback: DraggableRecipientTagWidget(
+          emailAddress: currentEmailAddress,
+          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+        ),
+        childWhenDragging: DraggableRecipientTagWidget(
+          emailAddress: currentEmailAddress,
+          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+        ),
+        child: TextFieldTapRegion(
+          child: InkWell(
+            onTap: () => isCollapsed ? onShowFullAction?.call(field) : null,
+            child: MouseRegion(
+              cursor: SystemMouseCursors.grab,
+              child: bodyWidget,
            ),
          ),
        ),
-        if (isCollapsed)
-          TMailButtonWidget.fromText(
-            margin: AutoCompleteTagItemWebStyle.marginCollapsed,
-            text: '+${currentListEmailAddress.length - collapsedListEmailAddress.length}',
-            onTapActionCallback: () => onShowFullAction?.call(field),
-            borderRadius: 10,
-            textStyle: AutoCompleteTagItemWebStyle.collapsedTextStyle,
-            padding: AutoCompleteTagItemWebStyle.collapsedPadding,
-            backgroundColor: AutoCompleteTagItemWebStyle.collapsedBackgroundColor,
-          )
-      ],
-    );
+      );
+    } else {
+      bodyWidget = TextFieldTapRegion(
+        child: InkWell(
+          onTap: () => isCollapsed ? onShowFullAction?.call(field) : null,
+          child: bodyWidget,
+        ),
+      );
+    }
+
+    final listChildrenWidget = [
+      if (isCollapsed)
+        Flexible(child: bodyWidget)
+      else
+        bodyWidget,
+      if (isCollapsed)
+        TMailButtonWidget.fromText(
+          margin: const EdgeInsetsDirectional.only(start: 8),
+          text: '+${currentListEmailAddress.length - collapsedListEmailAddress.length}',
+          onTapActionCallback: () => onShowFullAction?.call(field),
+          borderRadius: 10,
+          alignment: Alignment.center,
+          textStyle: AutoCompleteTagItemWebStyle.collapsedTextStyle,
+          padding: PlatformInfo.isWeb
+            ? const EdgeInsetsDirectional.symmetric(vertical: 4, horizontal: 8)
+            : const EdgeInsetsDirectional.symmetric(vertical: 6, horizontal: 10),
+          backgroundColor: AutoCompleteTagItemWebStyle.collapsedBackgroundColor,
+        )
+    ];
+
+    Widget tagWidget;
+    if (listChildrenWidget.length == 1) {
+      tagWidget = listChildrenWidget.first;
+    } else {
+      tagWidget = Row(
+        mainAxisSize: MainAxisSize.min,
+        children: listChildrenWidget,
+      );
+    }
+
+    if (PlatformInfo.isWeb) {
+      return Padding(
+        padding: const EdgeInsetsDirectional.only(top: 3),
+        child: tagWidget,
+      );
+    } else {
+      return tagWidget;
+    }
  }

  Color _getTagBackgroundColor() {