Page MenuHomePhabricator

ContentTranslation: Сontribution's dropdown menu features non-standard layout
Closed, ResolvedPublic


I think we have some problems with this dropdown menu. Black icons, bad shadow and lines between list-items.

contr1.jpg (182×395 px, 51 KB)

Proposed solution (updated of PS 3)

T157217 CX Callout _after Wikipedia 2017-02-21.png (152×424 px, 22 KB)

and with 176px min-width:

T157217 CX Callout _176px Wikipedia 2017-02-21.png (143×378 px, 21 KB)

Event Timeline

@Iniquity It was on my personal list for a while, I've focussed on the Wikimedia Design Style Guide and OOUI in the mean time, but should have some time left to at least bring it close to our defined standards at M101. Thanks for filing it!

Change 336344 had a related patch set uploaded (by VolkerE):
Align CX callout menu to UI Standards

Volker_E renamed this task from Сontribution's dropdown menu to ContentTranslation: Сontribution's dropdown menu features non-standard layout.Feb 7 2017, 12:38 AM
Volker_E updated the task description. (Show Details)

Since ContentTranslation is now geting migrated to OOJS, I guess we should try to do this menu using an OOJS widget so that we dont need UI customization code in CX. OO.ui.PopupWidget may be the correct one to use

@santhosh Yes, if translated directly into OOjs UI, then PopupWidget seems like the closest.

@Pginer-WMF The PopupWidget was originally intended as tooltip solution (with possibility of featuring extended HTML).
I'm not too happy with the current mix of the UX patterns in the personal toolbar.
What sets the contributions menu aside from the notifications and the language menu is, that it becomes visible on :hover, the distance is different to the icons (debatable) and a menu in OOjs UI looks and behaves slightly different (covered in the patch above).

Here the intent is to anticipate the options you will find in the contributions page. The menu is totally optional, since you can still click on the "Contributions" link and get to the page if you want to (or lack hover in your device).

If the proposed changes align it to other cases, I think they are totally fine. The change in font size may also require adjustment in the icon sizes, reducing them a bit.

I'm not too happy with the current mix of the UX patterns in the personal toolbar.

The personal toolbar can benefit from a more general redesign. There have been some proposals in the past, but no change has happened in practice so far.

@Pginer-WMF I understand the difference with “Contributions“ being a link itself in contrast to the icons. I don't think that it's a good pattern in general having those close elements behave differently. But that was side-tracked of me. Let's keep this in mind.

I will update the icons (currently 24px but in contrast to OOjs UI icons they are taking up the full SVG canvas, therefor reducing to 20px background-size and adapt the padding-left and decrease the min-width of the menu slightly…

Actually I should rather ask you, @Pginer-WMF, @santhosh and @KartikMistry first, the min-width of the list items is set to 200px currently, which, especially after the font-size adaption of the menu items looks unbalanced to me (a lot of white-space on the right) in English. Through setting min-width, it also shouldn't have any negative impact decreasing it slightly on other languages with longer strings. My recommendation would be 176px (we'd stay in a 8px/16px scheme).
I'll update the screenshot and would be happy to hear feedback!

This comment was removed by Volker_E.

In another nice improvement, the icons of the menu become part of the clickable area in PS 3.

The adjustments make sense. Thanks @Volker_E !

One possible concern (just based on the screenshot, I have not tried it) is the menu not being aligned with the target area that opens it. This can generate a "dead zone" where the menu gets closed as the user tries to reach it. I illustrated the target area in blue and the "dead zone" in red in the mockup below for more clarity:

menu-dead-zone.png (143×378 px, 19 KB)

I don't oppose the width adjustments for the menu, but I prefer it to be placed in a way that it does not generate the red gap.

@Pginer-WMF Understanding concern! I didn't change the positioning logic, (have just wildly overridden the width in dev tools for presentation purposes, it was already positioned at that point in time), if the menu started from right, it should continue to behave exactly the same. @santhosh might be better to ask here…

It will position correctly if you update the min-width in the less file.

There was an issue when the blue indicator is shown

pasted_file (204×283 px, 16 KB)

Fixed it to look like
pasted_file (161×322 px, 18 KB)

in PS6.

Change 336344 merged by jenkins-bot:
Align CX callout menu to UI Standards