From 39bca48671f4795a6755545b9c7e6687057546ed Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 31 Oct 2023 19:48:26 +0700 Subject: [PATCH] TF-2259 Fix padding and overflow text in recipients composer Signed-off-by: dab246 Signed-off-by: dab246 (cherry picked from commit b1301f72e2a4377d5f3500b6f1ea2c6a8bc7c304) --- .../recipient_tag_item_widget_style.dart | 2 +- .../widgets/recipient_composer_widget.dart | 2 + .../widgets/recipient_tag_item_widget.dart | 198 +++++++++--------- pubspec.lock | 4 +- pubspec.yaml | 2 +- 5 files changed, 108 insertions(+), 100 deletions(-) diff --git a/lib/features/composer/presentation/styles/recipient_tag_item_widget_style.dart b/lib/features/composer/presentation/styles/recipient_tag_item_widget_style.dart index 1585ada19..d068a931d 100644 --- a/lib/features/composer/presentation/styles/recipient_tag_item_widget_style.dart +++ b/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, diff --git a/lib/features/composer/presentation/widgets/recipient_composer_widget.dart b/lib/features/composer/presentation/widgets/recipient_composer_widget.dart index 110dd3ac8..473e20f98 100644 --- a/lib/features/composer/presentation/widgets/recipient_composer_widget.dart +++ b/lib/features/composer/presentation/widgets/recipient_composer_widget.dart @@ -196,6 +196,7 @@ class _RecipientComposerWidgetState extends State { 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 { isLatestEmail: isLatestEmail, isCollapsed: _isCollapse, isLatestTagFocused: _lastTagFocused, + maxWidth: constraints.maxWidth, onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, stateSetter), onShowFullAction: widget.onShowFullListEmailAddressAction, ); diff --git a/lib/features/composer/presentation/widgets/recipient_tag_item_widget.dart b/lib/features/composer/presentation/widgets/recipient_tag_item_widget.dart index 5734c96a1..e634e4bd3 100644 --- a/lib/features/composer/presentation/widgets/recipient_tag_item_widget.dart +++ b/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 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( - alignment: AlignmentDirectional.centerEnd, - children: [ - if (PlatformInfo.isWeb) - Padding( - padding: EdgeInsetsDirectional.only( - top: 8, - end: isCollapsed ? 40 : 0), - child: InkWell( - onTap: () => isCollapsed - ? onShowFullAction?.call(prefix) - : null, - child: Draggable( - data: DraggableEmailAddress(emailAddress: currentEmailAddress, prefix: prefix), - feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress), - childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress), - child: MouseRegion( - cursor: SystemMouseCursors.grab, - child: Chip( - labelPadding: EdgeInsetsDirectional.symmetric( - horizontal: 4, - vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2 + return Container( + constraints: BoxConstraints(maxWidth: maxWidth ?? double.infinity), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (PlatformInfo.isWeb) + Flexible( + child: Padding( + padding: const EdgeInsetsDirectional.only(top: 8), + child: InkWell( + onTap: () => isCollapsed + ? onShowFullAction?.call(prefix) + : null, + child: Draggable( + data: DraggableEmailAddress(emailAddress: currentEmailAddress, prefix: prefix), + feedback: DraggableRecipientTagWidget(emailAddress: currentEmailAddress), + childWhenDragging: DraggableRecipientTagWidget(emailAddress: currentEmailAddress), + child: MouseRegion( + cursor: SystemMouseCursors.grab, + 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), + ), ), - 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 - Padding( - padding: EdgeInsetsDirectional.only(end: isCollapsed ? 40 : 0), - child: InkWell( - 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, - ) + ), + ) + else + Flexible( + child: InkWell( + onTap: () => isCollapsed + ? onShowFullAction?.call(prefix) : 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) - TMailButtonWidget.fromText( - margin: RecipientTagItemWidgetStyle.counterMargin, - text: '+${currentListEmailAddress.length - collapsedListEmailAddress.length}', - onTapActionCallback: () => onShowFullAction?.call(prefix), - borderRadius: RecipientTagItemWidgetStyle.radius, - textStyle: RecipientTagItemWidgetStyle.labelTextStyle, - padding: PlatformInfo.isWeb - ? RecipientTagItemWidgetStyle.counterPadding - : RecipientTagItemWidgetStyle.mobileCounterPadding, - backgroundColor: AppColor.colorEmailAddressTag, - ) - ] + if (isCollapsed) + TMailButtonWidget.fromText( + margin: RecipientTagItemWidgetStyle.counterMargin, + text: '+$countRecipients', + onTapActionCallback: () => onShowFullAction?.call(prefix), + borderRadius: RecipientTagItemWidgetStyle.radius, + textStyle: RecipientTagItemWidgetStyle.labelTextStyle, + padding: PlatformInfo.isWeb + ? RecipientTagItemWidgetStyle.counterPadding + : RecipientTagItemWidgetStyle.mobileCounterPadding, + backgroundColor: AppColor.colorEmailAddressTag, + ) + ] + ), ); } + int get countRecipients => currentListEmailAddress.length - collapsedListEmailAddress.length; + Color _getTagBackgroundColor() { if (isLatestTagFocused && isLatestEmail) { return AppColor.colorItemRecipientSelected; diff --git a/pubspec.lock b/pubspec.lock index 2c1b4b3f7..6705e217b 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -1552,8 +1552,8 @@ packages: dependency: "direct main" description: path: "." - ref: "bugfix/fix-suggestion-displayed-on-top-when-having-many-tags" - resolved-ref: d8711a759932297fc411e9e2993d05d3533b14de + ref: master + resolved-ref: "796d679e3aaf34d0107819d1f12bb3cf45a59d64" url: "https://github.com/dab246/super_tag_editor.git" source: git version: "0.2.0" diff --git a/pubspec.yaml b/pubspec.yaml index bad466acf..346277816 100644 --- a/pubspec.yaml +++ b/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