Page MenuHomePhabricator

ProofreadPage Quality selector needs to be transformed to OOUI
Closed, ResolvedPublic

Description

The ProofreadPage quality "selector" for choosing proofread status looks ugly and out of place if viewed with OOUI activated

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 8 2017, 3:23 PM
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Qse24h closed this task as a duplicate of T164723: New git repository: <repo name>.
Aklapper reopened this task as Open.May 9 2017, 10:19 AM
Tpt added a subscriber: Tpt.May 19 2017, 4:01 PM

Should probably be implemented using OO.ui.RadioInputWidget

Tpt moved this task from Backlog to Top priority on the ProofreadPage board.May 26 2017, 8:54 AM

@amritsreekumar It's maybe a task to add to your GSoC project as it's related to OOui and makes the Page: pages display UI looks quite bad.

Yes, I will try to get this done during the coding phase.

Volker_E triaged this task as Lowest priority.May 27 2017, 11:19 PM
Volker_E renamed this task from ProofreadPage Quality selector looks ugly on OOjs-UI to ProofreadPage Quality selector needs to be transformed to OOjs-UI.May 29 2017, 4:47 PM
Volker_E edited projects, added UI-Standardization; removed OOUI.
Elitre added a subscriber: Elitre.Aug 2 2017, 7:12 AM
Volker_E renamed this task from ProofreadPage Quality selector needs to be transformed to OOjs-UI to ProofreadPage Quality selector needs to be transformed to OOUI.Dec 21 2017, 4:33 PM
Volker_E updated the task description. (Show Details)

Change 406259 had a related patch set uploaded (by WMDE-leszek; owner: Samwilson):
[mediawiki/extensions/ProofreadPage@master] Convert the quality radio buttons to OOUI

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

@Samwilson Thanks for the patch, would you add a screenshot of the new treatment here?

From this:


to this:

The new radio buttons aren't a RadioSelectInputWidget because we don't want each radio to be a FieldLayout (and we need to set title on each, etc.).

While we are here can we make colors align with WikimedaUI color palette? (M82)

Volker_E added a comment.EditedJan 26 2018, 8:13 PM

Thanks @Samwilson – quite some work was accomplished to make the radio inputs a well-rounded from a style guide harmony and, best-practice usability measurements. It seems problematic to change not only a standard, common interface element, but change various of its visual attributes.
One of the changed attributes in the current patch set is the increased selected radio indicator's size. This leads to following issues

  • keyboard focus problems and
  • visual cue identification, see T165645

Another topic is, when you're not providing widget labels, you make the form completely inaccessible for screenreader users.

@Ladsgroup I had the same idea, but this is better tackled in a separate task.

Good points.

How should these radio buttons be displayed then? With their own labels, but all together on one line, or can they be put inline together on one line? And should they go on the next line under the minor edit and watch checkboxes? Do they also need a separate 'page quality' label?

The colours being in the inside of the radios is okay isn't it (I mean, disregarding for now that the colours are wrong; and that can certainly be tackled in a separate issue).

Thanks for the discussion yesterday @Volker_E. Is this sort of towards what we were talking about? I'm not sure where to include the 'page quality' label though. Maybe it doesn't need it? @Tpt what do you think is the best thing?

Tpt added a comment.Jan 28 2018, 12:10 AM

There is definitely a usability problem with the old UI pattern (only radio buttons with a bit of color). Most new contributors do not the the labels because they ave to put their mouse on top of the radios (and it's not a common pattern).

I like your new design but we have to make sure it fits small screens and it seems to me that it's hard to see that the 4/5 options are connected together (they seems like 4 different inputs just like "watch" and "minor"). An other possible design would be to use a ButtonSelectWidget [1] with meaningful icons. But we need to have a fallback that do not requires JavaScript.

[1] https://doc.wikimedia.org/oojs-ui/master/demos/#ButtonSelectWidget

Could we have the radio buttons as default, and then in JS replace them with a ButtonSelectWidget that gets its info from the radios?

Or perhaps a better answer is to make it possible to create a ButtonSelectWidget from PHP? How much work would that be? (I've never played with OOUI in that way.) I guess it'd be a <select> element underneath, but rendered as a set of buttons?

Or, easierly, we could collapse the set of coloured-background radios together, so they form one visual block. Maybe even with a border. (Hm, although I guess that's deviating from OOUI design a fair bit, and getting closer to aping a button group!)

Or perhaps a better answer is to make it possible to create a ButtonSelectWidget from PHP? How much work would that be? (I've never played with OOUI in that way.) I guess it'd be a <select> element underneath, but rendered as a set of buttons?

If I understood your question correctly, it's possible and rather straightforward. See https://www.mediawiki.org/wiki/HTMLForm or Check out the code for move action (it's a little bit complex and you can check some special pages like SpecialListProperties (in Wikibase repo).

Change 420248 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/ProofreadPage@master] Use OOUI radios for page status, and improve appearance

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

Didn't see this bug, but this is what I'd come up with in the above patch:

Change 406259 abandoned by Esanders:
Convert the quality radio buttons to OOUI

Reason:
I800b74209a9c3855b3f3fe81b8f6eacce2d233d9 merged

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

Tpt closed this task as Resolved.Mar 24 2018, 6:08 PM

A change implementing OOui quality selectors have been merged and is going to be deployed next Tuesday.