F
Filamentβ€’2mo ago
Matthew

Animate Notification Badge \ icon

Anyone know\done something like a pulse animation on the badge or icon for the notifications when there are unread notifications? I can hook into the .fi-topbar-database-notifications-btn class to with animate-pulse, but no idea how to make that conditional on whether unread notifications are > 0
Solution:
It works but Idk if you should use it πŸ˜…
Jump to solution
6 Replies
Matthew
MatthewOPβ€’5w ago
Can't be the only person that has thought about this?
toeknee
toekneeβ€’5w ago
You can just override the notification badge/icon view?
Matthew
MatthewOPβ€’3w ago
Shall look into, thanks. I've had a look, and overriding a view means publishing the views, and is highly discouraged. Have I understood this correctly, or are you meaning sometihng else ?
Dan Mason
Dan Masonβ€’3w ago
Publishing the views is generally oke if you do it for simple parts. I had a mess around with a pure css approach and I produced this monstrosity lol
body:has([wire\:target="markAllNotificationsAsRead"]) .fi-topbar-database-notifications-btn {
@apply animate-pulse;
}
body:has([wire\:target="markAllNotificationsAsRead"]) .fi-topbar-database-notifications-btn {
@apply animate-pulse;
}
Solution
Dan Mason
Dan Masonβ€’3w ago
It works but Idk if you should use it πŸ˜…
Matthew
MatthewOPβ€’3w ago
It works! Can't see it doing much harm, unless it breaks due to a change in the body tag. Thanks very much Dan !

Did you find this page helpful?