Page MenuHomePhabricator

implement updated appearance to Mediawiki.ui (tracking)
Closed, DeclinedPublic

Description

MediaWiki UX designers are working on a revised and expanded Agora design spec, temporarily at https://www.dropbox.com/s/wa9uayq9j09agyh/Agora%20specs.pdf

The Flow extension implements part of this (e.g. buttons with a bottom bevel and a blue bar for the focus indicator) but it is currently in a CSS override local to the extension
https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FFlow.git/HEAD/modules%2Fdiscussion%2Fagora2-override.css

We need to update the core mediawiki.ui CSS module to this new design.
Currently its CSS is generated from Compass/sass files, we should convert it to LESS ( https://www.mediawiki.org/wiki/Requests_for_comment/LESS ).

There are related efforts that should remain outside the scope of this bug:

  • Apply the Agora mw-ui- styles to more buttons and forms in MediaWiki core (gerrit 52169, gerrit 65346), and in extensions.
  • Update MobileFrontend's CSS to new Agora spec. Mobile uses simpler CSS rules generated from LESS files.
  • Implement support for LESS pre-processor in ResourceLoader (bug 40964).
  • Develop more modular CSS generated from the same LESS files for both mobile and desktop.
  • Typography and left-hand nav changes in Vector skin (gerrit 79948)

You can provide feedback on the new design on https://lists.wikimedia.org/mailman/listinfo/design .


Version: unspecified
Severity: enhancement

Details

Reference
bz54360

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 2:03 AM
bzimport set Reference to bz54360.
bzimport added a subscriber: Unknown Object (MLST).

Update:

The Agora specs are also at https://www.mediawiki.org/wiki/File:Agora_specs.pdf
The latest Flow design https://www.mediawiki.org/wiki/Flow_Portal/Design#Visual_design_iterations revises the colors and text field specs, and introduces specs for smaller buttons.

The Flow extension implements this design using the LESS pre-processor,
https://git.wikimedia.org/tree/mediawiki%2Fextensions%2FFlow.git/HEAD/modules%2Fmediawiki.ui%2Fstyles , though still as a local CSS override to mediawiki.ui.

Also, Jared's pal implemented the Agora button specs (for the .mw-ui-big 35px button size, not the Agora 30px buttons) in LESS, with both the inner bevel and outer shadows and subtle transitions, in http://33cc77.com/wikipedia/

I think this should be bumped up in priority. We want to do this before using/encouraging people to use the buttons on a wide scale.

I broke bug 58297 (buttons) out. I think that can be done first (or nearly first), although there's other stuff that should also be moved to core.

Change 103494 had a related patch set uploaded by JGonera:
[WIP] Update mediawiki.ui button styles

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

Change 103494 merged by jenkins-bot:
Update mediawiki.ui button styles

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

Change 104011 had a related patch set uploaded by Spage:
Update login and HTMLForm to new design

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

The new buttons are merged in core \o/ with light changes to the Login, Create account, and PasswordReset forms using them. gerrit 104011 gives those forms the right-aligned button layout in the Agora spec.

Updated the title since we're using "mediawiki.ui" to mean the style, not agora, to try to keep things simple

Do we need this tracking bug now we have an entire component for mediawiki ui..?

probably not, but I'll let someone in Eng. decide that.