Page MenuHomePhabricator

Use OOUI icons for the 'big' icons, not just the little ones, in Notifications
Open, LowPublic

Description

Meh.

Related Objects

Event Timeline

Jdforrester-WMF raised the priority of this task from to Low.
Jdforrester-WMF updated the task description. (Show Details)
Jdforrester-WMF added a subscriber: Jdforrester-WMF.
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptJan 19 2016, 1:34 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Which icons are the "big" ones?

$wgEchoNotificationIcons?

Echo nameOOUI name
bell-*bell-*
changes-
chatspeechBubbles
double-check-
edit-user-talk-
emailusermessage
feedback-
generic- (similar to alert)
global-
link-bluelink
mention(-*)-
oo-ui-edit-*edit
revert-
reviewedarticleCheck
speechBubblesspeechBubbles
thanksuserTalk
trashtrash
traytray
user-rights-
user-speech-bubble-

While the icons are missing they should probably be upstreamed

We already have all of the icons in our local emailicons module, so as a first step we can use RLIM to render them (which emails already do). After that we couldd do what Ed said, reuse/upstream icons where it makes sense.

BTW, this made me realize, what's up with the colors? Why are some of these black, some blue, and one green? @Pginer-WMF ?

BTW, this made me realize, what's up with the colors? Why are some of these black, some blue, and one green? @Pginer-WMF ?

Regarding colors I'm not sure if you refer to the way they appear in T123996#2605781 or in the notification panel. Regarding the former, I think Ed added the OOUI icons (represented in black) for those icons already available in OOUI. Regarding the later:

Color is used to help differentiate icons so they are more recognisable at a glance. This is useful in a context such as the notification panel where we want to optimise for quick information scan. In addition, we try to follow a consistent use of color:

  • Blue is for updates. There is new activity for an element that already existed (e.g., new reply on an existing discussion topic).
  • Green is for new information and positive feedback. The creation of a new main information element (e.g., new topic created) and for positive feedback (e.g.,thanks) use green.
  • Grey is for "negative" events. Events such as reverts and deletions are shown in grey. Grey is used instead of red (used for this purpose in other contexts) to make the messaging more constructive: encourage a positive interaction to a revert as oppose to overreacting.

This guidelines are not expected to be applied too strictly since there may be many hard to classify cases, but they help to increase the diversity among the same notification family.

I updated the in-progress design guidelines for notifications with the info above. In addition, the evolution of the color palette has resulted in some icons not using the same shade of blue which we need to update at some point.