Agora/Engineering

Munaf, spage, and Trevor talked about Agora, CSS, Userlogin and VE in November 2012, and again in 2013.

What is Agora?
Everyone so far has rolled their own blue buttons: AFT, VE, and E3.

Trevor has mostly focused on the button look, but it encompasses the cleaner forms and different typography that E3 is developing.

Approach
If a page element has new style mw-ui-button, then it gets the new-look button appearance; "mix-in" styles constructive and destructive make the button green and red. But no buttons have these styles yet. There is a patch to add them to core buttons.

Similarly, if a form or div has new style mw-ui-vform, then divs within it are styled in a vertical stack.

Agora is decoupled from the user's skin; code can opt-in to the Agora styles and it'll sort-of work in other styles besides Vector. This is implemented by the Resource Loader module uses skinStyles to send either 'mediawiki.ui.vector.css' or 'mediawiki.ui.default.css' to the client.

Agora extension
Extension:Agora,

This sends CSS and JS to the client. It's not shipped or enabled on any wiki yet.

Agora in core
E3 has a patch that copies the Agora CSS styles into core (resources/mediawiki.ui ) and change the Log in form to use Agora mw-ui-buttons and mw-ui-vform.

Changing HTMLForm
spage has a patch on top of Tyler Romeo's that changes HTMLForm. Clients like SpecialNewUserlogin.php in can simply

This builds off the div layout and adds the 'vform' CSS style to the div.

HTMLForm Issues

 * setSubmitTextMsg to set the button needs to apply mw-ui-button styles in Agora mode, needs a $mixinClasses parameter that takes the additional classes so you can set it to 'primary', 'constructive', etc.


 * when a checkbox or radio button is in a vform, need to detect and output the inverted labelledCheck (code currently in includes/templates/UserloginAgora.php).


 * unclear how to cleanly do labels with a right-aligned link
 * "Password&nbsb;  _Forgotten your login details?_"

rollout
Trevor was thinking of rolling Agora extension out in the new year, due to him working on VE stuff in his real job.

To actually see the new buttons across all MediaWiki pages there would be a monster platform commit that applies the style to buttons everywhere.

E3's Userlogin enhancement will depend on this extension If E3 deploys the extension, then VE will require it as well instead of their own CSS

E3 wants to roll out new Userlogin form with button changes to every wiki.

If/when we're confident it does the right thing we can change all existing styles.
 * the Agora extension could add a .agora style to the &lt;body> tag of all pages, thereby changing all pages where the Agora CSS changes existing styles.
 * or we simply remove .agora from CSS selectors in agora.css, thereby changeing all pages.

The extension could make its addition of the .agora style to pages dependent on a user pref, so that users can opt out of it. Trevor thinks this is easy to do, he's done it before.

Organizing the CSS
Munaf wants to use less. Fine, use a Makefile to build CSS. RL one day could do this for us.

less or sass? sass has better PHP integration so maybe that.

Changing core forms
Could choose different templates in the special page, rather than having a conditional in the template itself. Implemented

PHP implementation
Userlogin and Usercreate don't use HTMLForm, they're just QuickTemplate. HTMLForm is better. Evaluating HTMLForm, See section above.

Trevor suggestion: Modify the template to optimize for Agora but have a mode where CSS changes make it look like the old version.
 * this would be hard, have to add spans and divs within the &lt;li> elements and then table-ize them.

CSS naming
Munaf leans towards the latter. It makes it possible to transition site over to new style and/or eventually remove the .agora
 * Should the new Userlogin/Usercreate form layouts add meaningful mw-form-stacked, etc. class names similar to Trevor's Agora mw-ui-button class, and when Agora is loaded these trigger the new appearance?
 * Or should the Userlogin/Usercreate form layouts just apply .agora style to an enclosing div, so that when Agora extension is loaded everything picks up Agora styling?

Agora adds mw-ui-vform that triggers vertical (block, width:100%) layout for its contents; the core forms also use a 'mw-ui-content' area and have selectors within that to turn off Vector's h2 underline, remove Vector's border on forms, etc.

Reviewers
Reedy or Chad on platform should review, or Timo/Krinkle. Need to socialize

Examples

 * Buttons and form fields
 * Modal dialogs