eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-2259 Fix padding and overflow text in recipients composer

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

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit b1301f72e2a4377d5f3500b6f1ea2c6a8bc7c304)
This commit is contained in:
dab246
2023-10-31 19:48:26 +07:00
committed by Dat Vu
parent c6040437d2
commit 39bca48671
5 changed files with 108 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/composer/presentation/styles/recipient_tag_item_widget_style.dart
+1 -1
View File
@@ -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
+2
View File
@@ -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
+102 -96
View File
@@ -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(
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;
pubspec.lock
+2 -2
View File
@@ -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"
pubspec.yaml
+1 -1
View File
@@ -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