Skip to content

Commit

Permalink
feat(UX-1073): List Item notification (#172)
Browse files Browse the repository at this point in the history 
feat: updated notification list item to match latest design

feat: added swipe-able actions to notification list item

fix: _getSlidableExtend() now won't return over 1.0
  • Loading branch information
@DE7924
DE7924 authored Sep 5, 2024
1 parent cb37705 commit 057defd
Show file tree
Hide file tree
Showing 3 changed files with 440 additions and 140 deletions.
251 changes: 222 additions & 29 deletions example/lib/pages/components/notification_list_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,230 @@ class NotificationListItemExample extends StatelessWidget {

@override
Widget build(BuildContext context) {
final Image image = Image.network(
"https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg",
);

return ExampleScaffold(
name: name,
child: Column(
children: [
ZetaNotificationListItem(
body: Text(
"New urgent" * 300,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle),
notificationTime: "Just now",
action: ZetaButton.negative(
label: "Remove",
onPressed: () {},
),
),
ZetaNotificationListItem(
body: Text(
"New urgent",
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle),
notificationTime: "Just now",
action: ZetaButton.negative(
label: "Remove",
onPressed: () {},
),
),
].gap(Zeta.of(context).spacing.xl_4),
child: SingleChildScrollView(
child: Column(
children: [
Text(
'ZetaNotificationListItem with avatar',
style: TextStyle(fontWeight: FontWeight.bold),
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.avatar(
avatar: ZetaAvatar.initials(
initials: "JS",
lowerBadge: ZetaAvatarBadge.icon(
color: ZetaColors().surfacePositive,
icon: Icons.check,
),
)),
notificationTime: "Just now",
attachment: Text("Spring-Donation-Drive.pdf"),
showBellIcon: true,
action: ZetaButton.outline(
label: "User Action",
onPressed: () {},
size: ZetaWidgetSize.small,
),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
paleButtonColors: true,
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.avatar(
avatar: ZetaAvatar.initials(
initials: "JS",
lowerBadge: ZetaAvatarBadge.icon(
color: ZetaColors().surfacePositive,
icon: Icons.check,
),
)),
showDivider: true,
notificationTime: "10:32 AM",
showBellIcon: true,
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.avatar(
avatar: ZetaAvatar.initials(
initials: "JS",
lowerBadge: ZetaAvatarBadge.icon(
color: ZetaColors().surfacePositive,
icon: Icons.check,
),
),
),
notificationRead: true,
notificationTime: "03/09/2024",
slidableActions: [
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
],
paleButtonColors: true,
),
const SizedBox(height: 20),
Text(
'ZetaNotificationListItem with image',
style: TextStyle(fontWeight: FontWeight.bold),
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.image(
image: image,
),
notificationTime: "Just now",
showBellIcon: true,
action: ZetaButton.outline(
label: "User Action",
onPressed: () {},
size: ZetaWidgetSize.small,
),
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
paleButtonColors: true,
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.image(
image: image,
),
showDivider: true,
notificationTime: "10:32 AM",
showBellIcon: true,
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.image(
image: image,
),
notificationRead: true,
notificationTime: "03/09/2024",
slidableActions: [
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
],
paleButtonColors: true,
),
const SizedBox(height: 20),
Text(
'ZetaNotificationListItem with icon',
style: TextStyle(fontWeight: FontWeight.bold),
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle),
notificationTime: "Just now",
showBellIcon: true,
action: ZetaButton.outline(
label: "User Action",
onPressed: () {},
size: ZetaWidgetSize.small,
),
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
paleButtonColors: true,
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle),
showDivider: true,
notificationTime: "10:32 AM",
showBellIcon: true,
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
),
ZetaNotificationListItem(
body: Text(
"New urgent message from John Smith that spans multiple lines but line count caps at two",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: 'Urgent Message',
leading: ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle),
notificationRead: true,
notificationTime: "03/09/2024",
slidableActions: [
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
],
paleButtonColors: true,
),
].gap(Zeta.of(context).spacing.xl_4),
),
),
);
}
Expand Down
72 changes: 33 additions & 39 deletions example/widgetbook/pages/components/notification_list_item_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,30 @@ import '../../utils/scaffold.dart';

Widget notificationListItemUseCase(BuildContext context) => WidgetbookScaffold(
builder: (context, _) => Padding(
padding: EdgeInsets.symmetric(horizontal: context.knobs.list(label: "Size", options: [100, 200, 400])),
padding: EdgeInsets.symmetric(
horizontal:
context.knobs.list(label: "Size", options: [100, 200, 400])),
child: ZetaNotificationListItem(
body: context.knobs.boolean(label: "Include Link")
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"New urgent" * 300,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
ZetaButton.text(label: "label")
],
)
: Text(
"New urgent" * 300,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
title: context.knobs.string(label: "Title", initialValue: "Urgent Notification"),
notificationTime: context.knobs.stringOrNull(label: "Notification Time", initialValue: "Just Now"),
notificationRead: context.knobs.boolean(label: "Notification Read", initialValue: false),
body: Text(
"New urgent message " * 300,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
attachment:
context.knobs.boolean(label: "Attachment", initialValue: false)
? Text("Spring-Donation-Drive.pdf")
: null,
title: context.knobs
.string(label: "Title", initialValue: "Urgent Notification"),
notificationTime: context.knobs.stringOrNull(
label: "Notification Time", initialValue: "Just Now"),
notificationRead: context.knobs
.boolean(label: "Notification Read", initialValue: false),
leading: context.knobs.list(
label: 'Badge',
options: [
ZetaNotificationBadge.avatar(avatar: ZetaAvatar.initials(initials: "AO")),
ZetaNotificationBadge.avatar(
avatar: ZetaAvatar.initials(initials: "JS")),
ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle),
ZetaNotificationBadge.image(
image: Image.network(
Expand All @@ -43,23 +41,19 @@ Widget notificationListItemUseCase(BuildContext context) => WidgetbookScaffold(
? "Icon"
: "Image",
),
action: context.knobs.list(
label: "Action Buttons",
options: [
ZetaButton.negative(label: "Remove"),
ZetaButton.positive(label: "Add"),
ZetaButton.outline(label: "Action"),
],
labelBuilder: (value) {
final button = (value as ZetaButton);
return button.label == "Remove"
? "Negative"
: button.label == "Add"
? "Positive"
: "Netutral";
},
),
showDivider: context.knobs.booleanOrNull(label: "Has More"),
action:
context.knobs.boolean(label: "Show action", initialValue: true)
? ZetaButton.outline(
label: "User Action",
onPressed: () {},
size: ZetaWidgetSize.small,
borderType: ZetaWidgetBorder.rounded,
)
: null,
showDivider:
context.knobs.boolean(label: "Show Divider", initialValue: false),
showBellIcon: context.knobs
.boolean(label: "Show Bell Icon", initialValue: true),
),
),
);
Loading

0 comments on commit 057defd

Please sign in to comment.