Skip to content

feat(ui): general notification panel UX polish#2959

Merged
nickvergessen merged 11 commits into
masterfrom
split/01-general-ui
Apr 29, 2026
Merged

feat(ui): general notification panel UX polish#2959
nickvergessen merged 11 commits into
masterfrom
split/01-general-ui

Conversation

@karlitschek
Copy link
Copy Markdown
Member

A bundle of self-contained UI improvements that don't change behavior:

  • Frosted-glass panel with translucent background and subtle open-in animation
  • "New since last open" indicator: items received after the last open get a primary-colored bar on the inline-start edge. Threshold is captured as the panel is opened.
  • Larger, richer icons in a rounded 44px avatar-style container; for mention notifications the user's NcAvatar is shown instead
  • Inbox-zero celebration: animated checkmark + confetti burst when the list transitions from non-empty to empty
  • Fade fix for clipped long messages: switch from an opaque box-shadow to a CSS mask-image gradient so the fade blends correctly against the new translucent panel

@nickvergessen
Copy link
Copy Markdown
Member

@nickvergessen
Copy link
Copy Markdown
Member

Video of fixed "Avatar for chat messages" and fixed confetti/inbox-zero

Bildschirmaufzeichnung.vom.2026-04-28.16-38-40.mp4

Comment thread src/styles/styles.scss Outdated
Comment thread src/Components/NotificationItem.vue Outdated
Comment thread src/styles/styles.scss
Comment thread src/styles/styles.scss
Comment thread src/styles/styles.scss
Comment thread src/Components/NotificationItem.vue Outdated
karlitschek and others added 10 commits April 29, 2026 10:02
A bundle of self-contained UI improvements that don't change behavior:

* Frosted-glass panel with translucent background and subtle open-in
  animation
* "New since last open" indicator: items received after the last open
  get a primary-colored bar on the inline-start edge. Threshold is
  captured as the panel is opened.
* Larger, richer icons in a rounded 44px avatar-style container; for
  mention notifications the user's NcAvatar is shown instead
* Inbox-zero celebration: animated checkmark + confetti burst when
  the list transitions from non-empty to empty
* Fade fix for clipped long messages: switch from an opaque box-shadow
  to a CSS mask-image gradient so the fade blends correctly against
  the new translucent panel

Signed-off-by: Frank Karlitschek <frank@nextcloud.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
…ions

Signed-off-by: Joas Schilling <coding@schilljs.com>
@nickvergessen
Copy link
Copy Markdown
Member

/compile

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
@nickvergessen nickvergessen merged commit 7c4c343 into master Apr 29, 2026
39 checks passed
@nickvergessen nickvergessen deleted the split/01-general-ui branch April 29, 2026 08:13
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.

4 participants