Add notification UI #449

2024-02-13T04:10:38+08:00

JoshAntBrown commented

2024-02-13 04:10:38 +08:00

(Migrated from github.com)

Resolves #447
/claim #447

This approach uses a simple stimulus controller to remove the element after the animation has completed.

Notifications can be generated by simply rendering a notification helper anywhere within the application, this could be in a view, as a turbo stream response, or over a turbo stream subscription. By default Rails flash messages types are mapped to notification types, icons for additional types can easily be added in future.

It supports multiple notifications at once, by stacking them in a notification-tray element.

The video below demonstrates the default flash messages in action, and then I update the code to force some hardcoded notifications where the type is passed as error or success.

https://github.com/maybe-finance/maybe/assets/1793797/a17f7e7f-e647-4250-b64e-bb3964cdda81

The circle is animated with CSS also using an SVG animation stroke fill animation technique (https://css-tricks.com/svg-line-animation-works/)

Resolves #447 /claim #447 This approach uses a simple stimulus controller to remove the element after the animation has completed. Notifications can be generated by simply rendering a notification helper anywhere within the application, this could be in a view, as a turbo stream response, or over a turbo stream subscription. By default Rails flash messages types are mapped to notification types, icons for additional types can easily be added in future. It supports multiple notifications at once, by stacking them in a notification-tray element. The video below demonstrates the default flash messages in action, and then I update the code to force some hardcoded notifications where the type is passed as error or success. https://github.com/maybe-finance/maybe/assets/1793797/a17f7e7f-e647-4250-b64e-bb3964cdda81 The circle is animated with CSS also using an SVG animation stroke fill animation technique (https://css-tricks.com/svg-line-animation-works/)

👍 1 🚀 1

Shpigford commented

2024-02-13 22:56:11 +08:00

(Migrated from github.com)

@JoshAntBrown Overall like your solution. However, it's missing appropriate icons (check/x).

JoshAntBrown commented

2024-02-13 22:58:16 +08:00

(Migrated from github.com)

@Shpigford Ah they should be there! Check and X icons appear later in the video, and are only rendered when notification helper is passed the type as success, or error.

When given a different type, or none at all then the notification renders without a type.

I can make the check a default if prefered?

@Shpigford Ah they should be there! Check and X icons appear later in the video, and are only rendered when notification helper is passed the type as success, or error. When given a different type, or none at all then the notification renders without a type. I can make the check a default if prefered?

Shpigford commented

2024-02-13 23:01:53 +08:00

(Migrated from github.com)

@JoshAntBrown default would be great.

JoshAntBrown commented

2024-02-13 23:09:49 +08:00

(Migrated from github.com)

Done! You'll get a check by default regardless of type now unless you pass type as "alert" or "error".

Shpigford commented

2024-02-13 23:19:06 +08:00

(Migrated from github.com)

Amazing. Works beautifully. Thank you!

JoshAntBrown commented

2024-02-13 23:44:10 +08:00

(Migrated from github.com)

Ah, perfect! Thanks 😄

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: gavin/maybe#449