Skip to content

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

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

feat(ui): numeric count badge replaces dot indicator#2963
karlitschek wants to merge 1 commit intomasterfrom
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

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