Page MenuHomePhabricator

CX2: Toolbar menu appears underneath column
Closed, ResolvedPublic

Description

At small window sizes, menus from the styling toolbar such as the list menu or the more menu ("...") may expand out of the tools column. Currently they are shown below the contents as illustrated below:

When adjusting the z-index of the elements involved we need to make sure that the publish settings popup still works (and both popups are not shown at the same time):

Details

Related Gerrit Patches:
mediawiki/extensions/ContentTranslation : masterPlace toolbar popups in default overlay

Event Timeline

Esanders created this task.Apr 12 2018, 2:32 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 12 2018, 2:32 PM

I would suggest partially reverting https://gerrit.wikimedia.org/r/#/c/413707/ and making the second toolbar an OOUI toolbar.

I would suggest partially reverting https://gerrit.wikimedia.org/r/#/c/413707/ and making the second toolbar an OOUI toolbar.

By Second toolbar which one you meant? Is it the publish destination as toolbar with two tools(New page, Personal draft) under that?

I'd consider this ticket a duplicate of T191508.

Note that you can't just increase the z-index of the sidebar as it is deliberately underneath the content area so that the publish destination popup works

I'd propose to have both popups not to open at the same time. Closing one popup before opening the other seems a good behaviour for transient elements like these and solves conflicts with the z-order.

Please, let me know if I'm missing something.

Esanders added a comment.EditedApr 25 2018, 8:14 AM

I'd propose to have both popups not to open at the same time. Closing one popup before opening the other seems a good behaviour for transient elements like these and solves conflicts with the z-order.

I don't have both popups open in either of my screenshots, so I'm not sure how that solves the problem.

By Second toolbar which one you meant? Is it the publish destination as toolbar with two tools(New page, Personal draft) under that?

Yeah, the publish destination + publish "toolbar", which is currently just two buttons. It has some visually inconsistencies with the other toolbar.

Esanders added subscribers: Amire80, Capt_Swing, jeblad.

I'd consider this ticket a duplicate of T191508.

Yeah - merging in this direction though as we have more detail and discussion here.

Esanders renamed this task from Toolbar menu appears underneath column to CX2: Toolbar menu appears underneath column.Apr 25 2018, 8:16 AM
Pginer-WMF added a comment.EditedApr 25 2018, 8:24 AM

I'd propose to have both popups not to open at the same time. Closing one popup before opening the other seems a good behaviour for transient elements like these and solves conflicts with the z-order.

I don't have both popups open in either of my screenshots, so I'm not sure how that solves the problem.

Ok. Let me clarify. I was suggesting that you can adjust the z-index for the elements in order (content, toolbar including their popups, publish popup), and have no issues as long as both popups are not shown at the same time. Do you expect any problem with such approach?

I tried to clarify the description and provide some introduction context from the other card that has been merged as duplicate.

Pginer-WMF triaged this task as Low priority.Apr 25 2018, 8:29 AM
Pginer-WMF moved this task from Backlog to Priority backlog on the Language-2018-Apr-June board.
Pginer-WMF updated the task description. (Show Details)Apr 25 2018, 8:32 AM

I was suggesting that you can adjust the z-index for the elements in order (content, toolbar including their popups, publish popup)

Do you mean dynamically change the z-index of the parent container based on whether the popup is open? If so that seems a bit hacky, and may obfuscate other stacking issues later. We should try to avoid dynamically changing z-indexes.

If you just make the second toolbar OOUI again (we already have the code in the reverted patchset), then you should be able to put all the popups in the global overlay layer trivially (thanks to T192505).

Change 429451 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/ContentTranslation@master] Place toolbar popups in default overlay

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

I was suggesting that you can adjust the z-index for the elements in order (content, toolbar including their popups, publish popup)

Do you mean dynamically change the z-index of the parent container based on whether the popup is open? If so that seems a bit hacky, and may obfuscate other stacking issues later. We should try to avoid dynamically changing z-indexes.

No, I was not meaning dynamically. Just making sure that popups z-index is higher than the one for both content and cards.

If you just make the second toolbar OOUI again (we already have the code in the reverted patchset), then you should be able to put all the popups in the global overlay layer trivially (thanks to T192505).

Sounds good. In general it makes sense to align with OOUI, and if it can solve the management of the popups even better. I'd like to check that our decisions here allow to support our future plans for the publish settings panel. I'll add more details in T193255.

Change 429451 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Place toolbar popups in default overlay

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

Arrbee moved this task from In Review to QA on the Language-2018-Apr-June board.May 2 2018, 7:06 AM
Etonkovidova closed this task as Resolved.May 3 2018, 3:55 AM
Etonkovidova added a subscriber: Etonkovidova.

Checked in cx2 - the fix is in place:

Petar.petkovic moved this task from QA to Done on the Language-2018-Apr-June board.May 3 2018, 7:41 AM