Page MenuHomePhabricator

Find alternative solution to connect OOUI documentation and implemented widgets
Open, HighPublic

Description

OOUI documentation has been established with “Apex” theme screenshots and has never been updated to default – since MW 1.25 – “MediaWiki” theme (current demo with both themes, default is MediaWiki).

Event Timeline

Volker_E created this task.May 3 2017, 5:17 AM
Restricted Application added subscribers: TerraCodes, Aklapper. · View Herald TranscriptMay 3 2017, 5:17 AM
Volker_E updated the task description. (Show Details)May 5 2017, 3:18 AM
goodlux added a subscriber: goodlux.May 5 2017, 3:18 AM

Hi - it's difficult to tell which screenshots are the ones that need to be updated, if unfamiliar with the Apex Theme.

So a few things that would be helpful here.

  1. A list of the images that need to be replaced (urls)
  2. Where would a contributer find new versions to make screenshots from?

After looking at this, it seems to make sense to replace the png screenshots of buttons and widgets with actual buttons and widgets that implement the code sample.

For instance:

The buttons and switches on this page should be replaced with actual buttons an switches:

https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches

Alternately, there could be links out to a "sandbox" app that would let you build the javascript buttons interactively.

Volker_E updated the task description. (Show Details)May 5 2017, 6:50 PM

Thanks @goodlux for your inputs!

The buttons and switches on this page should be replaced with actual buttons an switches:

As much as it would be the most useful outcome from my perspective, we're running into a technical hurdle with this idea.

Alternately, there could be links out to a "sandbox" app that would let you build the javascript buttons interactively.

That seems more promising, we've been discussing at the tech writer event last night the possibility of having just in-page anchors in the OOjs UI demo, which we could link to from the documentation and basically remove the outdated screenshots as much as useful.

Volker_E renamed this task from Update OOjs UI screenshots in MediaWiki documentation to Find alternative solution to connect OOjs UI documentation and implemented widgets.May 10 2017, 12:10 AM

Today we are working on trying to generate new screenshots. For example on this page:

https://www.mediawiki.org/wiki/OOjs_UI/Creating_interfaces_programmatically

we want to update screenshot that says "Click Me !". Solution is to copy existing code snippets from this page and link to media wiki theme rather than the old Apex Theme as well as any required .js / css etc.

However, we are not able to get the button to output properly in browser for new theme.

here is screenshot of what it looks like in the browser.

could somebody look at the file and see what we need to do for it to output properly as per this page:

https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr-desktop

@Volker_E Andrew and I are here at the WriteTheDocs meetup, if you could take a look at the comment above and suggest how we could move forward, that would be great :)

matmarex added a subscriber: matmarex.EditedMay 14 2017, 7:44 PM
  • For the font – OOjs UI widgets will use whatever font the page uses. Browsers usually use a serif font as the default, while in MediaWiki we use a sans-serif font. To include sane defaults for this and other options, you can just add the OOjs UI demo stylesheet to your page: https://github.com/wikimedia/oojs-ui/blob/master/demos/styles/demo.css (this is probably easier than extracting them from MediaWiki and the effect should be the same)
  • For the missing icon – you'll need to include the specific stylesheets, for example <link rel="stylesheet" href="oojs-ui-mediawiki-icons-content.css">. Syntax like <link rel="stylesheet" src="oojs-ui-mediawiki-icons-*.css"> won't work. See the demo for the list of "icon packs": https://doc.wikimedia.org/oojs-ui/master/demos/#icons-mediawiki-ltr-desktop
Volker_E moved this task from Backlog to Next-up on the OOUI board.May 24 2017, 10:06 PM

@matmarex @Mooeypoo To me this is the correct task to discuss the replacement of the URL hash fragment in order to use the now available ids.

Volker_E renamed this task from Find alternative solution to connect OOjs UI documentation and implemented widgets to Find alternative solution to connect OOUI documentation and implemented widgets.Jan 6 2018, 7:34 AM
Volker_E updated the task description. (Show Details)

I don't see why this is tagged as good first task (see its description).

Which exact pages is this about ( https://www.mediawiki.org/wiki/OOUI has no images ), or better which exact images is this about (link to their on-wiki category)?