MediaWiki theme: Alter the toolbar and dropdown menu design
Closed, ResolvedPublic8 Estimated Story Points
Actions

Assigned To

Authored By

	• KHammerstein
	Jan 13 2015, 7:27 PM

Description

Addressing:
T85998 Toolbar popup widgets have no visible anchor
T85974 Toolbar border too strong

Toolbar will have a gray background to separate chrome from content but still be unified with the site's aesthetic.
On hover and selected states tools will have a clear indication that they are selected. They will be connected to the dropdown menu to show a clear relationship.

Toolbar

toolbar background #F6F6F6
border on top and bottom #DDD (top border will replace blue line)
lines within toolbar #DDD - after undo/redo, after headings, and before help
remove box around headings
Icons at 65% black according to T86047

Tools and dropdowns

On hover and select, tool gets a white background with #CCC border
Dropdown anchored to bottom of toolbar
Dropdown white background with #CCC border
Dropdown item on hover background #DDD
Dropdown item selected background #999
Dropdown item selected text and icon #FFF
remove margin above first item in dropdown

2_dropdown_hover-02.png (1×2 px, 1007 KB)

3_dropdown-selected-02.png (1×2 px, 1007 KB)

*Other changes in mockups such as tool position and labels are just experimenting!

Details

	Subject	Repo	Branch	Lines +/-
	MediaWiki theme: Polish the toolbar design	oojs/ui	master	+201 -127

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	• Nirzar	T85998 MediaWiki theme: Toolbar popup widgets have no visible anchor
Declined	Jdforrester-WMF	T96118 Put Citoid in the regular Cite menu anyway
Open	None	T98160 No direct indication of current styling (pre-annotation stack)
Resolved	• Nirzar	T86693 MediaWiki theme: Alter the toolbar and dropdown menu design

Event Timeline

• KHammerstein created this task.Jan 13 2015, 7:27 PM

• KHammerstein raised the priority of this task from to Needs Triage.

• KHammerstein updated the task description. (Show Details)

• KHammerstein added projects: VisualEditor, Design.

• KHammerstein added subscribers: • KHammerstein, Jdforrester-WMF.

Ryasmeen triaged this task as Medium priority.Jan 15 2015, 12:48 AM

Ryasmeen set Security to None.

Ryasmeen moved this task from To Triage to Freezer on the VisualEditor board.Jan 15 2015, 12:52 AM

• KHammerstein mentioned this in T85974: MediaWiki theme: Toolbar border too strong.Jan 29 2015, 7:45 PM

• KHammerstein added a subscriber: Esanders.

• KHammerstein updated the task description. (Show Details)Jan 29 2015, 7:47 PM

matmarex added a parent task: T85998: MediaWiki theme: Toolbar popup widgets have no visible anchor.Jan 29 2015, 9:43 PM

matmarex added a parent task: T85974: MediaWiki theme: Toolbar border too strong.

Jdforrester-WMF renamed this task from Toolbar and dropdown menu design to MediaWiki theme: Alter the toolbar and dropdown menu design.Feb 2 2015, 3:38 AM

Jdforrester-WMF raised the priority of this task from Medium to High.

Jdforrester-WMF added a project: OOUI.

Jdforrester-WMF added a project: VisualEditor 2014/15 Q3 blockers.Feb 3 2015, 5:54 PM

• TrevorParscal edited a custom field.Feb 4 2015, 6:47 PM

• TrevorParscal edited a custom field.Feb 4 2015, 7:09 PM

The proposed grey background is very similar to the grey background used for disabled widgets.

matmarex mentioned this in T78086: Menus' dropdown icons should be smaller and lighter in the MediaWiki theme.Feb 5 2015, 5:31 PM

Ricordisamoa subscribed.Feb 5 2015, 11:16 PM

I prefer separating the toolbar with a background colour over a thick border, however the grey is very similar to the page background colour making it look transparent, and more bound to the interface than the content.

Separately, using white variant icons means serving twice as many icon files, so we should consider that choice carefully. We may have backed ourselves into a corner a bit by only letting the background colour change on state change.

• Elitre subscribed.Feb 11 2015, 8:53 PM

As a product decision, we decided to remove this as a blocker to the release; instead, this potentially will be part of our polish effort instead. Consequently, we decided to remove this from the Q3 blockers list at the triage meeting on 2015-02-11.

Jdforrester-WMF removed a project: VisualEditor 2014/15 Q3 blockers.Feb 14 2015, 2:10 AM

Jdforrester-WMF moved this task from Backlog to Next-up on the OOUI board.Feb 21 2015, 8:27 PM

• KHammerstein added subscribers: • Nirzar, Pginer-WMF.Mar 3 2015, 7:03 PM

• violetto subscribed.Mar 5 2015, 6:29 AM

What css files should I be looking at if I want to work on this?

Hi, where is the help-icon loaded from? Also, the icons available in the codebase are of the inverted color scheme (i.e, gray question mark on a white background inside a gray circle). The help-icon in the images provided here is different. Is that available anywhere? or is it part of some skin? I have the default skin enabled.

In T86693#1119196, @Ankita-ks wrote:

What css files should I be looking at if I want to work on this?

Primarily /src/themes/mediawiki/tools.less, probably. Possibly also the ones in /src/styles that have "tool" in their names (but note that the styles defined there apply to all OOjs UI themes, and not only the MediaWiki theme).

In T86693#1119783, @Ankita-ks wrote:

Hi, where is the help-icon loaded from? Also, the icons available in the codebase are of the inverted color scheme (i.e, gray question mark on a white background inside a gray circle). The help-icon in the images provided here is different. Is that available anywhere? or is it part of some skin? I have the default skin enabled.

The SVG source file for the 'help' icon in MediaWiki theme is /src/themes/mediawiki/images/icons/help.svg, and it is indeed black on transparent background. During the build process (when you run grunt build), an "inverted" white-on-transparent version is generated (as well as PNG versions for both color variants).

You can make an OOjs UI widget use that version by adding the .oo-ui-image-invert CSS class to the DOM node available via its .$element property. Usually you wouldn't do this manually; instead, define the rules for icon color variant in /src/themes/mediawiki/MediaWikiTheme.js and call this.updateThemeClasses() in the widget. For example, look at how the icon for colored ("flagged primary") and grey (disabled) buttons is white in the demo (http://tools.wmflabs.org/oojs-ui/oojs-ui/demos/, scroll down to "Button style showcase") – that's how it works.

It saddens me that T85998 is still broken months after we launched this skin. Instead of fixing the issues identified we end up coming with larger redesigns which don't get implemented because their increased scope increases complexity.

• KHammerstein added a project: VisualEditor 2014/15 Q4 blockers.Apr 1 2015, 7:30 PM

• KHammerstein edited a custom field.

Jdforrester-WMF assigned this task to • Nirzar.Apr 8 2015, 7:27 PM

Jdforrester-WMF edited a custom field.

Jdforrester-WMF moved this task from Nominated to Doing on the VisualEditor 2014/15 Q4 blockers board.

nshahquinn-wmf mentioned this in T96118: Put Citoid in the regular Cite menu anyway.Apr 17 2015, 12:55 AM

nshahquinn-wmf added a parent task: T96118: Put Citoid in the regular Cite menu anyway.

matmarex removed a parent task: T85974: MediaWiki theme: Toolbar border too strong.Apr 26 2015, 2:07 PM

Jdforrester-WMF added a parent task: T98160: No direct indication of current styling (pre-annotation stack).May 5 2015, 3:36 PM

Change 206161 had a related patch set uploaded (by Jforrester):
[WIP] VE toolbar polish

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

gerritbot added a project: Patch-For-Review.May 8 2015, 1:29 AM