Page MenuHomePhabricator

Add a subtle highlight on notification items on hover (on both panel and page)
Closed, ResolvedPublic

Description

When moving the cursor through the notification list, highlighting the active item could help to communicate which item the user will be acting on. Currently the notification items don't change on hover.

In order to avoid confusion between rea and unread states, a subtle highlighting is proposed:

  • For unread items, hover should set the background color to #FAFAFA
  • For read items, hover should set the background color to #ECECEC

This should be applied to both the notification items in (a) the notification panel and (b) the notification items in the notifications page.

The resulting effect is shown below:

hover-notifications.gif (364×640 px, 599 KB)

Event Timeline

Fun fact: we did in fact have a hover color for read notifications in the past (from #F1F1F1 to #F9F9F9) but that broke during a refactor and nobody noticed.

Change 296533 had a related patch set uploaded (by Catrope):
NotificationItemWidget: Apply hover colors

https://gerrit.wikimedia.org/r/296533

Change 296533 merged by jenkins-bot:
NotificationItemWidget: Apply hover colors

https://gerrit.wikimedia.org/r/296533

Checked the fix in Chrome, FF, and Safari - works according to the specs.