Page MenuHomePhabricator

Make same components clearer on oojs-ui/master/demos
Closed, ResolvedPublic

Description

Please add more sectioning to the demos so it's clearer which item is which, and what all are variations in use case for the same item, as opposed to just listing everything one after another regardless of relation to each other. Split things up by object - a section for 'simple dialog'. Then split that up by usage examples - the diferent sizes, and the different possibilities of how they will open if something goes wrong or not. And then a new section and header for the process dialog stuff. Etc.

Basically more sectioning on each page would be great. More visual organisation, so it's easier to find specific things and scan it all and tell what's going on when not necessarily familiar with it (or so there's no confusion that the three toolbars are in fact just one toolbar with different usage examples). (Yes, I know, this is mostly just a thing for you lot, but it'd still be great to be able to figure it out myself and make sure I ain't broke something when fiddling, and this would probably still help you add things to it and such, too.) (Also the widgets page is terrifying.)

Event Timeline

The dialogs sectioning has been tackled by @matmarex in rGOJUb90e45f
Not sure how to address the toolbar request as we also have ButtonWidgets with just minimal modifications.

@Isarra Any further clarifications or requests here, otherwise I'd change it to resolved.

Oh, nice, thanks.

Would it be possible to make the headers stand out more? On the widgets page I didn't even realise they were headers marking the beginnings of new sections at first, because there's very little padding around them, and their size and weight are very similar to that of many of the widgets themselves.

But yeah, this task is pretty much addressed. Just... better header styles, please?

@Isarra I can see the current font-size: 1.1em being not great as heading. We're using .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label, so if we see this as problem, I'll propose a change for the general treatment to bump it a bit. Last time that was changed was in T78037: Dialog section labels are way too big compared to the rest of the contents of a dialog (from 1.5em to 1.1.em). But we're now seeing those FieldsetLayoutHeaders in various OOUIfied HTMLForms too, so it makes sense to revisit.

Actually more padding/margin above those might be useful in general for
those, too. Can't really say for sure without looking into more uses
(and whether or not they're usually part of a field, which seems to add
some as well, but they're not always part of one?)...

Change 354369 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] MediaWiki, Apex theme: Increase Fieldset a Layout header's font-size

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

Change 354369 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI, Apex theme: Increase FieldsetLayout header's font-size

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

Change 355555 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [WIP] demos: Indicate widgets clearer by sections

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

Change 355555 merged by jenkins-bot:
[oojs/ui@master] demos: Indicate widgets clearer by sections

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

Volker_E claimed this task.
Volker_E triaged this task as Medium priority.
Volker_E moved this task from Reviewing to OOjs-UI-0.22.0 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.22.0); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.