Design/Archive/UX standardization: Difference between revisions
Appearance
< Design
Content deleted Content added
SPage (WMF) (talk | contribs) m →Specifications: tweak |
SPage (WMF) (talk | contribs) →To Do: name dialog is highest priority, mark some things done |
||
Line 36: | Line 36: | ||
* Use Agora CSS in mobile (https://gerrit.wikimedia.org/r/#/c/102581/) |
* Use Agora CSS in mobile (https://gerrit.wikimedia.org/r/#/c/102581/) |
||
* Use Agora CSS in VE by using mediawiki.ui flavor/theme |
* Use Agora CSS in VE by using mediawiki.ui flavor/theme |
||
* Identify [ |
* Identify [[Wikimedia_Foundation_Design/Agora_Control_Library| existing and required]] Control/UI elements |
||
** Highest priority is a usable Agora dialog (vs. [[:Category:Inconsistent_close_icon|woeful inconsistency]]). |
|||
** Next is Agora flyouts. |
|||
* Develop live style guide: |
* Develop live style guide: |
||
** auto-generate CSS examples (see https://github.com/kneath/kss) and Jon Robson CSS demo |
** auto-generate CSS examples (see https://github.com/kneath/kss) and Jon Robson CSS demo |
||
Line 45: | Line 47: | ||
=== OOjs UI to dos === |
=== OOjs UI to dos === |
||
* Split into separate repos |
* {{Done}} Split into separate repos |
||
** oojs/core and oojs/ui |
|||
⚫ | |||
** ve-mw and mw-ui (?) |
** ve-mw and mw-ui (?) |
||
*** VE |
*** VE |
||
⚫ | |||
**** oojs-ui |
|||
***** oojs |
|||
* Documentation ([[OOjs UI|intro]] and [https://doc.wikimedia.org/VisualEditor/master/#!/api/OO reference]) |
* Documentation ([[OOjs UI|intro]] and [https://doc.wikimedia.org/VisualEditor/master/#!/api/OO reference]) |
||
* Sample code ({{gerrit|93525}}) |
* Sample code ({{gerrit|93525}}) |
Revision as of 20:28, 12 February 2014
We have a number of divergent UI libraries in use in MediaWiki core and extensions. This project, led by the Design team at the Wikimedia Foundation, is attempting to slowly but surely converge on a single, consistent look-and-feel for MediaWiki user interfaces.
Specifications
- A living style guide to document styles in use
- Wikimedia Foundation Design/Agora Control Library lists desired controls and annotates button styles
- File:Agora specs.pdf is an outdated but more comprehensive visual spec
Existing libraries / conventions
mw-ui-
styles in the mediawiki.ui core module- used by Special:Login, Special:CreateAccount, Special:PasswordChange, and Special:Search in core
- used by extensions Echo, Flow, GettingStarted, GuidedTour, OAuth, UploadWizard (campaigns only)
- jQuery.ui used by AFT, PageTriage, TimedMediaHandler, UploadWizard, WikiBase, WikiLove, more...
- backbone.js/Underscore.js (PageTriage) - JS MVC framework with template support
- Mobile ui (MobileFrontend)
- OOjs UI widget framework used by VisualEditor
- Vector
- Design audit has screenshots
What we are converging on
- OOjs UI for rich JavaScript and widgets
- mediawiki.ui for CSS styles, and MediaWiki-specific widgets
To Do
Convert Mediawiki.ui to LESSImplement Agora CSS inmediawiki.ui
(bug 54360)- Update inputs and textareas in mediawiki.ui to look like Flow's .mw-ui-input
- Make mediawiki.ui a flavor/theme of OOJS UI
- Use Agora CSS in core and extensions make a table of them?? or use a tracking bug with flags
- by applying
mw-ui-
CSS styles- Gerrit change 52169 does this for many buttons in core
- by rewriting them to use OOjs UI toolkit
- by applying
- Use Agora CSS in mobile (https://gerrit.wikimedia.org/r/#/c/102581/)
- Use Agora CSS in VE by using mediawiki.ui flavor/theme
- Identify existing and required Control/UI elements
- Highest priority is a usable Agora dialog (vs. woeful inconsistency).
- Next is Agora flyouts.
- Develop live style guide:
- auto-generate CSS examples (see https://github.com/kneath/kss) and Jon Robson CSS demo
- show use of client-side OOjs UI JavaScript
- swap CSS (see http://pauginer.github.io/agora/ )
- server-side form examples (in Special:Agora page in https://gerrit.wikimedia.org/r/93525)
- Add useful descriptions to the class comments for each Widget class in OO.ui - i.e. what sort of UI element does this build?
OOjs UI to dos
- Done Split into separate repos
- oojs/core and oojs/ui
- ve-mw and mw-ui (?)
- VE
- Not done Split OO UI dialog into a separate component and apply Agora styling to it
- Documentation (intro and reference)
- Sample code (Gerrit change 93525)
- Get requirements from other teams
- Clients outside VE team.
- RfC
- Move this to core
UX standardization status by extension
Extension | Maintainer | Status/Blockers | UI components | Compatibility |
---|---|---|---|---|
ContentTranslation | i18n team | One mw-ui button | mediawiki.ui | |
Flow | Core features team | Implements latest Agora, but as local override not core | jquery.ui.dialog, jquery.scroll, jquery.spinner, jquery.tipsy, mediawiki.ui (+ override) | |
UploadWizard | Multimedia team | Uses mostly jQuery.ui, campaigns are migrated to mediawiki.ui | resizable input field, resizable textarea, inline input field, form validation, radio buttons, dropdown select lists, auto-suggest dropdown, tooltips, file input, collapsible form elements, image thumbnail selection grid, date picker, modal dialog box | IE6 and newer |
MobileFrontend | Mobile web team | All internal styles and libraries except for hogan templates | buttons, full-screen overlays, toggler, button bar, segmented button | IE9 and newer (usually) |
PageTriage | No one | Some internal, some jQuery.ui | backbone.js + Underscore (including use of templates), jquery.waypoints, jquery.tipoff, jquery.badge, jquery.ui.button, jquery.ui.draggable, pokey dialog | IE7? |
Echo | No one | Some internal, some mediawiki.ui | buttons, pokey dialog, jQuery,badge | IE7? |
GuidedTour | Growth | Uses mediawiki.ui controls, some redundant styles to remove from original guiders.js | Primary buttons, close icon | |
GettingStarted | Growth | Uses few mediawiki.ui controls, needs some new styles such as muli-line text in buttons and icons in buttons | Primary and secondary CTAs, close icon | |
OAuth | Platform-core | mw-ui- styles mostly, jquery.ui.autocomplete, jquery.ui.dialog | ||
WikiLove | No one | uses jQuery.ui | jquery.ui.dialog, jquery.ui.button, image selector, side tabs (with icons), dropdown select lists | |
WikiEditor | No one | uses some internal, some jQuery.ui | button toolbar, jquery.ui.dialog, jquery.ui.button, dropdown select lists | |
CentralNotice | Fundraising team | uses internal and some jQuery.ui | jquery.ui.multiselect, jquery.ui.datepicker, dropdown select lists | |
Special:PasswordReset (Core) | None | vform, mw.ui.primary | ||
Special:ChangeEmail (Core) | None | mediawiki.special.changeemail (clientside form validation) | ||
Special:Search (Core) | Platform | vform, mw.ui.primary | ||
UniversalLanguageSelector (ULS) | Language Engineering Team | mediawiki.ui use is bug 50599, but ULS needs to work in MW 1.20 | Foundation Framework grid, side tabs, buttons, flyout. local 'button blue' CSS, jquery tipsy, more? |