tl;dr: Juliusz has improved button styles. Try them all on ee-flow-extra.
Still some issues. One more hack day should do it!
Juliusz and May clarified a lot of stuff and he has a new patch that's
closer.
* The quiet buttons get lighter on mouseover (hover) and darker on click
(active)
* It adds a slight text shadow, other tweaks.
It's all on
http://ee-flow-extra.instance-proxy.wmflabs.org/wiki/Special:UserLogin ,
together with the new living style guide, my button generator, and login
forms using it, and latest Flow for comparison. The links are the same,
repeated at the bottom.
*Still problems:*
* There's still some kind of glitch where on MediaWiki pages the background
color doesn't darken on click.
* An <a href> with mw-ui-button mw-ui-quiet still gets a hyperlink
underline on mouseover and click.
* The living style guide doesn't match what you see in MediaWiki, because
Vector sets #bodyContent to 0.8em (This is why the separate living style
guide doesn't work for desktop!)
*My comments:*
Play with "A row of actions" in the living style guide[2] and the login
form[3] as you read this.
* The text-shadow on colored quiet buttons makes them look fuzzy.
* In MediaWiki pages the form buttons are pretty small, just 12.8px. The
login buttons in Flow are 14px tall.
* We need a class for a right-aligned row of buttons, "mw-ui-button-row" ?
* Buttons need some spacing when in a row. Flow gives its buttons a
margin-left: 8px; , assuming they'll be in a right-aligned row; this could
be applied to buttons that are children of the right-aligned
mw-ui-button-row.
* The new styles implement white text on gray for the disabled colored
(constructive, progressive, destructive) CTA buttons. This has been in the
spec for months, and Flow never implemented it! I think it's confusing and
jarring when you have two disabled buttons next to each other.
* In some thread Jared asked that the input focus indicator look like the
mouseover state. I don't like that, and you can't find the input focus when
it's on a quiet button because their mouseover state is a subtle change.
*Responses to Steven*:
On Mon, Jan 6, 2014 at 2:28 PM, Steven Walling <swalling(a)wikimedia.org>wrote;wrote:
- On login, when using a RTL language like Hebrew or
Arabic, the right
button border is messed up somehow. See
http://ee-flow-extra.instance-proxy.wmflabs.org/wiki/Special:UserLogin?usel…
else see this?
Seems OK now.
- The login form now has a mix of center-aligned and
right-aligned
elements.
Yes in 2014 Agora, buttons are right-aligned and the main CTA is on the
right. (I added this guideline to the living style guide.)
- On login secondary "Join" link is placed
to left hand of the main submit
button. That makes no sense considering I read left-right in English.
Yup, that is an issue with quiet buttons.
Also, it needs to be an actual button, preferably a call to action, not a
plain link. This is probably going to require a bit of
a redesign to
incorporate well.
I think you're right. When should we use color and when should we use quiet
buttons? In Flow when you type something into a reply box, you get
Cancel [Preview] [Reply]
quiet neutral - CTA neutral - CTA constructive
Only the main call to action has a color even though Cancel is destructive
and [Preview] is progressive. If we let the button colors match their
semantics then the buttons would appear
Cancel [Preview] [Reply]
In bug 57695 "Apply intuitive Agora styles to Flow buttons", Eduard Braun
(is he on this list?) asked for the colorful look, saying all the gray
buttons look alike. We have the option to be more colorful, just need to
choose wisely.
- The main submit buttons seems a bit small. Probably
should apply
mw-ui-big or something.
See my comment above, the buttons are smaller than in Flow. mw-ui-big is
still around and I agree it would be nice to make the buttons stand out
more.
I made these two changes to Login on ee-flow-extra[3]. When you're already
logged in, the other button becomes [Create another account] and then the
two buttons don't fit on one line, and because [Login] comes after it is
pushed below the less important button.
Thanks for sharing on Labs S. You're the best.
One other thing I notice: this style for mw.ui really begs use of
placeholders instead of labels. Forms like Password reset etc. would look
so much cleaner.
There were technical issues with placeholder-only in 2013 (Matt Flaschen
had a patch), and there's the concern that if you return to a form or your
browser auto-fills a form field with previous data, then you have no idea
what the field is for unless you blank it out.
*Links*
As before ee-flow-extra labs instance has:
* Juliusz' patch updating mw-ui-button in core,
https://gerrit.wikimedia.org/r/#/c/103494
* The patch that uses the new styles in Login, CreateAccount, and
Special:PasswordReset (
https://gerrit.wikimedia.org/r/#/c/104011/ )
* Latest Flow, try replying at <
http://ee-flow-extra.instance-proxy.wmflabs.org/wiki/Talk:Sandbox> and
compare its buttons.
* The living style guide, <
http://ee-flow-extra.instance-proxy.wmflabs.org/w/resources/mediawiki.ui/do…
* My left-hand nav hack that builds all the buttons, go to a non-special
page like
http://ee-flow-extra.instance-proxy.wmflabs.org/wiki/Main_Page ,
check mediawiki.ui, and then [Insert Agora buttons]
[2]
http://ee-flow-extra.instance-proxy.wmflabs.org/w/resources/mediawiki.ui/do…
[3]
http://ee-flow-extra.instance-proxy.wmflabs.org/wiki/Special:UserLogin
--
=S Page Features engineer