Items in the more actions menu of notifications are inconsistent
Closed, ResolvedPublic

Description

There are several inconsistencies with the items in the action menu that is shown once you click the "..." icon on a notification:

  • Alignment. Icons don't align vertically to each other. The first menu item lack of padding makes it too close to the margins.
  • Color. Icons and labels are shown in different colors.
  • Typography. Each option is shown using a different font weight.

Problems illustrated:

Proposed adjustments:

  • All the areas in color (yellow, orange, green) represent 10px to be applied as padding.
  • The icons (grey boxes) are 15px.
  • Text for the action labels is bold and set to #333.

The final result (removing the highlighted areas from above):

Pginer-WMF updated the task description. (Show Details)
Pginer-WMF raised the priority of this task from to Needs Triage.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptFeb 12 2016, 12:50 PM

@Pginer-WMF: I've adjusted the pixels to ems with the help of mathematical-css-savant @Catrope. The numerical pixels (when inspected in the console) are exactly as you described them for the 10px. However, we have an issue with the icon; the icon svg file actually has whitespace around it, so making it 15px doesn't quite look the way you made it look in your example.

@Catrope and I calculated the actual icon size (without the whitespace added) and believe we came to what can be as close as possible (with mathematically sound proof) to what you intended.

One question that came up, though, is what to do with the hover effect. You wrote that the text should be #333333 -- and according to your screenshot, all menu items have the same initial color. Due to that, I have taken out the hover effect that we have for other buttons (opacity 0.8 before hover / opacity 1 during hover)

Is this the right thing to do? Do you want another hover effect? Right now with this fix, there will not be a hover effect for those actions.

Change 273541 had a related patch set uploaded (by Mooeypoo):
Adjust styling of the 'more actions' menu items

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

One question that came up, though, is what to do with the hover effect. You wrote that the text should be #333333 -- and according to your screenshot, all menu items have the same initial color. Due to that, I have taken out the hover effect that we have for other buttons (opacity 0.8 before hover / opacity 1 during hover)

Is this the right thing to do? Do you want another hover effect? Right now with this fix, there will not be a hover effect for those actions.

I just found this bug T126740: Adjust hover state for actions in the more menu ("...") of notifications that answers the question. I'm attaching it to the same commit.

Thanks for the adjustments @Mooeypoo
with the size specifications (e.g., those on T119374), I'm more interested in proportions (e.g., measure x being the double of measure Y) and consistency (having the same distance around all sides of Z) than the specific units used. So I have no problem on Em units being used or even being an approximation, although we need to make sure for EMs not to get distorted by the containment effects (as illustrated here), but those are implementation details for you to consider.

Regarding hover, as you mentioned, details are in T126740, but let me know if anything else needs clarification.

Change 273541 merged by jenkins-bot:
Adjust styling of the 'more actions' menu items

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

These changes were expected to affect only "items in the more actions menu of notifications".
It seems that the secondary actions that are shown in the notification (outside the menu) were also affected (now there is no hover for them). We need to provide a hover effect for those too. I created a ticket with the details: T128444: Adjust contrast and hover behaviour for the secondary actions displayed directly on notifications

Etonkovidova added a subscriber: Etonkovidova.EditedMar 3 2016, 12:17 AM

Checked in betalabs - seems to be all in place(except hover stuff):

jmatazzoni closed this task as Resolved.Mar 3 2016, 7:13 PM