Skip to content

feat(ui): numeric count badge replaces dot indicator - #2963

Draft
karlitschek wants to merge 1 commit into
masterfrom
split/04-count-badge
Draft

karlitschek wants to merge 1 commit into
masterfrom
split/04-count-badge

Conversation

@karlitschek

Copy link
Copy Markdown
Member

The bell icon now shows a numeric badge (capped at "99+") when there are notifications, instead of the previous solid dot. The dot is kept for the warning and pending-permission states. The badge re-keys on every count change so the pop animation re-fires whenever a new notification arrives.

  • IconNotification.vue: count prop with default 0; renders the dot SVG only when warning or pending-permission, the plain bell + badge otherwise
  • NotificationsApp.vue: passes notifications.length as :count
  • styles.scss: badge styling and badge-pop keyframe

The bell icon now shows a numeric badge (capped at "99+") when there
are notifications, instead of the previous solid dot. The dot is kept
for the warning and pending-permission states. The badge re-keys on
every count change so the pop animation re-fires whenever a new
notification arrives.

* IconNotification.vue: count prop with default 0; renders the dot
  SVG only when warning or pending-permission, the plain bell + badge
  otherwise
* NotificationsApp.vue: passes notifications.length as :count
* styles.scss: badge styling and badge-pop keyframe

Signed-off-by: Frank Karlitschek <frank@nextcloud.com>
@nickvergessen

Copy link
Copy Markdown
Member

We don't expose the full number of notifications atm, so this needs more work

@nickvergessen

Copy link
Copy Markdown
Member

Count badge instead of only a red dot

Quick heads up: we're considering adding a performance optimization to NC35 that computes the notification dot on initial render. (instead of fetching all notifications immediately on page load, they will only be fetched when user opens the dropdown)

If the dot -> count change is something we still want to push forward, and its close to being ready for PR, we should keep performance in mind. Happy to help out :)

Originally posted by @pringelmann in #2949 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants