Page MenuHomePhabricator

Improve JQuery UI Vector button styles
Closed, ResolvedPublic

Description

The vector jquery.ui buttons are a little odd at present, especially the borders. Munaf has done some work on button styles more recently, so something more along those lines may also be in order so long as it matches the skin(s).

Given the lack of support for coloured buttons in general (Bug 37744), perhaps the new styles should be moved into the common css while we're at it, but that's more an issue with the linked bug than this.


Version: 1.22.0
Severity: enhancement
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=37743

Details

Reference
bz44855

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:17 AM
bzimport set Reference to bz44855.

Created attachment 11764
Screenshot of current and example of possible new button styles

Attached:

buttons.png (200×456 px, 13 KB)

note to self how to reproduce:

Check Special:Preferences, section "editing":

  • "Enable enhanced editing toolbar" enabled
  • "Enable dialogs for inserting links, tables and more" enabled

Also as I understand this bug is about Vector skin only, so one needs
to have Vector to see the buttons.

I generally think that shadows and gradients contribute to poorer contrast, worse readability and in the end lead to usability issues with users that don't have very sharp eyes or something.

To the contrary, I love the suggested styles. They're neat and simple, the gradients are subtle, and it looks like they would work equally well without the shadow (and would be readable without the gradient as well).

The blue on the default button in current style is plain awful, and the outlines of the buttons cause them to "blur" visually. The background gradient of the default button is also pretty aggressive, it looks like a metal pipe.

Shadows and gradients can indeed contribute to poorer contrast and readability and often do, but the same could be said of any use of colour or space. The key is to take care with these things regardless of which particular effects are employed, which I have tried to do here.

Just to mention it: Bug 37743 - jQuery color button classes (ui-button-blue, ...) don't show focus and active state properly

What happens if I put this here?

I6f28ce6c9c3403d8377b4b3aaa7495b01853ee0e

https://gerrit.wikimedia.org/r/54228 (Gerrit Change I6f28ce6c9c3403d8377b4b3aaa7495b01853ee0e) | change APPROVED and MERGED [by Trevor Parscal]

I guess that makes it RESOLVED FIXED.