Page MenuHomePhabricator

jquery.ui.button: Color classes only implemented in jquery.ui vector theme
Open, LowPublic

Description

static-1.20wmf5/resources/jquery.ui/themes/vector/jquery.ui.button.css

There is not color-highlighting of buttons in Monobook-skin. Features should be consistent between different skins.

Sample:


Version: 1.21.x
Severity: minor

Details

Reference
bz37744

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 12:23 AM
bzimport added a project: MediaWiki-Interface.
bzimport set Reference to bz37744.
bzimport added a subscriber: Unknown Object (MLST).
Rillke created this task.Jun 20 2012, 3:26 PM

The Vector theme for jQuery UI changes the color from light grey to dark grey on hover for normal buttons. And from blue to darker blue in .ui-button-blue definition.

The Default jQuery UI theme (there is no "Monobook-skin button" there is jQuery UI default's theme from upstream and a custom theme for Vector) does the same, except that it has no ".ui-button-blue" declaration.

The default jQuery UI theme (used in all skins other than Vector) also change the color from light grey to dark grey on hover for normal buttons.

See also http://jqueryui.com/button/

What is the bug?

(In reply to comment #1)
First changing the title of this bug to something different and then asking what the bug is, is inacceptable behaviour.

It was *not* about hovering. It was about the blue color of the button in vector and that this color is not present in other skins.

When you e.g. design JS-applications using vector by default and make a green OK-button and a red cancel-button or similar, as a usability improvement, you are surprised when testing with other skins that there's no such "colour-highlighting". If I would have meant hovering, I would have written so or used the term "onmouseover".

(In reply to comment #2)

(In reply to comment #1)
First changing the title of this bug to something different and then asking
what the bug

Hold your horses. All I did is:

  1. Correct a typo ("query" -> jquery)
  2. Removed incorrect statement ("jquery.ui.button not implemented in monobook"), because it is implemented for a long time and is working fine.
  3. Replaced #2 with an actual problem based on your post ("no highlighting"). I assumed that by color-highlighting you meant highlighting where the color becomes lighter when you hover it. I understand you meant the custom color classes instead (which isn't called "highlighting").

Fixed the title, again.

Now, as for these color classes. The reason they are not in other skins is because they are not standard jQuery UI classes. So jQuery UI themes (including the Default, Sunny, Redmond, Smoothness theme etc.) don't define this class.

Trevor invented it back in 2011 and added[1] it as a hack in the jquery.ui/vector theme directory. We need to either:

  • get it standardised (long term)
  • fork default, add the hack, and apply it to all other skins (short term)

[1] https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/core.git;a=commitdiff;h=7771f2d25e0ff59518130bab4da042154dc908d8

I feel like replacing the default with rectangles. (Taking bug for reals now.)

Isarra added a comment.Feb 8 2014, 6:03 AM

Apparently I'm not reliable, nevermind. >.<

Rainier, given that Vector is moving towards using these styles: http://tools.wmflabs.org/styleguide/desktop/section-2.html

Should Monobook (and other skins) match that?
or should they use the old/previous jquery.ui.button look?
or should they stick with their current look?

(Sidenote: More details at [[mw:UX standardization]] )

(In reply to Quiddity from comment #6)

Should Monobook (and other skins) match that?

The important thing is that the intentions developers usually had using colors are reflected in all skins. Whether it is the use of colors in these skins or the use of thicker borders, font or any other style - if it fits better into this skin - doesn't matter a lot.

I however can imagine that .ui-button-green and friends have been used not only to signal one discrete intention/meaning. Therefore the easiest option I could imagine would be going with your suggestion #1 - match the .mw-ui* styles.

Krinkle removed a subscriber: Krinkle.Jul 23 2016, 12:41 AM
Jdlrobson added subscribers: Krinkle, Jdlrobson.

@matmarex @Krinkle is this one from 2012 still relevant? I thought we nuked jquery.ui.
I think this should be declined right?

Rillke added a comment.Aug 2 2019, 9:27 AM

I thought we nuked jquery.ui.

The migration cost for existing scripts to OOUI or native HTML are quite high. I wish it would be easier.

jQuery UI is still in use, for example in the Wikibase "Add links" inteface: