Skip to content

Commit

Permalink
fix(WFCNG-18672): The "Delete" and "Reply" option UI is not as per fi…
Browse files Browse the repository at this point in the history 
…gma for Coment (#65)
  • Loading branch information
@KG3497
KG3497 authored Feb 14, 2025
1 parent b07f066 commit 6bbdc29
Showing 1 changed file with 134 additions and 126 deletions.
260 changes: 134 additions & 126 deletions lib/src/components/molecules/comment.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ class ZdsComment extends StatelessWidget {
this.replySemanticLabel,
this.attachmentThumbnail,
this.menuItems,
this.menuPosition = ZdsPopupMenuPosition.bottomRight,
this.onMenuItemSelected,
}) : assert(
onReply != null && replySemanticLabel != null || onReply == null && replySemanticLabel == null,
Expand Down Expand Up @@ -78,6 +79,9 @@ class ZdsComment extends StatelessWidget {
/// If defined, the pouup menu will be shown when the user taps on the comment.
final List<ZdsPopupMenuItem<int>>? menuItems;

/// The popup menu position to display in the popup menu items.
final ZdsPopupMenuPosition menuPosition;

/// The callback to be called when a menu item is selected.
/// Menu items must be given a value for the callback to trigger.
final ValueChanged<int>? onMenuItemSelected;
Expand All @@ -87,143 +91,146 @@ class ZdsComment extends StatelessWidget {
final colors = Zeta.of(context).colors;
final spacing = Zeta.of(context).spacing;

return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (isReply)
Padding(
padding: EdgeInsets.only(
left: spacing.large,
right: spacing.minimum,
top: spacing.minimum,
),
child: const ZetaIcon(
ZetaIcons.reply,
size: 24,
applyTextScaling: true,
return ColoredBox(
color: colors.surfacePrimary,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (isReply)
Padding(
padding: EdgeInsets.only(
left: spacing.large,
right: spacing.minimum,
top: spacing.minimum,
),
child: const ZetaIcon(
ZetaIcons.reply,
size: 24,
applyTextScaling: true,
),
),
),
Expanded(
child: LayoutBuilder(
builder: (context, constraints) {
return ZdsSlidableListTile(
width: constraints.maxWidth,
elevation: 0,
actions: [
if (!isReply && onReply != null && replySemanticLabel != null)
ZdsSlidableAction(
icon: ZetaIcons.reply,
semanticLabel: replySemanticLabel,
foregroundColor: colors.primary,
backgroundColor: colors.surfacePrimarySubtle,
onPressed: (_) => onReply!(),
),
if (onDelete != null && deleteSemanticLabel != null)
ZdsSlidableAction(
icon: ZetaIcons.delete,
semanticLabel: deleteSemanticLabel,
onPressed: (_) => onDelete!(),
backgroundColor: colors.surfaceNegativeSubtle,
foregroundColor: colors.error,
),
],
child: Builder(
builder: (context) {
final child = Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: colors.borderSubtle,
),
),
Expanded(
child: LayoutBuilder(
builder: (context, constraints) {
return ZdsSlidableListTile(
width: constraints.maxWidth,
elevation: 0,
actions: [
if (!isReply && onReply != null && replySemanticLabel != null)
ZdsSlidableAction(
icon: ZetaIcons.reply,
semanticLabel: replySemanticLabel,
foregroundColor: colors.primary,
backgroundColor: colors.surfacePrimarySubtle,
onPressed: (_) => onReply!(),
),
padding: EdgeInsets.symmetric(
vertical: spacing.large,
horizontal: spacing.medium,
if (onDelete != null && deleteSemanticLabel != null)
ZdsSlidableAction(
icon: ZetaIcons.delete,
semanticLabel: deleteSemanticLabel,
onPressed: (_) => onDelete!(),
backgroundColor: colors.surfaceNegativeSubtle,
foregroundColor: colors.error,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: spacing.minimum),
child: Row(
children: [
if (avatar != null)
Padding(
padding: EdgeInsets.only(right: spacing.small),
child: avatar,
),
if (author != null)
Expanded(
child: Text(
author!,
style: ZetaTextStyles.labelLarge.copyWith(
fontWeight: FontWeight.w500,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
if (timeStamp != null)
Padding(
padding: EdgeInsets.only(left: spacing.small),
child: Text(
timeStamp!,
style: ZetaTextStyles.bodyXSmall.copyWith(color: colors.textSubtle),
),
),
],
],
child: Builder(
builder: (context) {
final child = Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: colors.borderSubtle,
),
),
if (comment != null)
),
padding: EdgeInsets.symmetric(
vertical: spacing.large,
horizontal: spacing.medium,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(
top: spacing.small,
left: spacing.minimum,
right: spacing.minimum,
),
child: Text(
comment!,
style: Theme.of(context).textTheme.bodyMedium,
padding: EdgeInsets.symmetric(horizontal: spacing.minimum),
child: Row(
children: [
if (avatar != null)
Padding(
padding: EdgeInsets.only(right: spacing.small),
child: avatar,
),
if (author != null)
Expanded(
child: Text(
author!,
style: ZetaTextStyles.labelLarge.copyWith(
fontWeight: FontWeight.w500,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
if (timeStamp != null)
Padding(
padding: EdgeInsets.only(left: spacing.small),
child: Text(
timeStamp!,
style: ZetaTextStyles.bodyXSmall.copyWith(color: colors.textSubtle),
),
),
],
),
),
if (attachment != null)
Padding(
padding: EdgeInsets.only(top: spacing.medium),
child: _AttachmentRow(
attachment: attachment!,
downloadCallback: downloadCallback,
customThumbnail: attachmentThumbnail,
if (comment != null)
Padding(
padding: EdgeInsets.only(
top: spacing.small,
left: spacing.minimum,
right: spacing.minimum,
),
child: Text(
comment!,
style: Theme.of(context).textTheme.bodyMedium,
),
),
),
],
),
);
if (menuItems != null) {
return ZdsPopupMenu<int>(
menuPosition: ZdsPopupMenuPosition.topRight,
verticalOffset: spacing.small,
items: menuItems ?? [],
onSelected: onMenuItemSelected,
builder: (context, open) {
return Material(
color: colors.surfaceDefault,
child: InkWell(
onTap: open,
child: child,
),
);
},
if (attachment != null)
Padding(
padding: EdgeInsets.only(top: spacing.medium),
child: _AttachmentRow(
attachment: attachment!,
downloadCallback: downloadCallback,
customThumbnail: attachmentThumbnail,
),
),
],
),
);
}
return ColoredBox(color: colors.surfaceDefault, child: child);
},
),
);
},
if (menuItems != null) {
return ZdsPopupMenu<int>(
verticalOffset: spacing.small,
menuPosition: menuPosition,
items: menuItems ?? [],
onSelected: onMenuItemSelected,
builder: (context, open) {
return Material(
color: colors.surfacePrimary,
child: InkWell(
onTap: open,
child: child,
),
);
},
);
}
return ColoredBox(color: colors.surfacePrimary, child: child);
},
),
);
},
),
),
),
],
],
),
);
}

Expand All @@ -241,6 +248,7 @@ class ZdsComment extends StatelessWidget {
..add(ObjectFlagProperty<VoidCallback?>.has('downloadCallback', downloadCallback))
..add(StringProperty('deleteSemanticLabel', deleteSemanticLabel))
..add(StringProperty('replySemanticLabel', replySemanticLabel))
..add(EnumProperty<ZdsPopupMenuPosition>('menuPosition', menuPosition))
..add(ObjectFlagProperty<ValueChanged<int>?>.has('onMenuItemSelected', onMenuItemSelected));
}
}
Expand Down

0 comments on commit 6bbdc29

Please sign in to comment.