Skip to content

Commit

Permalink
TF-2259 Fix padding and overflow text in recipients composer
Browse files Browse the repository at this point in the history 
Signed-off-by: dab246 <[email protected]>

Signed-off-by: dab246 <[email protected]>
  • Loading branch information
@dab246
dab246 committed Nov 3, 2023
1 parent affdd84 commit b1301f7
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 100 deletions.
2 changes: 1 addition & 1 deletion lib/features/composer/presentation/styles/recipient_tag_item_widget_style.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions lib/features/composer/presentation/widgets/recipient_composer_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand Down Expand Up @@ -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,
);
Expand Down
198 changes: 102 additions & 96 deletions lib/features/composer/presentation/widgets/recipient_tag_item_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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<DraggableEmailAddress>(
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<DraggableEmailAddress>(
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;
Expand Down
4 changes: 2 additions & 2 deletions pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit b1301f7

Please sign in to comment.