Page MenuHomePhabricator

[Notifications] Add "Bell" button to navigation bar
Open, MediumPublic

Description

There are two states for the Bell icon - the plain Bell and the Bell with an indicator that indicates there are unread[1] notifications in the center. The bell is only displayed if a user is logged in.

  • Precondition: The Bell button is only displayed if the user is logged in
  • In Explore feed, add left bar button Bell
  • In Settings, only if the user has disabled the Explore feed, add right bar button Bell
  • Add both Bell state images (logic to update the bell image state in separate ticket)

Product/Design Needs:
[1] Should the bell indicator stay on as long as there are unread notifications (not marked as read), or as long as there are unseen notifications (visiting the Notification Center flags as seen)?


Icons
Figma with icons: https://www.figma.com/file/cedgOU5CyOR0UVqtjDOvzE/iOS-Notifications?node-id=905%3A1582

Bell with badgeBell outline with space for indicatorIndicator dotBell outline without indicator
PNG
image.png (45×41 px, 1020 B)
image.png (45×41 px, 840 B)
image.png (45×41 px, 413 B)
image.png (45×41 px, 913 B)
PDF
ColorsPrimary link color + Destructive action colorPrimary link colorDestructive action colorPrimary link color
Related

https://phabricator.wikimedia.org/T288773
https://phabricator.wikimedia.org/T287628

Event Timeline

As discussed in a convo with @JMinor I believe that the indicator should only be shown when there are unread notifications.

Per planning - refresh when this icon is seen (foreground, switch back to explore, etc.). Ok if there's a 30 second timeout.

Per planning - refresh when this icon is seen (foreground, switch back to explore, etc.). Ok if there's a 30 second timeout.

@Tsevener Thanks for dropping this comment during the meeting when I couldn't immediately recall where this work would be best done. I think likely https://phabricator.wikimedia.org/T288694 or https://phabricator.wikimedia.org/T288669 will be a good place to address this particular piece of functionality.