OOjs UI non-modal windows and dialogs miss default CSS
Open, Needs TriagePublic


I don't know if this is intended, but it seems that when you use the OO.ui.WindowManager with the modal: false setting and e.g. a OO.ui.Dialog there are no default styles for the generated non-modal CSS classes in the oojs-ui-windows-mediawiki.css

So for example there are styles for

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
  background-color: #fff;
  opacity: 0;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  transition: all 250ms;

But there is nothing for
.oo-ui-windowManager > .oo-ui-dialog > .oo-ui-window-frame

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 26 2017, 11:36 AM

Non-modal windows are a weird beast. I can't say if this was a good decision, but it is intentional, due to how non-modal windows were used in VisualEditor. For example, the "Special character" tool in VisualEditor is actually a non-modal window:

Same with "Find and replace":

Looking at the patch on T162147, it seems like you want a "normal" dialog that doesn't block interaction with other things on the page? Out of curiosity, can you upload a screenshot of how it looks?

We did nothing to allow this mostly because right now it's impossible to move or hide the dialog (T51969), so it would still block interaction with whatever it happens to cover. And someone was probably worried that it would confuse mobile users.

WMDE-Fisch added a comment.EditedApr 26 2017, 3:56 PM

Hey @matmarex,
thanks for your comments and the clarification. You're right I need(ed) this in T162147. Because I just wanted to block the interaction with the editor and not with anything else. So I ended up using a non-modal window manager showing the dialog above the editor with some ( probably hacky ) CSS to position it right. See the screenshot below:

( The blur is something I added manually to the editor textarea as you can see in the patch )